Display of SVG on Leaflet map

user_6694804 0
Viewed 1436

I have a moderately large SVG to be displayed as an overlay on a Leaflet map - it's basically a selection of roads from a road network. The leaflet map is instantiated with:

testMap = L.map('mapdiv', { renderer: L.svg({ padding: 100 }) })
              .setView([33.085, -96.815], 11);

and the SVG layer is created with:

var imgUrl = url, imgBnds;
L.imageOverlay(imgUrl, imgBnds, {opacity:0.3}).addTo(testMap);

This all displays nicely when zoomed out, but when zooming in, the SVG gets tiled, and only the top-left tile is displayed even though this is not the area being shown in the map.

The SVG has the following:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" width="1920" height="767" 
    clip-path="url(#MapClipRectangle)" style="overflow:hidden;text-rendering:optimizeLegibility" xmlns="http://www.w3.org/2000/svg">
</desc>
    <defs>
        <clipPath clipPathUnits="userSpaceOnUse" id="MapClipRectangle">
            <rect x="0" y="0" width="1920" height="767" />
        </clipPath>
        <symbol id="1" style="fill:none">
            <path d="M985.96 476.76 l-0.26 0.06" />
<!-- ... Many Symbols and Paths, plus some Polygons, Text,  Line_artwork, Map_decoration and a Map_frame... -->

And it ends up looking like this (example actually shows the top-left tile, but if I zoom in to the right, you don't actually see anything from the overlay SVG):

SVG Zoom Problem

How do you stop/control this behaviour?

Sample SVG for which this behaviour occurs

leaflet svg
1 Answers

I have not investigated this question in any depth, but in the interest of having some answer at all that might help:

It seems unusual to me that you want to use an svg for geospatial data like a road network.

If someone runs into a similar problem in the future, I would recommend, rather than trying to fix the svg rendering, convert the data to geojson which is more of a standard option for this sort of data display need and then style as needed using the options in leaflet.

To OP, did you ever find a solution?

As a note, it is not clear to me which part of the images posted are svg's vs which parts are basemap or other layers.

user_30336340
Related