Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added basic SVGOverlay to expose SVG DOM element #6517

Merged
merged 3 commits into from Apr 30, 2019
Merged

Added basic SVGOverlay to expose SVG DOM element #6517

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b0e9acd
Added basic SVG Overlay
Feb 15, 2019
5a9f1b6
WIP
Feb 18, 2019
61dbdcf
Changed parameter name, added comment
Feb 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
53 changes: 53 additions & 0 deletions debug/map/svgoverlay.html
View file
Open in desktop
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<meta charset="utf-8" />

<link rel="stylesheet" href="../../dist/leaflet.css" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="../css/screen.css" />

<script src="../leaflet-include.js"></script>
</head>
<body>

<div id="map" style='width:750px; height: 450px;'></div>

<svg id="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/></svg>


<script type="text/javascript">

var map = L.map('map');

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.satellite'
}).addTo(map);

var svgElement = document.querySelector('#image'),
bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);

map.fitBounds(bounds);

var overlay = L.svgOverlay(svgElement, bounds, {
opacity: 0.7,
interactive: true
});

map.addLayer(overlay);

var element = overlay.getElement();

element.addEventListener('click', function(event) {
console.log('click!')
})
</script>
</body>
</html>
1 change: 1 addition & 0 deletions debug/map/svgoverlay.min.html
View file
Open in desktop
@@ -0,0 +1 @@
<!DOCTYPE html><html><head><title>Leaflet debug page</title><meta charset="utf-8"><link rel="stylesheet" href="../../dist/leaflet.css"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="../css/screen.css"><script src="../leaflet-include.js"></script></head><body><div id="map" style="width:750px;height:450px"></div><svg version="1.1" id="image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 909.5 241.4" style="enable-background:new 0 0 909.5 241.4" xml:space="preserve"><style type="text/css">.st0{fill:#6F6F6E}.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#3C3C3B}.st2{fill:url(#SVGID_1_)}.st3{fill:url(#SVGID_2_)}.st4{fill:url(#SVGID_3_)}.st5{fill:url(#SVGID_4_)}</style><path class="st0" d="M138.1,154.6c-17,17.3-34.3,25.9-52.1,25.9c-5,0-10-0.7-14.9-2c-6-1.8-11.8-4-17.4-6.7c-5.8-2.8-11.9-5.1-18.1-6.9c-9.7,10.6-18.4,15.9-26.2,15.9c-2.5,0.1-5-0.9-6.8-2.7c-1.8-1.7-2.7-4.1-2.7-6.6c0-5.4,2.7-10.2,8-14.3c5.3-4.1,12.9-7,22.6-8.5c3.7-4.9,6.4-10.4,7.8-16.4c1.1-5.3,2-14.1,2.7-26.4c1.2-25.2,8-44.9,20.2-59.2c12.3-14.3,25.6-21.4,40-21.4c9.9,0,18,3.1,24.3,9.4c6.3,6.3,9.5,14.3,9.5,24c0.2,10.7-3.3,21.1-10,29.5c-6.7,8.4-14.3,12.7-23,12.7c-4.5,0-8.1-1.2-10.6-3.7c-2.6-2.5-3.9-5.9-3.9-10.2c0.1-2.6,0.5-5.2,1.3-7.7c1.8,2.2,4.5,3.4,7.3,3.3c4.9,0,9.1-2.9,12.8-8.7c3.7-5.8,5.5-12.7,5.5-20.7c0-6.2-1.4-11-4.2-14.6c-2.7-3.5-7-5.5-11.5-5.3c-5.9,0-10.4,2.1-13.7,6.3c-3.4,4.5-5.7,9.7-6.8,15.2c-1.3,5.9-2.7,15.4-4.1,28.5c-1.2,11.8-3.6,23.5-7.3,34.9c-3.4,10.1-9.8,20.1-19.1,29.8c5.3-0.5,10.7-0.1,15.8,1.1c6.5,1.8,12.9,4,19.2,6.5c8.3,3.2,15.5,4.8,21.5,4.8c11.7,0,22.9-6,33.6-18L138.1,154.6L138.1,154.6z M218.4,154.6c-9.1,9-17.3,15.6-24.5,19.8c-7.3,4.3-15.5,6.5-24,6.4c-9.7,0-17.6-3.1-23.6-9.3c-6-6.2-9-14.4-9-24.6c0-15.2,5.3-28.9,15.8-41.2c10.5-12.3,22.2-18.4,35-18.4c6.7,0,12,1.7,16,5.2c4,3.4,6.2,8.3,6,13.5c0,14.8-15.8,26.9-47.3,36.1c2.9,14,10.4,21,22.4,20.9c4.8,0,9.5-1.3,13.5-3.8c4.3-2.5,10.8-8.2,19.4-16.9L218.4,154.6L218.4,154.6z M162.1,134.8c18.3-5.2,27.5-14.7,27.5-28.6c0-6.9-2.5-10.3-7.5-10.3c-4.7,0-9.2,3.6-13.5,10.8C164.2,113.9,162.1,123.2,162.1,134.8L162.1,134.8z M333.1,154.6c-11.5,10.9-19.7,18-24.6,21.3c-4.9,3.3-9.7,4.9-14.2,4.9c-11.3,0-16.7-10-16-30c-7.2,10.2-13.8,17.8-19.8,22.7c-6.1,4.9-12.3,7.3-18.7,7.3c-6.3,0-11.7-3-16.1-8.9c-4.4-5.9-6.6-13.2-6.6-21.8c0-10.9,3.1-21.5,8.9-30.7c5.7-9.5,13.4-17.6,22.7-23.6c9.2-6,17.4-9,24.5-9c8.9,0,15.2,4.1,18.8,12.3L314,87h6l-9.5,31.5c-4.9,15.8-7.3,26.7-7.3,32.6c0,6.2,2.2,9.2,6.5,9.2c2.8,0,5.9-1.5,9.2-4.5c3.4-3,8.1-7.5,14.2-13.6L333.1,154.6L333.1,154.6z M254.5,160.5c7.2,0,13.9-6.1,20.2-18.3c6.3-12.2,9.5-23.5,9.5-33.8c0-4-0.9-7.1-2.7-9.4c-1.7-2.2-4.4-3.5-7.2-3.4c-7.2,0-13.9,6.1-20.4,18.3c-6.4,12.2-9.6,23.4-9.6,33.6c-0.2,3.4,0.8,6.7,2.9,9.4C248.9,159.3,251.6,160.6,254.5,160.5L254.5,160.5z M420.2,154.6c-7.4,8.4-14.8,14.8-22.1,19.4c-7.3,4.6-13.8,6.8-19.5,6.8c-2.7,0-6.4-1-11.2-3.1c-3,15.8-5.7,32.8-8,51c-7.5,1-16.4,2.6-26.9,4.6c2.3-19.6,6.3-45.1,11.9-76.4c-1.6-3.3-3-6.8-4.2-10.3l-7.2,7.9h-2.5V145l20.5-21.2c3.9-19.2,7.1-33.1,9.5-41.7c2.8-9.7,6.2-19.2,10.2-28.5c4.4-10.4,7.1-16.4,8.3-17.9c1.1-1.5,3.9-3,8.3-4.4c4.4-1.4,9.1-2.7,14.1-4c5-1.3,7.7-1.9,8.1-1.9c2.7,0,5,1.8,6.7,5.3c1.7,3.5,2.6,8.2,2.6,14c0,10.2-2.8,20.2-7.9,29c-5.3,9.3-15.3,20.7-30,34.3l-9,44.9c3.5,7.5,8.8,11.3,15.8,11.3c10,0,20.9-7.3,32.6-21.8L420.2,154.6L420.2,154.6z M384.2,93.4c7.9-6.7,14.5-14.7,19.7-23.6c4.8-8.4,7.1-16.2,7.1-23.3c0.1-2.6-0.5-5.1-1.7-7.4c-1.1-1.9-2.5-2.9-4.1-2.9c-3.1,0-6.3,4.1-9.6,12.4C392.4,56.9,388.6,71.8,384.2,93.4z M491.2,154.6c-9.7,9-18.3,15.6-25.6,19.8c-7.3,4.3-14.3,6.4-21,6.4c-7.3,0.2-14.2-3.1-18.5-8.9c-4.7-5.9-7-13.9-7-23.9c0-15,3.3-33.1,9.8-54.1c6.1-20.1,14.1-39.6,23.7-58.2l27.3-10.1c0.6-0.2,1.3-0.4,1.9-0.4c2.1,0,3.8,1.5,5.1,4.6c1.3,3.1,2,7.1,2,12.3c0,14.7-3.5,29.3-10.1,42.4c-6.7,13.7-17.3,28.3-31.6,43.8c-0.6,7.4-0.9,12.6-0.9,15.4c0,6.2,1.1,11.2,3.4,14.8c2.3,3.7,5.3,5.5,9.1,5.5c3.9,0,8-1.4,12.4-4.2c4.4-2.8,11-8.6,20-17.4L491.2,154.6L491.2,154.6zM450.1,112.6c9.1-10.1,16.6-21.6,22.1-34c5.7-12.6,8.5-23.3,8.5-32.4c0.1-2.2-0.3-4.4-1.2-6.4c-0.8-1.6-1.8-2.4-3-2.4c-2.6,0-6.5,6.6-11.5,19.8C459.9,70.4,455,88.9,450.1,112.6L450.1,112.6z M571.6,154.6c-9.1,9-17.3,15.6-24.5,19.8c-7.3,4.3-15.5,6.5-24,6.4c-9.7,0-17.6-3.1-23.6-9.3c-6-6.2-9-14.4-9-24.6c0-15.2,5.3-28.9,15.8-41.2c10.5-12.3,22.2-18.4,35-18.4c6.7,0,12,1.7,16,5.2c4,3.4,6.2,8.3,6,13.5c0,14.8-15.8,26.9-47.3,36.1c2.9,14,10.4,21,22.5,20.9c4.8,0,9.5-1.3,13.5-3.8c4.3-2.5,10.8-8.2,19.5-16.9L571.6,154.6L571.6,154.6z M515.3,134.8c18.3-5.2,27.5-14.7,27.5-28.6c0-6.9-2.5-10.3-7.5-10.3c-4.7,0-9.2,3.6-13.5,10.8C517.4,113.9,515.3,123.2,515.3,134.8L515.3,134.8z M633.5,154.6c-9,9-16.8,15.6-23.4,19.8c-6.6,4.3-12.9,6.4-18.8,6.4c-6.2,0-11.2-2.6-15-7.8c-3.8-5.2-5.7-12-5.7-20.5c0-7.4,1.8-17.3,5.5-29.5l4.6-16.3l-8.2,0.4l3.4-16.9L586,90l10.1-33.5l28.7-5.9l-11.1,37.4l15.2-0.9l-3.5,16.6l-16.7,1.3l-7.2,24.1c-2.5,8.4-3.7,15-3.7,20c-0.1,3,0.8,5.9,2.5,8.2c1.5,2,4,3.2,6.5,3.2c3.9-0.1,7.7-1.3,10.9-3.5c3.6-2.3,8.9-7.2,15.8-14.6L633.5,154.6L633.5,154.6z"/><g><path class="st1" d="M419.9,236.7l0.6-4.3c17.5-9.3,39.3-12.9,57.1-21.9c5.3,2.4,7.7-1.1,13.4-0.7c2.1,1.9-2.6,4.4,3,4c12.6,1.7,25-0.7,37.4-1.7c13.1-1.1,26.2,0.1,39-0.6c4.1-0.2,10.4-5.9,15.5-3.1c2.3,4.1-7.4,4.5-4.8,9.1c25.8,6.1,90.2,31.7,101.2,3.8c0.2,1.7-1.9,5.1,1.1,4.6c21.7-9.7,58.6-30.7,65.1-36.2c7.1-6,16.7-5.9,26-8c16.8-3.9,34.8-7.8,49.3-16.3c9,6.2,27.8,9.4,37.9,7.2c10.5-2.3,26.8-19.7,35.5-25.9c3.4-2.4,8.5-7.1,12.1-4.5c-2.5,1.7,0.4,6.7-2.6,5.8c-1.6-3-4.8,0.5-7.1-0.1c-8.8,7.2-17.9,14-26.9,20.9c-4.2,2.6,4,5.2-0.9,6.1c-23.1,4.6-58.4-6.9-73,9.1c-23.1,7.9-45,9.9-67.8,22.2c-13.1,7.1-29.1,19.9-42.7,26.6c-2.3,1.1-5.7,1.6-8.4,3.2c-3.3,2-4.1,4.6-6.9,5.2c-7,1.5-21.4-2.1-30.5-3.5c-30.3-4.4-62.6-16.7-91.2-18.3c-11.3-0.6-24.6,1.2-37.4,1.7c-27.1,1.2-44.1,1.9-65.9,9.2C439.3,233.2,425.7,241.1,419.9,236.7L419.9,236.7z"/><g id="leaves"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1588.5342" y1="1453.7859" x2="1682.579" y2="1453.7859" gradientTransform="matrix(0.986 0.1668 -0.1668 0.986 -649.2522 -1551.6617)"><stop offset="0" style="stop-color:#89C442"/><stop offset="1" style="stop-color:#74B844"/></linearGradient><path class="st2" d="M674.3,92.4c2.2,2.6,46.1,17.2,61.3,35c15.2,17.8,21.9,33.6,19.8,48.8c-2.2,15.2-11.5,15-15.5,20.5s-9.7,12.4-20.5,11.7c-14.1-0.9-28.7-8-39.2-32.5s-9.7-47.6-8.9-60.3C671.8,107.7,672.8,100,674.3,92.4L674.3,92.4z"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1590.6572" y1="1457.6014" x2="1671.8643" y2="1457.6014" gradientTransform="matrix(0.986 0.1668 -0.1668 0.986 -658.2257 -1557.3479)"><stop offset="0" style="stop-color:#74B844"/><stop offset="1" style="stop-color:#4A9634"/></linearGradient><path class="st3" d="M671.7,100.6l65.7,97.9l-3,3.4"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="2846.3701" y1="-1145.0863" x2="3004.1321" y2="-1145.0863" gradientTransform="matrix(-0.9481 0.318 -0.318 -0.9481 3203.4319 -1905.1732)"><stop offset="0" style="stop-color:#C1EA71"/><stop offset="1" style="stop-color:#ACDA55"/></linearGradient><path class="st4" d="M839.5,0c-3,4.9-72.6,40.8-93.5,74.5c-20.9,33.7-26.8,60.2-19.3,85.1c7.6,24.9,22,23.8,30.3,32c8.2,8.2,19.4,18.2,37.3,14.2c23.4-5.3,45.9-20.9,57.2-64.6c11.2-43.8,3.9-82.1-0.9-103.2C847.7,25,844,12.4,839.5,0L839.5,0z"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="2849.96" y1="-1136.5093" x2="2987.4424" y2="-1136.5093" gradientTransform="matrix(-0.9481 0.318 -0.318 -0.9481 3203.439 -1905.0298)"><stop offset="0" style="stop-color:#ACDA55"/><stop offset="1" style="stop-color:#89C442"/></linearGradient><path class="st5" d="M838.3,7.4l-84.3,180.9l5,5"/></g></g></svg><script type="text/javascript">var map=L.map("map");L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",{maxZoom:18,attribution:'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',id:"mapbox.satellite"}).addTo(map);var svgElement=document.querySelector("#image"),bounds=L.latLngBounds([[32,-130],[13,-100]]);map.fitBounds(bounds);var overlay=L.svgOverlay(svgElement,bounds,{opacity:.8,interactive:!0});map.addLayer(overlay);var element=overlay.getElement();element.addEventListener("click",function(e){})</script></body></html>
3 changes: 2 additions & 1 deletion dist/leaflet.css
View file
Open in desktop
Expand Up @@ -237,7 +237,8 @@

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
Expand Down
46 changes: 46 additions & 0 deletions src/layer/SVGOverlay.js
View file
Open in desktop
@@ -0,0 +1,46 @@
import {ImageOverlay} from './ImageOverlay';
import * as DomUtil from '../dom/DomUtil';
import * as Util from '../core/Util';

/*
* @class SVGOverlay
* @aka L.SVGOverlay
* @inherits ImageOverlay
*
* Used to load, display and provide DOM access to an SVG file over specific bounds of the map. Extends `ImageOverlay`.
*
* An SVG overlay uses the [`<svg>`](https://developer.mozilla.org/docs/Web/SVG/Element/svg) element
*
* @example
*
* ```js
* var element = '<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/></svg>,
* elementBounds = [ [ 32, -130 ], [ 13, -100 ] ];
* L.svgOverlay(element, elementBounds).addTo(map);
* ```
*/

export var SVGOverlay = ImageOverlay.extend({
_initImage: function () {
var el = this._image = this._url;

DomUtil.addClass(el, 'leaflet-image-layer');
if (this._zoomAnimated) { DomUtil.addClass(el, 'leaflet-zoom-animated'); }

el.onselectstart = Util.falseFn;
el.onmousemove = Util.falseFn;
}

// @method getElement(): SVGElement
// Returns the instance of [`SVGElement`](https://developer.mozilla.org/docs/Web/API/SVGElement)
// used by this overlay.
});


// @factory L.svgOverlay(video: String|Array|SVGElement, bounds: LatLngBounds, options?: SVGOverlay options)
// Instantiates an image overlay object given the URL of the video (or array of URLs, or even a video element) and the
// geographical bounds it is tied to.

export function svgOverlay(video, bounds, options) {
zsavajji marked this conversation as resolved.
Show resolved Hide resolved
return new SVGOverlay(video, bounds, options);
}
1 change: 1 addition & 0 deletions src/layer/index.js
View file
Open in desktop
Expand Up @@ -13,6 +13,7 @@ export {GeoJSON, geoJSON, geoJson};

export {ImageOverlay, imageOverlay} from './ImageOverlay';
export {VideoOverlay, videoOverlay} from './VideoOverlay';
export {SVGOverlay, svgOverlay} from './SVGOverlay';

export {DivOverlay} from './DivOverlay';
export {Popup, popup} from './Popup';
Expand Down