Added basic SVGOverlay to expose SVG DOM element (Leaflet#6517)

* Added basic SVG Overlay * WIP * Changed parameter name, added comment
yasusho0929 · Apr 30, 2019 · 4ec26a5 · 4ec26a5
1 parent 148cba8
commit 4ec26a5
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 1 deletion.
diff --git a/debug/map/svgoverlay.html b/debug/map/svgoverlay.html
@@ -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>
diff --git a/dist/leaflet.css b/dist/leaflet.css
@@ -241,7 +241,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;
 	}

diff --git a/src/layer/SVGOverlay.js b/src/layer/SVGOverlay.js
@@ -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);
+}
diff --git a/src/layer/index.js b/src/layer/index.js
@@ -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';