CODEWITHSUNDEEP
javascripthtmlleaflet
Barry Marples
Barry Marples

Reputation: 17

Geojson File not aligning with map correctly

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

http://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/[email protected]/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/[email protected]/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">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; 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?

Upvotes: 0

Views: 313

Answers (1)

Xupitan
Xupitan

Reputation: 1681

misaligned result by style.css line 271 :

img {
   margin: 10px 0px;
}

you can check it

Map of leaflet is a group images

Upvotes: 1

Related Questions