Search Posts

Leaflet using inline svg as the base layer

Currently, I serve a map with an imageOverlay base layer.
Right now, I need to use an svg instead of the current png imageOverlay,
and to alter the svg css (like, changing opacity for the nearest places (paths in the svg) etc), dynamically,
so basically, I need to control the actual map svg style dynamically.

I’ve decided I need to use an inline svg to alter the style of the svg,
instead of an image with an svg source.

I tried replacing the leaflet created image overlay with an actual inline svg at runtime.
it worked, but the zoom control won’t affect the layer anymore,
and switching layers is a bit buggy.
is there any inside capabilities of leaflet to support this kind of requirement?

adding a fiddle to explain it better

var map ='map', {
center: [40.75, -74.2],
zoom: 13
var imageUrl = '',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
setTimeout(() => {
                            var $img = $('.leaflet-image-layer');
                            var imgURL = $img.attr('src');
                            var attributes = $img.prop("attributes");

                        $.get(imgURL, function(data) {
                            // Get the SVG tag, ignore the rest
                            var $svg = $(data).find('svg');

                            // Remove any invalid XML tags
                            $svg = $svg.removeAttr('xmlns:a');

                            // Loop through IMG attributes and apply on SVG
                            $.each(attributes, function() {
                                $svg.attr(, this.value);

                            // Replace IMG with SVG
                        }, 'xml');

`}, 2000);

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.