How to include Leaflet plugin leaflet.Permalink

Leaflet Plugin leaflet.Permalink: Adds the maps center and zoom as a permalink for Leaflet maps.

When using the maps, content is loaded from third-party servers. If you agree to this, a cookie will be set and this notice will be hidden. If not, no maps will be displayed.

[leaflet-map lat=51.05814 lng=13.74131 zoom=9]
[leaflet-marker]Position[/leaflet-marker]
[leaflet-permalink]
[gestures]
[zoomhomemap !fit]

Change the map, zoom in or out and you will get an unique permalink, see URL.

It does not work correct always with the hash in the original URL. It is an interaction with browser cache, lat, lng, zoom resp. fitbounds from leaflet-map and the hash. This overview could serve as a reference. lat, lng and zoom are defined by the hash.

Preparation

The original code does not work properly. So I forked it and made my own repository.

Download js and put in upload directory (e.g. /wp-content/uploads/leaflet-plugins/leaflet-permalink).

Code

Use e.g. WPCode and configure this as a PHP snippet in Frontend only.

<?php
function leafext_enqueue_permalink () {
  wp_enqueue_script('permalink',
  '/wp-content/uploads/leaflet-plugins/leaflet-permalink/leaflet.permalink.min.js',
  array('wp_leaflet_map'), null);
}
function leafext_permalink_script(){
  $text = '<script>
  window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];
  window.WPLeafletMapPlugin.push(function () {
    var map = window.WPLeafletMapPlugin.getCurrentMap();
    map.whenReady ( function() {
      L.Permalink.setup(map);
    });
  });
  </script>';
  return "\n".$text."\n";
}
function leafext_permalink( $atts ){
  leafext_enqueue_permalink ();
  return leafext_permalink_script();
}
add_shortcode('leaflet-permalink', 'leafext_permalink' );

Shortcode

Then use a shortcode like:

[leaflet-map]
[leaflet-permalink]
Nofollow!