Discussion
Loading...

Post

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Jürgen Hubert
Jürgen Hubert
@juergen_hubert@mementomori.social  ·  activity timestamp 2 days ago

#Leaflet question:

Google MyMaps allows you to display a list of custom locations you have placed on that map. And then you can click on any item on that list, and the map will zoom to the relevant location.

Is anything similar possible with Leaflet? And if so, could you point me to documentation or a tutorial?

2 media
A custom Google MyMaps with a list of locations near Darmstadt.
A custom Google MyMaps with a list of locations near Darmstadt.
A custom Google MyMaps with a list of locations near Darmstadt.
A specific location from that map.
A specific location from that map.
A specific location from that map.
  • Copy link
  • Flag this post
  • Block
Torsten Schönebaum
Torsten Schönebaum
@tosch@gruene.social replied  ·  activity timestamp 2 days ago

@juergen_hubert This leaflet plugin may help you: https://github.com/stefanocudini/leaflet-list-markers

GitHub

GitHub - stefanocudini/leaflet-list-markers: A Leaflet Control for listing visible markers/features in a interactive box

A Leaflet Control for listing visible markers/features in a interactive box - stefanocudini/leaflet-list-markers
  • Copy link
  • Flag this comment
  • Block
Andy Zeigert
Andy Zeigert
@zeigert@mastodon.social replied  ·  activity timestamp 2 days ago

@juergen_hubert Fairly simple with some basic javascript.

Most basic for markers:

const layer = new L.geoJSON(data, {
onEachFeature: (feature, layer) => {
layer.on({
click: (e) => {
map.panTo(e.target.getLatLng());
}
})
}
});

There are slight variations depending on what kind of layer you're using, but search the docs for map.panTo or map.zoomTo. You can add events as a function of a layer group, or add the event to the marker layer as it's added. Does that help?

  • Copy link
  • Flag this comment
  • Block
Jürgen Hubert
Jürgen Hubert
@juergen_hubert@mementomori.social replied  ·  activity timestamp 2 days ago

@zeigert I don't know yet, but it's worth looking into. Thanks!

  • Copy link
  • Flag this comment
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances
Bonfire social · 1.0.2-alpha.7 no JS en
Automatic federation enabled
Log in
  • Explore
  • About
  • Members
  • Code of Conduct