1

You can see my code and expected result in this image running swiftly in codepen! Other online sandboxes work as expected too.

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 this. 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?...

  • Check if the json is too complicated. Add in just the endpoint markers only and not the path. Just saw its an old thread, I apologize. Did you figure it out? – Barrett Aug 13 '16 at 11:18
1

From what you've described, my guess is that some CSS is shifting your graphics container. It's probably on svg or div.leaflet-overlay-pane. You should be able to use dev tools to inspect and see if there's some inherited margin shifting your graphics north.

To demonstrate, here's a fiddle that shows graphics shifted due to margin applied to svg elements. That fiddle is a modified version of the mapbox.js polyline example.

| improve this answer | |
  • Good thinking. Unfortunately I had already checked the css rules using inspect and nothing suspicious came up. However I managed, using your suggestion with margin, to align the overlay with the maptiles. It looks really wonky when zooming in though. Also an initial white gap on top because of the "margin-top:-15px" rule. It being -15px means it's probably a user-defined rule. Would you please care to inspect tourofcrete.com/the-race/stages and see if your trained eye can spot it? – maninak Jan 26 '16 at 7:30
  • I think I see what you're saying about the wonky zoom but I don't see the white gap. I'm using chrome. Where did you add your css that specifies margin-top: -15px? – Derek Swingley Jan 27 '16 at 19:10
  • The "margin-top:-15px;" is placed in rule ".leaflet-tile-pane" on my websites merged and minified css file (not the one coming in from leaflet). I solved the white gap by moving the margin rule there but couldn't edit my last comment. If you disable my margin rule before moving the tiles around with mouse, you will see that white-bar effect again. Workaround was good enough to push to live, but am still not satisfied with the result. Then you so much for your time! – maninak Jan 28 '16 at 20:03
0

I am using Drupal with the Leaflet module and I have the same problem. The problem is here:

<svg class="leaflet-zoom-animated" style="transform: translate(-144px, 382px);" width="743" height="495" viewBox="-144 360 743 495" tabIndex="-1">

I found the culprit to be this style="transform: translate(-144px, 382px); I can change the values in Mozilla firebug and get the map to line up correctly. I haven't figured out how to adjust this in the leaflet code yet. it is being changed dynamically as you zoom and pan. So if I zoom or pan I have to change the value again to make it line up. I will update if I can figure out where to change this. So I came up with this solution I noticed that no matter the zoom or how the number changed it was off by 20px so I put 20px padding on the svg element. It is working for me now.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.