Leaflet Map has a Shortcode helper in the admin backend. Here can you see it in the frontend.
First: Insert css for marching-ants:
<style>
.marching-ants {
animation: dash 35s infinite linear;
}
@keyframes dash {
to {
stroke-dashoffset: -1000;
}
}
</style>Second: enqueue dashicons in frontend. (Function is included in Extensions for Leaflet Map).
Shortcode Helper
Interactive Shortcodes:
Move the map and the marker to generate shortcodes below:
Examples:
Standard
[leaflet-map zoom=12 lat=51.05 lng=-114.06]
Many Markers!
[leaflet-map zoom=10 lat=43.65 lng=-79.385]
[leaflet-marker]
[leaflet-marker lat=43.68 lng=-79.275]
[leaflet-marker lat=43.67 lng=-79.4]
Draggable Marker
[leaflet-map zoom=8 lat=-33.85 lng=151.21 scrollwheel]
[leaflet-marker draggable]
Marker Icon
[leaflet-map zoom=14 address="Ha Ling, canmore" scrollwheel !detect-retina show_scale]
[leaflet-marker iconUrl="https://i.imgur.com/Q54ueuO.png" iconSize="80,50" iconAnchor="40,60"]
SVG Marker Icon
[leaflet-map address="twilight lane, nova scotia" scrollwheel]
[leaflet-marker svg background="#777" iconClass="dashicons dashicons-star-filled" color="gold"]My Favorite Place in the World[/leaflet-marker]
Zoom Buttons
[leaflet-map zoom=10 lat=48.855 lng=2.35 zoomcontrol !detect-retina]
Marker Popup Messages (on click)
[leaflet-map lat=59.913 lng=10.739 zoom=12]
[leaflet-marker]OSLO![/leaflet-marker]
Links In Marker Messages (visible)
[leaflet-map lat=28.41 lng=-81.58 zoom=15 detect-retina]
[leaflet-marker visible] Disney World! Link [/leaflet-marker]
Basic Lines w/Scrollwheel
[leaflet-map lat=41 lng=29 scrollwheel zoom=6]
[leaflet-line latlngs="41, 29; 44, 18;"]
Basic Polygon
[leaflet-map fitbounds]
[leaflet-polygon addresses="Miami; San Juan; Bermuda" color="green" fillColor="yellow"]Bermuda Triangle[/leaflet-polygon]
Basic Circle
[leaflet-map lat=52 lng=5 zoom=8.2 zoomcontrol !show_scale]
[leaflet-circle lat=52 lng=5 radius=17500]
[leaflet-scale position=topright]
Fitted Colored Line on Addresses
[leaflet-map fitbounds]
[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;"]
More Crazy Line Attributes
[leaflet-map fitbounds]
[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, Nova Scotia; Tanzania" classname=marching-ants]
Disable all Interaction
[leaflet-map address="las vegas" !boxZoom !doubleClickZoom !dragging !keyboard !scrollwheel !attribution !touchZoom !show_scale]
Add GeoJSON by URL
[leaflet-map fitbounds scrollwheel]
[leaflet-geojson src=https://gist.githubusercontent.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/ee100561f5a0a8cf55430e9f2157e4a1e2560a2e/map.geojson]
Add GeoJSON with circle markers and popups
[leaflet-map fitbounds scrollwheel]
[leaflet-geojson circleMarker radius=10 src=https://gist.githubusercontent.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/ee100561f5a0a8cf55430e9f2157e4a1e2560a2e/map.geojson]{popup-text}[/leaflet-geojson]
Add KML by URL
[leaflet-map fitbounds]
[leaflet-kml src=https://cdn.jsdelivr.net/gh/mapbox/togeojson@master/test/data/polygon.kml fillColor=red color=white]
Add GPX by URL
[leaflet-map fitbounds]
[leaflet-gpx src=https://cdn.jsdelivr.net/gh/mapbox/togeojson@master/test/data/run.gpx color=black]
Keep them in Newfoundland
[leaflet-map maxbounds="46.22545288226939, -59.61181640625;51.72702815704774, -52.36083984375" zoom=5 zoomcontrol]
Image Map
[leaflet-image zoom=1 zoomcontrol scrollwheel !attribution]
[leaflet-marker draggable]
Image Overlay Map
[leaflet-map fitbounds]
[leaflet-image-overlay]
Video Overlay Map
[leaflet-map fitbounds]
[leaflet-video-overlay]
WMS Map
[leaflet-wms zoomControl zoom=5 lat=38.9252 lng=35.33203 attribution="For Those of Us in Turkey"]