The exact same code running in my php file on my wordpress site, shows the geojson layer misaligned, specifically offsetted top the top and to the left like . Effect persists when moving the map around and zooming.
What stupid thing am I missing here? I've been busting my head all over this and google has not been much of a help. Haven't found a workaround to it either, like maybe offset it as much but the opposite direction to equalise.
I am attaching my HTML code below as well for indexing reasons:
<div id='map' style='height: 400px;width:841px;'></div> <script src='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script> <link href='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' /> <!-- For fullscreen mode button -K --> <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.2/Leaflet.fullscreen.min.js'></script> <link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.2/leaflet.fullscreen.css' rel='stylesheet' /> <script> L.mapbox.accessToken = 'pk.eyJ1IjoibWFuaW5hcyIsImEiOiJjaWpzYmRvZW4wMGFodmxtN3M3bHV6cXhrIn0.Xf1uqAaJ4QSFgmM_UinFkg'; var map = L.mapbox.map('map', 'mapbox.streets') .setView([35.2275941, 24.7696794], 8); var featureLayer = L.mapbox.featureLayer() .loadURL('https://gist.githubusercontent.com/anonymous/dbcb9fbc1adf5958471e/raw/f326fc0fa63acade63146c74bfdbb8021afa5bdc/map.geojson') .addTo(map); L.control.fullscreen().addTo(map); </script>
Disclaimer: I'm more of a C/C++, Java programmer having a go at web development for the new skills, working a major local opportunity and my love for design and DataViz. Still getting my feet wet with PHP, JS, and the like so maybe I've missed something on that front?...