2

I have a dataset containing thousands of Car Parking Spaces I want to show on a map. However when I use the L.glify.shapes function the polygons do not render correctly? Is there any way I can resolve this issue?

Or can anyone recommend a different library that is more suitable for rendering large amounts of data on a leaflet map? Many thanks

You can see the code here: https://codepen.io/RayL1/pen/WNzbddJ

let map = L.map('map', {maxZoom: 30}).setView([ 51.524676, -0.181212], 22);

let data = {
  "type": "FeatureCollection",
  "features": [
    { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [ -0.181100, 51.524730 ], [ -0.181155, 51.524703 ], [ -0.181169, 51.524714 ], [ -0.181114, 51.524741 ], [ -0.181100, 51.524730 ] ] ] } },
    { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [ -0.181158, 51.524702 ], [ -0.181212, 51.524676 ], [ -0.181226, 51.524687 ], [ -0.181172, 51.524713 ], [ -0.181158, 51.524702 ] ] ] } },
    { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [ -0.181214, 51.524675 ], [ -0.181268, 51.524649 ], [ -0.181282, 51.524660 ], [ -0.181228, 51.524686 ], [ -0.181214, 51.524675 ] ] ] } },
    { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [ -0.181271, 51.524648 ], [ -0.181325, 51.524622 ], [ -0.181339, 51.524633 ], [ -0.181285, 51.524659 ], [ -0.181271, 51.524648 ] ] ] } }
  ]
}

This is what it should look like:

L.geoJSON(data, {
  style:{
    "color": "black", 
    "weight":4, 
    "fill":false, 
    "opacity":0.8
  }
}).addTo(map);

enter image description here

This is how it comes out:

L.glify.shapes({
  map: map,
  data: data,
  border:true,
  color:{
    r:0,
    g:0,
    b:245
  }
});

enter image description here

Difference:

enter image description here

Improve this question
7
  • I put the coordinates on to a google map: jsfiddle.net/oza8nyw3/1 This seems to be correct. Does glify "understand" lat/longs? From experience even small distances get warped due to lat/longs being projected from a sphere to a flat plane. Commented Jul 3, 2022 at 12:49
  • Why can't you use the first method you use (which works) to draw your spaces? Commented Jul 3, 2022 at 13:05
  • Glify does use lat/longs but it's almost as if it doesn't work beyond a certain level of precision. I can't use the first method because the full dataset contains thousands of polygons, so I need a webgl renderer to display them all without performance issues. Commented Jul 3, 2022 at 13:12
  • OK, I don't understand why the first method cannot be used. Is there a limitation on how many points that can use? Commented Jul 3, 2022 at 13:15
  • 1
    @ArneFischer I posted an issue to the github repo and a pull request with a potential solution. You could use my fork of Glify which might solve the issues you are having. Commented Jul 25, 2023 at 22:40
Related questions
4
Polygon fill not apparent?
0
Bad rendering with Leaflet Draw polygon
1
function surprisingly changes polygon coords in leaflet map
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.