I have a geojson file that I'm trying to add to a map but for some reason, they are misaligned.
I have made this simplified version of the page, removing all my markers and all other HTML to try to isolate the problem but with no joy.
I've tried
<script> tags like the leaflet JS tutorial showshttp://codeyeti.co.uk/ActiveCommuters/map_dev.php
They all return this same misaligned result.
the Geojson file can be viewed on Maptiler where it displays perfectly
https://cloud.maptiler.com/data/b92719af-8d5b-4006-9631-3d8b13eaa1c6/#9.19/53.2826/-4.3682
here is my code
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" crossorigin=""></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([53.309242,-4.626208], 10);
L.tileLayer('https://api.maptiler.com/maps/openstreetmap/{z}/{x}/{y}.jpg?key=g9ErshPDnj0LYYtEd10o', {
attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
}).addTo(map);
fetch('https://api.maptiler.com/data/b92719af-8d5b-4006-9631-3d8b13eaa1c6/features.json?key=g9ErshPDnj0LYYtEd10o')
.then(function (responce) {
return responce.json();
})
.then(function (data) {
L.geoJSON(data).addTo(map);
});
</script>
</body>
</html>
Has anyone had trouble like this?
misaligned result by style.css line 271 :
img {
margin: 10px 0px;
}
you can check it
Map of leaflet is a group images