Skip to content

Commit

Permalink
V2.5.0 - refactored some code; added styles to all shapes; added popu…
Browse files Browse the repository at this point in the history
…ps to all shapes; added more options for interaction with map;
  • Loading branch information
bozdoz committed Feb 18, 2017
1 parent ffc3a6b commit 924dfb6
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 60 deletions.
179 changes: 131 additions & 48 deletions leaflet-map.php
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<?php
/*
Plugin Name: Leaflet Map
Plugin URI: http://wordpress.org/plugins/leaflet-map/
Plugin URI: https://wordpress.org/plugins/leaflet-map/
Description: A plugin for creating a Leaflet JS map with a shortcode. Boasts two free map tile services and three free geocoders.
Author: bozdoz
Author URI: http://twitter.com/bozdoz/
Version: 2.4.0
Author URI: https://twitter.com/bozdoz/
Version: 2.5.0
License: GPL2
*/

Expand Down Expand Up @@ -43,12 +43,12 @@ class Leaflet_Map_Plugin {
'helptext' => 'Some maps get tiles from multiple servers with subdomains such as a,b,c,d or 1,2,3,4; can be set per map with the shortcode <br/> <code>[leaflet-map subdomains="1234"]</code>',
),
'leaflet_js_url' => array(
'default'=>'https://unpkg.com/[email protected].2/dist/leaflet.js',
'default'=>'https://unpkg.com/[email protected].3/dist/leaflet.js',
'type' => 'text',
'helptext' => 'If you host your own Leaflet files, specify the URL here.'
),
'leaflet_css_url' => array(
'default'=>'https://unpkg.com/[email protected].2/dist/leaflet.css',
'default'=>'https://unpkg.com/[email protected].3/dist/leaflet.css',
'type' => 'text',
'helptext' => 'Save as above.'
),
Expand Down Expand Up @@ -311,6 +311,10 @@ public function dawa_geocode ( $address ) {
/* count map shortcodes to allow for multiple */
public static $leaflet_map_count;

public function remove_null ($var) {
return $var !== null;
}

public function map_shortcode ( $atts ) {

if (!self::$leaflet_map_count) {
Expand Down Expand Up @@ -378,7 +382,32 @@ public function map_shortcode ( $atts ) {
/* allow percent, but add px for ints */
$height .= is_numeric($height) ? 'px' : '';
$width .= is_numeric($width) ? 'px' : '';


/* allow a bunch of other options */
// http://leafletjs.com/reference-1.0.3.html#map-closepopuponclick
$more_options = array(
'closePopupOnClick' => isset($closepopuponclick) ? $closepopuponclick : NULL,
'trackResize' => isset($trackresize) ? $trackresize : NULL,
'boxZoom' => isset($boxzoom) ? $boxzoom : NULL,
'doubleClickZoom' => isset($doubleclickzoom) ? $doubleclickzoom : NULL,
'dragging' => isset($dragging) ? $dragging : NULL,
'keyboard' => isset($keyboard) ? $keyboard : NULL,
);

// filter out nulls
$more_options = array_filter( $more_options, 'self::remove_null' );

// change string booleans to booleans
$more_options = filter_var_array($more_options, FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE);

// wrap as JSON
if ($more_options) {
$more_options = json_encode( $more_options );
} else {
$more_options = '{}';
}

/* should be iterated for multiple maps */
$content = '<div id="leaflet-wordpress-map-'.$leaflet_map_count.'" class="leaflet-wordpress-map" style="height:'.$height.'; width:'.$width.';"></div>';

Expand All @@ -388,14 +417,15 @@ public function map_shortcode ( $atts ) {
base = (!baseUrl && window.MQ) ? MQ.mapLayer() : L.tileLayer(baseUrl, {
subdomains: '{$subdomains}'
}),
map = L.map('leaflet-wordpress-map-{$leaflet_map_count}', {
options = L.Util.extend({}, {
maxZoom: {$max_zoom},
minZoom: {$min_zoom},
layers: [base],
zoomControl: {$zoomcontrol},
scrollWheelZoom: {$scrollwheel},
attributionControl: false
}).setView([{$lat}, {$lng}], {$zoom});";
}, {$more_options}),
map = L.map('leaflet-wordpress-map-{$leaflet_map_count}', options).setView([{$lat}, {$lng}], {$zoom});";

if ($attribution) {
/* add attribution to MapQuest and OSM */
Expand Down Expand Up @@ -498,7 +528,56 @@ public function image_shortcode ( $atts ) {
return $content;
}

public function general_shape_shortcode ( $atts, $wp_script, $L_method, $default = '' ) {
public function get_style_json ($atts) {
if ($atts) {
extract($atts);
}

// from http://leafletjs.com/reference-1.0.3.html#path
$style = array(
'stroke' => isset($stroke) ? $stroke : NULL,
'color' => isset($color) ? $color : NULL,
'weight' => isset($weight) ? $weight : NULL,
'opacity' => isset($opacity) ? $opacity : NULL,
'lineCap' => isset($linecap) ? $linecap : NULL,
'lineJoin' => isset($linejoin) ? $linejoin : NULL,
'dashArray' => isset($dasharray) ? $dasharray : NULL,
'dashOffset' => isset($dashoffset) ? $dashoffset : NULL,
'fill' => isset($fill) ? $fill : NULL,
'fillColor' => isset($fillcolor) ? $fillcolor : NULL,
'fillOpacity' => isset($fillopacity) ? $fillopacity : NULL,
'fillRule' => isset($fillrule) ? $fillrule : NULL,
'className' => isset($classname) ? $classname : NULL,
);

$args = array(
'stroke' => FILTER_VALIDATE_BOOLEAN,
'color' => FILTER_SANITIZE_STRING,
'weight' => FILTER_VALIDATE_FLOAT,
'opacity' => FILTER_VALIDATE_FLOAT,
'lineCap' => FILTER_SANITIZE_STRING,
'lineJoin' => FILTER_SANITIZE_STRING,
'dashArray' => FILTER_SANITIZE_STRING,
'dashOffset' => FILTER_SANITIZE_STRING,
'fill' => FILTER_VALIDATE_BOOLEAN,
'fillColor' => FILTER_SANITIZE_STRING,
'fillOpacity' => FILTER_VALIDATE_FLOAT,
'fillRule' => FILTER_SANITIZE_STRING,
'className' => FILTER_SANITIZE_STRING
);


// remove nulls
$style = array_filter( $style, 'self::remove_null' );

// sanitize output
$args = array_intersect_key($args, $style);
$style = filter_var_array($style, $args);

return json_encode( $style );
}

public function get_shape ( $atts, $wp_script, $L_method, $default = '' ) {
$leaflet_map_count = self::$leaflet_map_count;

wp_enqueue_script( $wp_script );
Expand All @@ -510,16 +589,7 @@ public function general_shape_shortcode ( $atts, $wp_script, $L_method, $default
/* only required field for geojson */
$src = empty($src) ? $default : $src;

$style = array(
'color' => empty($color) ? false : $color,
'weight' => empty($weight) ? false : $weight,
'stroke' => empty($stroke) ? false : $stroke,
'opacity' => empty($opacity) ? false : $opacity,
'fillOpacity' => empty($fillopacity) ? false : $fillopacity,
'fillColor' => empty($fillcolor) ? false : $fillcolor,
);

$style_json = json_encode( array_filter( $style ) );
$style_json = self::get_style_json( $atts );

$fitbounds = empty($fitbounds) ? 0 : $fitbounds;

Expand Down Expand Up @@ -594,16 +664,39 @@ function onEachFeature (feature, layer) {

public function geojson_shortcode ( $atts ) {

return self::general_shape_shortcode( $atts, 'leaflet_ajax_geojson_js', 'ajaxGeoJson', 'https://rawgit.com/bozdoz/567817310f102d169510d94306e4f464/raw/2fdb48dafafd4c8304ff051f49d9de03afb1718b/map.geojson');
return self::get_shape( $atts, 'leaflet_ajax_geojson_js', 'ajaxGeoJson', 'https://rawgit.com/bozdoz/567817310f102d169510d94306e4f464/raw/2fdb48dafafd4c8304ff051f49d9de03afb1718b/map.geojson');

}

public function kml_shortcode ( $atts ) {

return self::general_shape_shortcode( $atts, 'leaflet_ajax_kml_js', 'ajaxKML', 'https://cdn.rawgit.com/mapbox/togeojson/master/test/data/polygon.kml');
return self::get_shape( $atts, 'leaflet_ajax_kml_js', 'ajaxKML', 'https://cdn.rawgit.com/mapbox/togeojson/master/test/data/polygon.kml');

}

public function add_popup_to_shape ($atts, $content, $shape) {
if (!empty($atts)) extract($atts);

$message = empty($message) ? (empty($content) ? '' : $content) : $message;
$visible = empty($visible) ? false : ($visible == 'true');

$output = '';

if (!empty($message)) {
$message = str_replace("\n", '', $message);

$output .= "$shape.bindPopup('$message')";

if ($visible) {
$output .= ".openPopup()";
}

$output .= ";";
}

return $output;
}

public function marker_shortcode ( $atts, $content = null ) {

/* add to previous map */
Expand All @@ -616,7 +709,6 @@ public function marker_shortcode ( $atts, $content = null ) {
if (!empty($atts)) extract($atts);

$draggable = empty($draggable) ? 'false' : $draggable;
$visible = empty($visible) ? false : ($visible == 'true');

if (!empty($address)) {
$location = self::geocoder( $address );
Expand Down Expand Up @@ -673,24 +765,7 @@ public function marker_shortcode ( $atts, $content = null ) {
marker.addTo( previous_map );
";

$message = empty($message) ? (empty($content) ? '' : $content) : $message;

if (!empty($message)) {

$message = str_replace("\n", '', $message);

$marker_script .= "marker.bindPopup('$message')";

if ($visible) {

$marker_script .= ".openPopup()";

}

$marker_script .= ";
";

}
$marker_script .= self::add_popup_to_shape($atts, $content, 'marker');

$marker_script .= "
WPLeafletMapPlugin.markers.push( marker );
Expand All @@ -709,8 +784,14 @@ public function line_shortcode ( $atts, $content = null ) {

if (!empty($atts)) extract($atts);

$color = empty($color) ? "black" : $color;
$fitline = empty($fitline) ? 0 : $fitline;
$style_json = self::get_style_json( $atts );

$fitbounds = empty($fitbounds) ? 0 : $fitbounds;

// backwards compatible `fitline`
if (!empty($fitline)) {
$fitbounds = $fitline;
}

$locations = Array();

Expand Down Expand Up @@ -740,24 +821,26 @@ public function line_shortcode ( $atts, $content = null ) {

$location_json = json_encode($locations);

$marker_script = "<script>
$line_script = "<script>
WPLeafletMapPlugin.add(function () {
var previous_map = WPLeafletMapPlugin.maps[ {$leaflet_map_count} - 1 ],
line = L.polyline($location_json, { color : '$color'}),
fitline = $fitline;
line = L.polyline($location_json, {$style_json}),
fitbounds = $fitbounds;
line.addTo( previous_map );
if (fitline) {
if (fitbounds) {
// zoom the map to the polyline
previous_map.fitBounds( line.getBounds() );
}
}";

WPLeafletMapPlugin.lines.push( line );
$line_script .= self::add_popup_to_shape($atts, $content, 'line');

$line_script .= "
WPLeafletMapPlugin.lines.push( line );
});
</script>";

return $marker_script;
return $line_script;
}

} /* end class */
Expand Down
34 changes: 25 additions & 9 deletions readme.txt
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
=== Leaflet Map ===
Author: bozdoz
Author URI: http://www.twitter.com/bozdoz/
Plugin URI: http://wordpress.org/plugins/leaflet-map/
Author URI: https://www.twitter.com/bozdoz/
Plugin URI: https://wordpress.org/plugins/leaflet-map/
Contributors: bozdoz, Remigr, nielsalstrup, jeromelebleu
Donate link: https://www.gittip.com/bozdoz/
Tags: leaflet, map, javascript, openstreetmap, mapquest, interactive
Tags: leaflet, map, mobile, javascript, openstreetmap, mapquest, interactive
Requires at least: 3.0.1
Tested up to: 4.7
Version: 2.4.0
Stable tag: 2.4.0
Tested up to: 4.7.2
Version: 2.5.0
Stable tag: 2.5.0
License: GPLv2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
License URI: https://www.gnu.org/licenses/gpl-2.0.html

A flexible plugin that adds basic shortcodes for creating multiple Leaflet maps and adding multiple markers to those maps.

== Description ==

Add a map generated with <a href="http://www.leafletjs.com/" target="_blank">leaflet JS</a>: a mobile friendly map application. Map tiles are provided by default through OpenStreetMap and MapQuest (with an app key). Can be set per map with shortcode attributes or through the dashboard settings.
Add a map generated with <a href="http://www.leafletjs.com/" target="_blank">Leaflet JS</a>: a mobile friendly map application. Map tiles are provided by default through OpenStreetMap and MapQuest (with an app key). Can be set per map with shortcode attributes or through the dashboard settings.

Some shortcode attributes:

Expand Down Expand Up @@ -55,6 +55,12 @@ Check out the source code on [GitHub](https://github.com/bozdoz/wp-plugin-leafle

== Frequently Asked Questions ==

* How do I change the style for lines/geojson?

Pass the style attributes to the respective shortcodes (see all options on [LeafletJS](http://leafletjs.com/reference-1.0.3.html#path)):

`[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, NS; Tanzania" classname=marching-ants]`

* My map now says direct tile access has been discontinued (July 11, 2016); can you fix it?

Yes. Update to the newest plugin version, and reset defaults in settings. You can choose to use MapQuest by signing up and supplying an app key, or use the default OpenStreetMap tiles (with attribution). See Screenshot 8.
Expand Down Expand Up @@ -91,7 +97,7 @@ Use the line format `[leaflet-line]` with attributes `latlngs` or `addresses` se

Yes: use the keyword `attribution` in your shortcode (semi-colon separated list of attributions): `[leaflet-map attribution="Tiles courtesy of MapBox; Locations contributed by viewers"]`

Shoot me a question [@bozdoz](http://www.twitter.com/bozdoz/).
Shoot me a question [@bozdoz](https://www.twitter.com/bozdoz/).

== Screenshots ==

Expand All @@ -106,6 +112,13 @@ Shoot me a question [@bozdoz](http://www.twitter.com/bozdoz/).

== Changelog ==

= 2.5.0 =
* Some improvements to the codebase;
* added the same styling options for lines as there are for geojson;
* added popups to lines, as there are for markers;
* added an example to the shortcode admin page for the style attributes on lines;
* added code and another example for disabling all map interactions (all zooms, keyboard, etc);

= 2.4.0 =
* Added Leaflet 1.0.2 scripts by default (works!);

Expand Down Expand Up @@ -180,6 +193,9 @@ Shoot me a question [@bozdoz](http://www.twitter.com/bozdoz/).

== Upgrade Notice ==

= 2.5.0 =
Some improvements to the codebase; added the same styling options for lines as there are for geojson; added popups to lines, as there are for markers; added more interaction options to map;

= 2.4.0 =
Added Leaflet 1.0.2 scripts by default (works!);

Expand Down
Loading

0 comments on commit 924dfb6

Please sign in to comment.