I am trying out Mapbox-gl-js as an alternative to our current openLayers 3 solution. This is primarily due to a desire to shift away from raster backgrounds and to utilize the webGL and vector tile support in Mapbox-gl-js. One issue i've encountered and am not exactly sure how to tackle is how to maintain and accurate and scaling vector curve in Mapbox-gl-js (perhaps using turf.js?). I have not been able to find an example else where so hopefully someone out there brighter than me can help. In the example below you will see the difference between Openlayers3 and Mapbox-gl-js:

OpenLayers 3:




Currently the data is brought into the map via an external geoJSON file and just added to the map with a simple call like so:

     //Define source layer
     map.addSource('lineSource', {
        type: "geojson",
        data: lineGeoJSON //geojson path

     //Define Mapbox layer for line
        "id": "lineGeoJSON",
        "type": "line",
        "source": "lineSource"

FIX: Not 100% sure of how I fixed this. I switched from an ajax to an xml call to grab and parse my geojson data. I also began converting my web mercator meter coordinates to lat/long on the fly in the geojson parser vs. in QGIS. This seems like a rare and odd bug, but hopefully this info may help someone down the line.

Your Answer

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

Browse other questions tagged or ask your own question.