How to include Leaflet plugin leaflet.bezier

Leaflet Plugin leaflet.bezier: Create bezier with leaflet.

You can click on the destination of the airplane and a popup will appear.

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 height=500 fitbounds]
[leaflet-line color=#ffffff00 latlngs="41, 29; 44, 18;"]
[leaflet-bezier latlngs="41, 29; 44, 18;"]41, 29; 44, 18;[/leaflet-bezier]
[leaflet-line color=#ffffff00 addresses="Halifax, Nova Scotia; Tanzania;"]
[leaflet-bezier addresses="Halifax, Nova Scotia; Tanzania" slide="RIGHT_ROUND"]Halifax, Nova Scotia; Tanzania[/leaflet-bezier]
[leaflet-bezier addresses="Halifax, Nova Scotia; Tanzania"]Halifax, Nova Scotia; Tanzania[/leaflet-bezier]
[leaflet-bezier addresses="Halifax, Nova Scotia; Tanzania" slide="LEFT_ROUND" deep=8]Halifax, Nova Scotia; Tanzania[/leaflet-bezier]
[leaflet-bezier addresses="Halifax, Nova Scotia; Tanzania" slide="RIGHT_ROUND" deep=100]Halifax, Nova Scotia; Tanzania[/leaflet-bezier]
[leaflet-bezier addresses="Halifax, Nova Scotia; Tanzania" slide="RIGHT_ROUND" deep=3]Halifax, Nova Scotia; Tanzania[/leaflet-bezier]
[gestures]
[zoomhomemap fit]

You can omit fitbounds and the leaflet-line shortcodes. But make sure that the map has a defined initial state in which all elements are visible.

Preparation

Create your own leaflet.bezier.js and snap.svg-min.js or download it from my site: leaflet.bezier.js, snap.svg-min.js. Put in upload directory (e.g. /wp-content/uploads/leaflet-plugins/leaflet.bezier). You need also plane.png from https://github.com/lifeeka/leaflet.bezier/tree/master/demo. Put it in this directory too.

Code

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

<?php
function leafext_enqueue_bezier() {
	wp_enqueue_script(
		'bezier',
		'/wp-content/uploads/leaflet-plugins/leaflet.bezier/leaflet.bezier.js',
		array( 'wp_leaflet_map' ),
		null
	);
	wp_enqueue_script(
		'snap',
		'/wp-content/uploads/leaflet-plugins/leaflet.bezier/snap.svg-min.js',
		array( 'bezier' ),
		null
	);
}

function leafext_bezier_script( $locations, $content, $slide, $deep ) {
	$text = '<script>
  window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];
  window.WPLeafletMapPlugin.push(function () {
    var map = window.WPLeafletMapPlugin.getCurrentMap();
    var options = {
      color: "red",
      fillColor: "red",
      dashArray: 1,
      opacity: 0.8,
      weight: 2,
      iconTravelLength: 1.0, //How far icon should go. 0.5 = 50%
      iconMaxWidth: 20,
      iconMaxHeight: 20,
      fullAnimatedTime: 7000,// animation time in ms
      easeOutPiece: 4, // animation easy ou time in ms
      easeOutTime: 2500, // animation easy ou time in ms
    };
    var bezier = L.bezier({
      path: [
        [
		  {lat: ' . $locations[0][0] . ', lng: ' . $locations[0][1] . ', slide: "' . $slide . '", deep: ' . $deep . '},
          {lat: ' . $locations[1][0] . ', lng: ' . $locations[1][1] . '},
        ]
      ],
      icon: {
        path: "/wp-content/uploads/leaflet-plugins/leaflet.bezier/plane.png"
      }
    }, options);
	bezier.addTo(map);
	bezier.eachLayer(function (layer){
		var marker = new L.circleMarker(layer._coords.to,{color: "#ffffff00"}).addTo(map);
		marker.bindPopup("' . $content . '");
	});
  });
  </script>';
	return "\n" . $text . "\n";
}

function leafext_bezier( $atts, $content, $shortcode ) {
	$text = leafext_should_interpret_shortcode( $shortcode, $atts );
	if ( $text !== '' ) {
		return $text;
	} else {
		leafext_enqueue_bezier();
		if ( is_array( $atts ) ) {
			$locations = array();
			$slide = "LEFT_ROUND";
			$deep = 4;
			foreach ( $atts as $key => $item ) {
				if ( $key === 'latlngs' ) {
					$latlngs = preg_split( '/\s?[;|\/]\s?/', $item );
					foreach ( $latlngs as $latlng ) {
						if ( trim( $latlng ) ) {
							$locations[] = array_map( 'floatval', preg_split( '/\s?,\s?/', $latlng ) );
						}
					}
				} elseif ( $key === 'addresses' ) {
					include_once LEAFLET_MAP__PLUGIN_DIR . 'class.geocoder.php';
					$addresses = preg_split( '/\s?[;|\/]\s?/', $item );
					foreach ( $addresses as $address ) {
						if ( trim( $address ) ) {
								$location    = new Leaflet_Geocoder( $address );
								$locations[] = array( $location->lat, $location->lng );
						}
					}
				} elseif ( $key === 'slide' ) {
					$slide = $item;  # RIGHT_ROUND or LEFT_ROUND
				} elseif ( $key === 'deep' ) {
					$deep = $item; 
				}
			}
		}
		if ( $content !== '' && strpos( $content, '[' ) !== false ) {
			$content = '';
			echo 'Error in shortcode, use [leaflet-bezier ...]some or no text[/leaflet-bezier]';
		}
		return leafext_bezier_script( $locations, $content, $slide, $deep );
	}
}
add_shortcode( 'leaflet-bezier', 'leafext_bezier' );

Shortcode

Then use a shortcode like:

[leaflet-map lat=... lng=... zoom=...]
[leaflet-bezier latlngs="lat1,lng1; lat2, lng2;" slide="RIGHT_ROUND" deep=...]some or no popup text[/leaflet-bezier]
[leaflet-bezier addresses="address1; address2;" slide="RIGHT_ROUND" deep=...]some or no popup text[/leaflet-bezier]

Options

  • latlngs, addresses – see shortcode leaflet-line
  • slide – "LEFT_ROUND" (default) or "RIGHT_ROUND"
  • deep – 3 … 100
Nofollow!