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 all commits
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>
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(svg: String|SVGElement, bounds: LatLngBounds, options?: SVGOverlay options)
// Instantiates an image overlay object given an SVG element and the geographical bounds it is tied to.
// A viewBox attribute is required on the SVG element to zoom in and out properly.

export function svgOverlay(el, bounds, options) {
return new SVGOverlay(el, 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