From b0e9acd83809d33ca2aae210949f0bbbb6a6c6cc Mon Sep 17 00:00:00 2001 From: Andrea Faggin Date: Fri, 15 Feb 2019 14:43:24 +0100 Subject: [PATCH 1/3] Added basic SVG Overlay --- debug/map/svgoverlay.html | 53 +++++++++++++++++++++++++++++++++++ debug/map/svgoverlay.min.html | 1 + dist/leaflet.css | 3 +- src/layer/SVGOverlay.js | 46 ++++++++++++++++++++++++++++++ src/layer/index.js | 1 + 5 files changed, 103 insertions(+), 1 deletion(-) create mode 100644 debug/map/svgoverlay.html create mode 100644 debug/map/svgoverlay.min.html create mode 100644 src/layer/SVGOverlay.js diff --git a/debug/map/svgoverlay.html b/debug/map/svgoverlay.html new file mode 100644 index 00000000000..c904234696d --- /dev/null +++ b/debug/map/svgoverlay.html @@ -0,0 +1,53 @@ + + + + Leaflet debug page + + + + + + + + + + + + +
+ + + + + + + diff --git a/debug/map/svgoverlay.min.html b/debug/map/svgoverlay.min.html new file mode 100644 index 00000000000..bcda5d54788 --- /dev/null +++ b/debug/map/svgoverlay.min.html @@ -0,0 +1 @@ +Leaflet debug page
\ No newline at end of file diff --git a/dist/leaflet.css b/dist/leaflet.css index a0932d57ad9..273ec67cae2 100644 --- a/dist/leaflet.css +++ b/dist/leaflet.css @@ -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; } diff --git a/src/layer/SVGOverlay.js b/src/layer/SVGOverlay.js new file mode 100644 index 00000000000..c209de01cda --- /dev/null +++ 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 [``](https://developer.mozilla.org/docs/Web/SVG/Element/svg) element + * + * @example + * + * ```js + * var element = ', + * 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) { + return new SVGOverlay(video, bounds, options); +} diff --git a/src/layer/index.js b/src/layer/index.js index 23793efa277..198f8a6eeb3 100644 --- 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'; From 5a9f1b67ced7f1ad68ec257c0f5ed4db82da5c6c Mon Sep 17 00:00:00 2001 From: Andrea Faggin Date: Mon, 18 Feb 2019 10:25:31 +0100 Subject: [PATCH 2/3] WIP --- debug/map/svgoverlay.min.html | 1 - src/layer/SVGOverlay.js | 39 ++++++++++++++++++++++++++++++----- 2 files changed, 34 insertions(+), 6 deletions(-) delete mode 100644 debug/map/svgoverlay.min.html diff --git a/debug/map/svgoverlay.min.html b/debug/map/svgoverlay.min.html deleted file mode 100644 index bcda5d54788..00000000000 --- a/debug/map/svgoverlay.min.html +++ /dev/null @@ -1 +0,0 @@ -Leaflet debug page
\ No newline at end of file diff --git a/src/layer/SVGOverlay.js b/src/layer/SVGOverlay.js index c209de01cda..d9ee840b6b7 100644 --- a/src/layer/SVGOverlay.js +++ b/src/layer/SVGOverlay.js @@ -22,25 +22,54 @@ import * as Util from '../core/Util'; export var SVGOverlay = ImageOverlay.extend({ _initImage: function () { + var isElement = this._url.tagName === 'svg'; + var el = this._image = isElement ? this._url : _getSVGElement(this._url); + 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. + + + // _getSVGElement(url): string + // Gets the svg image from url with ['XMLHTTPRequest'](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) + + + _getSVGElement(url) { + var request = new XMLHttpRequest(); + request.addEventListener('load', this._parseSVGElement); + request.addEventListener('error', function(error) { + console.error('SVGOverlay loading file error ', error) + }); + + request.open('GET', url); + + + }, + + // _parseSVGElement(content): SVGElement + // Parses a given string to an SVGElement with ['DOMParser'](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser) API + + _parseSVGElement(content) { + + } }); -// @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 +// @factory L.svgOverlay(svg: String|SVGElement, bounds: LatLngBounds, options?: SVGOverlay options) +// Instantiates an image overlay object given the URL of the SVG image (or an SVG root tag) and the // geographical bounds it is tied to. -export function svgOverlay(video, bounds, options) { - return new SVGOverlay(video, bounds, options); +export function svgOverlay(image, bounds, options) { + return new SVGOverlay(image, bounds, options); } From 61dbdcfbf2767c809022c5a0b22f5ac9e181b2a3 Mon Sep 17 00:00:00 2001 From: Andrea Faggin Date: Mon, 18 Feb 2019 10:28:59 +0100 Subject: [PATCH 3/3] Changed parameter name, added comment --- src/layer/SVGOverlay.js | 39 +++++---------------------------------- 1 file changed, 5 insertions(+), 34 deletions(-) diff --git a/src/layer/SVGOverlay.js b/src/layer/SVGOverlay.js index d9ee840b6b7..7333ab9f95a 100644 --- a/src/layer/SVGOverlay.js +++ b/src/layer/SVGOverlay.js @@ -22,54 +22,25 @@ import * as Util from '../core/Util'; export var SVGOverlay = ImageOverlay.extend({ _initImage: function () { - var isElement = this._url.tagName === 'svg'; - var el = this._image = isElement ? this._url : _getSVGElement(this._url); - 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. - - - // _getSVGElement(url): string - // Gets the svg image from url with ['XMLHTTPRequest'](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) - - - _getSVGElement(url) { - var request = new XMLHttpRequest(); - request.addEventListener('load', this._parseSVGElement); - request.addEventListener('error', function(error) { - console.error('SVGOverlay loading file error ', error) - }); - - request.open('GET', url); - - - }, - - // _parseSVGElement(content): SVGElement - // Parses a given string to an SVGElement with ['DOMParser'](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser) API - - _parseSVGElement(content) { - - } }); // @factory L.svgOverlay(svg: String|SVGElement, bounds: LatLngBounds, options?: SVGOverlay options) -// Instantiates an image overlay object given the URL of the SVG image (or an SVG root tag) and the -// geographical bounds it is tied to. +// 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(image, bounds, options) { - return new SVGOverlay(image, bounds, options); +export function svgOverlay(el, bounds, options) { + return new SVGOverlay(el, bounds, options); }