Leaflet Map
Füge eine Karte hinzu, die mit LeafletJS erstellt wurde: einer Open-Source-JavaScript-Bibliothek für mobilfreundliche interaktive Karten. Kartenkacheln werden standardmäßig über OpenStreetMap oder MapQuest (mit einem App-Schlüssel) bereitgestellt. Kann pro Karte mit Shortcode-Attributen oder über die Dashboard-Einstellungen eingestellt werden.
Maps
Simply create a map with:
[leaflet-map]
Lookup an address with:
[leaflet-map address="chicago"]
Know the latitude and longitude of a location? Use them (and a zoom level) with:
[leaflet-map lat=44.67 lng=-63.61 zoom=5]
Add a marker under your map shortcode, like so:
[leaflet-map]
[leaflet-marker]
Want more? Make more (and fit the map to contain all of them):
[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]
[leaflet-marker address="oslo"]
[leaflet-marker address="cairo"]
[leaflet-marker address="toronto"]
You can even add popups (to any shape) with their names:
[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]Tokyo[/leaflet-marker]
[leaflet-marker address="oslo"]Oslo[/leaflet-marker]
...
Füge einen Link zu den Pop-up-Nachrichten hinzu, genauso wie du es mit jedem anderen Link im WordPress-Editor machen würdest.
Other Shapes, GeoJSON, and KML
Add a line to the map by adding [leaflet-line]. You can specify the postions with a list separated by semi-colon ; or bar | using lat/lng: [leaflet-line latlngs="41, 29; 44, 18"] or addresses: [leaflet-line addresses="Istanbul; Sarajevo"], or x/y coordinates for image maps.
Add a circle to the map by adding [leaflet-circle]. You can specify the position using lat and lng and the radius in meters using radius. You can also customize the style using Leaflet’s Path options. Example: [leaflet-circle message="max distance" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="#0DC143" fillOpacity=0.1].
Oder du kannst ein Geojson-Objekt über eine URL hinzufügen (stelle sicher, dass du sie abrufen kannst, wenn sie nicht auf deinem eigenen Server gehostet wird): [leaflet-geojson src="https://example.com/path/to.geojson"]. Füge individuelle Pop-ups mit Feldnamen hinzu; probiere z. B. solche Felder aus:
[leaflet-map fitbounds]
[leaflet-geojson]{name}[/leaflet-geojson]
name is a property on that GeoJSON, and it can be accessed with curly brackets and the property name.
Image Maps
Alternatively, you could use a plain image for visitors to zoom and pan around with [leaflet-image src="path/to/image/file.jpg"]. See screenshots 3 – 5 for help setting that up.
More
Check out other examples on the Shortcode Helper page in the Leaflet Map admin section.
Den Quellcode und weitere Details findest du auf GitHub!