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/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..7333ab9f95a --- /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(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 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';