I have a vector graThe files have the same size ratio and the same bounding box
phic. I would like to partially display this graphic as a basic map. I exported most of the layers of this vector graphic as png and created tiles using Maptiler.
I saved the other layers as SVG-files and show them as an image overlay.
The PNG and the SVG-files have the same size ratio and the same bounding box. The PNG is 9726px 7950px and the SVG 4863,5px x 3975.7 px.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="4863.5px" height="3975.7px" viewBox="0 0 4863.5 3975.7" style="enable-background:new 0 0 4863.5 3975.7;"
xml:space="preserve">
Unfortunately, the svg files do not fit exactly over the tiles I created. There are small shifts. You can see it in the picture.
I think I'm doing something wrong with the projection. When creating the tiles, I tested with different coordinate systems. Among other things with EPSG:4326 (Bounding Box 7.088 51.401 7.365 51.541) and with EPSG:3857 (Bounding Box 789032.55 6692534.87 819868.05 6717554.10).
This is my code:
<script>
var imageBounds = [[51.401, 7.088], [51.541, 7.365]];
var tiles = L.tileLayer(
'./tiles/{z}/{x}/{y}.png',
{attribution: '<a href="...</a>',
opacity: 1
}
);
var map = L.map('mapid', {
layers: [tiles],
minZoom: 13,
maxZoom: 15,
maxBounds: imageBounds
}).setView([51.45, 7.2], 14);
var baseTree = [
{
label: 'Eigene Tiles',
layer: tiles
},
];
var overlaysTree = {
label: 'Linien',
selectAllCheckbox: 'Un/select all',
children: [
{
label: 'NE',
selectAllCheckbox: true,
children: [
{
label: 'Neue SVG-Dateien',
selectAllCheckbox: true,
children: [
{label: '159', layer: L.imageOverlay('159.svg', imageBounds)},
{label: '344', layer: L.imageOverlay('344.svg', imageBounds)},
{label: '345', layer: L.imageOverlay('345.svg', imageBounds)},
{label: '353', layer: L.imageOverlay('353.svg', imageBounds)},
{label: '355', layer: L.imageOverlay('355.svg', imageBounds)},
{label: '365', layer: L.imageOverlay('365.svg', imageBounds)},
]
}
]
}]}
var lay = L.control.layers.tree(baseTree, overlaysTree,
{
namedToggle: true,
selectorBack: false,
closedSymbol: '⊞ 🗀',
openedSymbol: '⊟ 🗁',
collapseAll: 'Collapse all',
expandAll: 'Expand all',
collapsed: false,
});
lay.addTo(map).collapseTree().expandSelected().collapseTree(true);