Skip to content

Commit

Permalink
Merge branch 'master' of github.com:bozdoz/wp-plugin-leaflet-map
Browse files Browse the repository at this point in the history
  • Loading branch information
bozdoz committed Sep 13, 2022
2 parents 0b11062 + f430451 commit eeb4b18
Show file tree
Hide file tree
Showing 7 changed files with 195 additions and 27 deletions.
33 changes: 32 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ Add a map generated with [LeafletJS](http://leafletjs.com/): an open-source Java
- [[leaflet-kml]](#leaflet-kml)
- [[leaflet-gpx]](#leaflet-gpx)
- [[leaflet-scale]](#leaflet-scale)
- [[leaflet-image-overlay]](#leaflet-image-overlay)
- [[leaflet-video-overlay]](#leaflet-video-overlay)
- [Frequently Asked Questions](#frequently-asked-questions)
- [How Can I Add another Leaflet Plugin?](#how-can-i-add-another-leaflet-plugin)
- [Contributing](#contributing)
Expand Down Expand Up @@ -299,6 +301,35 @@ Can be added after any map, or enabled for all maps in the admin. If you want to
| `updateWhenIdle` | 0 (false) |
| `position` | topright |

### [leaflet-image-overlay]

```
[leaflet-image-overlay src="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg" bounds="40.799311,-74.118464;40.68202047785919,-74.33"]
```

#### [leaflet-image-overlay] Options

| Option | Usage |
| ----------------- | ----------------------------------------------------------------------------- |
| `src` | Source of the image file |
| `bounds` | coordinates for south-west, and north-east coordinates |
| `interactive` | triggers mouse events (not recommended) |
| `opacity` | 0 - 1 for opaciity of the image |
| `alt` | alt attribute for the image |
| `crossOrigin` | Whether the crossOrigin attribute will be added to the image |
| `errorOverlayUrl` | URL to the overlay image to show in place of the overlay that failed to load. |
| `zIndex` | The explicit zIndex of the overlay layer |
| `className` | The className attribute for the image |
| `attribution` | String to be shown in the attribution control |

### [leaflet-video-overlay]

Same options as [leaflet-image-overlay]

```
[leaflet-video-overlay src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" bounds="32,-130;13,-100"]
```

## Frequently Asked Questions

### How Can I Add another Leaflet Plugin?
Expand Down Expand Up @@ -332,7 +363,7 @@ function fs_leaflet_loaded() {

// iterate any of these arrays: `maps`, `markers`, `lines`, `circles`, `geojsons`
var maps = window.WPLeafletMapPlugin.maps;

// Note: `markergroups` is an *object*. If you'd like to iterate it, you can do it like this:
// var markergroups = window.WPLeafletMapPlugin.markergroups;
// var keys = Object.keys(markergroups);
Expand Down
38 changes: 37 additions & 1 deletion class.leaflet-map.php
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,14 @@ class Leaflet_Map
'file' => 'class.scale-shortcode.php',
'class' => 'Leaflet_Scale_Shortcode'
),
'leaflet-image-overlay' => array(
'file' => 'class.image-overlay-shortcode.php',
'class' => 'Leaflet_Image_Overlay_Shortcode'
),
'leaflet-video-overlay' => array(
'file' => 'class.video-overlay-shortcode.php',
'class' => 'Leaflet_Video_Overlay_Shortcode'
),
);

/**
Expand Down Expand Up @@ -456,7 +464,7 @@ public function rawDict ($arr) {
* Filter all floats to remove commas, force decimals, and validate float
* see: https://wordpress.org/support/topic/all-maps-are-gone/page/3/#post-14625548
*/
public static function filter_float ($flt) {
public function filter_float ($flt) {
// make sure the value actually is a float
$out = filter_var($flt, FILTER_VALIDATE_FLOAT);

Expand All @@ -465,4 +473,32 @@ public static function filter_float ($flt) {

return $out;
}

/**
* Bounds are given as "50, -114; 52, -112"
* Converted to 2d-array: [[50, -114], [52, -112]]
*/
public function convert_bounds_str_to_arr ($bounds) {
if (isset($bounds)) {
try {
// explode by semi-colons and commas
$arr = preg_split("[;|,]", $bounds);

return array(
array(
$this->filter_float($arr[0]),
$this->filter_float($arr[1])
),
array(
$this->filter_float($arr[2]),
$this->filter_float($arr[3])
)
);
} catch (Exception $e) {
return null;
}
}

return null;
}
}
1 change: 1 addition & 0 deletions scripts/construct-leaflet-map.js
Original file line number Diff line number Diff line change
Expand Up @@ -405,6 +405,7 @@
this.polygons = [];
this.circles = [];
this.geojsons = [];
this.overlays = [];
}

/**
Expand Down
87 changes: 87 additions & 0 deletions shortcodes/class.image-overlay-shortcode.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<?php
/**
* Image Overlay Shortcode
*
* Use with [leaflet-image-overlay ...]
*
* @category Shortcode
* @author Luca Cireddu <[email protected]>
*/

// Exit if accessed directly
if (!defined('ABSPATH')) {
exit;
}

require_once LEAFLET_MAP__PLUGIN_DIR . 'shortcodes/class.shortcode.php';

class Leaflet_Image_Overlay_Shortcode extends Leaflet_Shortcode
{
protected $type = 'L.imageOverlay';
protected $default_src = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
protected $default_bounds = "40.712216,-74.22655;40.773941,-74.12544";

/**
* Get Script for Shortcode
*
* @param string $atts could be an array
* @param string $content optional
*
* @return string HTML script
*/
protected function getHTML($atts = '', $content = null)
{
if (!empty($atts)) {
extract($atts, EXTR_SKIP);
}

/* acquire image boundaries */
$url = empty($url) ? $this->default_src : $url;
/* prefer src */
$url = empty($src) ? $url : $src;

$bounds = isset($bounds) ? $bounds : $this->default_bounds;
$bounds = $this->LM->convert_bounds_str_to_arr($bounds);

$options = array(
'interactive' => isset($interactive) ? $interactive : null,
'opacity' => isset($opacity) ? $opacity : null,
'alt' => isset($alt) ? $alt : null,
'crossOrigin' => isset($crossorigin) ? $crossorigin : null,
'errorOverlayUrl' => isset($erroroverlayurl) ? $erroroverlayurl : null,
'zIndex' => isset($zindex) ? $zindex : null,
'className' => isset($classname) ? $classname : null,
// filter out any unwanted HTML tags (including img)
'attribution' => isset($attribution) ? wp_kses_post($attribution) : null,
'keepAspectRatio' => isset($keepAspectRatio) ? $keepAspectRatio : true,
);

$args = array(
'interactive' => FILTER_VALIDATE_BOOLEAN,
'opacity' => FILTER_VALIDATE_FLOAT,
'alt' => FILTER_SANITIZE_STRING,
'crossOrigin' => FILTER_SANITIZE_STRING,
'errorOverlayUrl' => FILTER_SANITIZE_STRING,
'zIndex' => FILTER_VALIDATE_INT,
'className' => FILTER_SANITIZE_STRING,
'attribution' => FILTER_SANITIZE_STRING,
'keepAspectRatio' => FILTER_VALIDATE_BOOLEAN
);

$options = $this->LM->json_sanitize($options, $args);

ob_start();
?>/*<script>*/
var group = window.WPLeafletMapPlugin.getCurrentGroup();
var src = '<?php echo htmlspecialchars($url, ENT_QUOTES); ?>';
var options = <?php echo $options; ?>;
var bounds = <?php echo json_encode($bounds); ?>;
var layer = <?php echo $this->type; ?>(src, bounds, options);
layer.addTo(group);
window.WPLeafletMapPlugin.overlays.push( layer );
<?php
$script = ob_get_clean();

return $this->wrap_script($script, 'WPLeafletOverlayShortcode');
}
}
25 changes: 1 addition & 24 deletions shortcodes/class.map-shortcode.php
Original file line number Diff line number Diff line change
Expand Up @@ -100,26 +100,6 @@ protected function getAtts($atts='')
$atts['height'] .= is_numeric($atts['height']) ? 'px' : '';
$atts['width'] .= is_numeric($atts['width']) ? 'px' : '';

// maxbounds as string: maxbounds="50, -114; 52, -112"
$maxBounds = isset($maxbounds) ? $maxbounds : null;

if ($maxBounds) {
try {
// explode by semi-colons and commas
$maxBounds = preg_split("[;|,]", $maxBounds);
$maxBounds = array(
array(
$maxBounds[0], $maxBounds[1]
),
array(
$maxBounds[2], $maxBounds[3]
)
);
} catch (Exception $e) {
$maxBounds = null;
}
}

/*
need to allow 0 or empty for removal of attribution
*/
Expand Down Expand Up @@ -186,10 +166,7 @@ protected function getAtts($atts='')
// update atts too
$atts['minZoom'] = $zoom_options['minZoom'];
$atts['maxZoom'] = $zoom_options['maxZoom'];

if ($maxBounds) {
$map_options['maxBounds'] = $maxBounds;
}
$map_options['maxBounds'] = isset($maxbounds) ? $this->LM->convert_bounds_str_to_arr($maxbounds) : null;

// custom field for moving to javascript
// filter out any unwanted HTML tags (including img)
Expand Down
23 changes: 23 additions & 0 deletions shortcodes/class.video-overlay-shortcode.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<?php
/**
* Video Overlay Shortcode
*
* Use with [leaflet-video-overlay ...]
*
* @category Shortcode
* @author Benjamin J DeLong <[email protected]>
*/

// Exit if accessed directly
if (!defined('ABSPATH')) {
exit;
}

require_once LEAFLET_MAP__PLUGIN_DIR . 'shortcodes/class.image-overlay-shortcode.php';

class Leaflet_Video_Overlay_Shortcode extends Leaflet_Image_Overlay_Shortcode
{
protected $type = 'L.videoOverlay';
protected $default_src = 'https://labs.mapbox.com/bites/00188/patricia_nasa.webm';
protected $default_bounds = "32,-130;13,-100";
}
15 changes: 14 additions & 1 deletion templates/shortcode-helper.php
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@
stroke-dashoffset: -1000;
}
}

/* wordpress messes up video tags */
video {
max-width: inherit;
}
</style>

<div class="wrap">
Expand Down Expand Up @@ -123,7 +128,15 @@
__("Image Map", 'leaflet-map') => array(
'[leaflet-image zoom=1 zoomcontrol scrollwheel !attribution]',
'[leaflet-marker draggable]'
),
),
__("Image Overlay Map", 'leaflet-map') => array(
'[leaflet-map fitbounds]',
'[leaflet-image-overlay]',
),
__("Video Overlay Map", 'leaflet-map') => array(
'[leaflet-map fitbounds]',
'[leaflet-video-overlay]',
),
);

foreach ($examples as $title => $collection) {
Expand Down

0 comments on commit eeb4b18

Please sign in to comment.