How to include Leaflet plugin Leaflet-Arrowheads

Leaflet Plugin Leaflet-Arrowheads is a small plugin for leaflet to quickly draw arrowheads on polylines for vector visualization.

Example with default options

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=200 fitbounds]
[leaflet-arrowheads latlngs="42, 29; 45, 18;"]blue arrow[/leaflet-arrowheads]
[gestures]
[zoomhomemap fit]
[hover]

Example with options

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=200 !fitbounds]
[leaflet-arrowheads latlngs="-37, -129; -45, -128; -44, -120; -36, -120" polyline="color:'red'" arrowheads="frequency: 20" fitbounds]red arrows[/leaflet-arrowheads]
[gestures]
[zoomhomemap fit]
[hover]

Preparation

Create your own leaflet-arrowheads.js or download it from my site: leaflet-arrowheads.js. Put in upload directory (e.g. /wp-content/uploads/leaflet-plugins/leaflet-arrowheads).

Code

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

<?php
function leafext_enqueue_arrowheads() {
	wp_enqueue_script(
		'arrowheads',
		'/wp-content/uploads/leaflet-plugins/leaflet-arrowheads/leaflet-arrowheads.js',
		array( 'wp_leaflet_map' ),
		null
	);
	leafext_enqueue_geometry();
}

function leafext_arrowheads_script( $locations, $polyline, $arrowheads, $fitbounds, $content ) {
	$text = '<script>
	window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];
	window.WPLeafletMapPlugin.push(
		function () {
			var map       = window.WPLeafletMapPlugin.getCurrentMap();
			var group     = window.WPLeafletMapPlugin.getCurrentGroup();
			var fitbounds = ' . ( $fitbounds ? '1' : '0' ) . ';
			var arrowline = L.polyline(
				' . $locations . ',
				{' . $polyline . '}
			).arrowheads(
				{' . $arrowheads . '}
			);
			arrowline.addTo( group );
			arrowline.bindPopup("' . $content . '");
			if ( fitbounds ) {
    			map.fitBounds( arrowline.getBounds() );
			}
		}
	);
	</script>';
	return "\n" . $text . "\n";
}

function leafext_arrowheads( $atts, $content, $shortcode ) {
	$text = leafext_should_interpret_shortcode( $shortcode, $atts );
	if ( $text !== '' ) {
		return $text;
	} else {
		leafext_enqueue_arrowheads();
		if ( is_array( $atts ) ) {
			$options    = shortcode_atts(
				array(
					'fitbounds' => 0,
				),
				leafext_clear_params( $atts )
			);
			$locations  = array();
			$polyline   = '';
			$arrowheads = 'yawn: 20, fill: true';
			$fitbounds  = $options['fitbounds'];
			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 === 'polyline' ) {
					$polyline = $item;
				} elseif ( $key === 'arrowheads' ) {
					$arrowheads = $item;
				}
			}
			$location_json = wp_json_encode( $locations );
		}
		return leafext_arrowheads_script( $location_json, $polyline, $arrowheads, $fitbounds, $content );
	}
}
add_shortcode( 'leaflet-arrowheads', 'leafext_arrowheads' );

Shortcode

Then use a shortcode like:

[leaflet-map ...]
[leaflet-arrowheads latlngs="lat1, lng1; lat2, lng2;..." polyline=... arrowheads=... fitbounds=0/1] ... some text for popup ... [/leaflet-arrowheads]

Options

  • latlngs – see shortcodes leaflet-line and leaflet-polygon
  • polyline – options for the L.polyline, see Leafletjs reference, optional
  • arrowheads options – see Github plugin page, default yawn: 20, fill: true
  • fitbounds – fit the map to the bounds of the leaflet-arrowheads
Nofollow!