rowanwins
commented
2 years ago Hi there @gmarshall56
When you draw a polyline in geoman it gives you coordinates like [16.467 223.063].
In reality the max longitude is 180 and Turf respects this and hence limits the coordinates it returns to -180 to 180.
In your application you need a way of working out how to convert geometries which cross the antimeridian (180).
There are no easy answers for this but perhaps take a look at something like this libraryh for inspiration https://github.com/briannaAndCo/Leaflet.Antimeridian
Cheers Rowan
Using Turf: cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js Using latest Leaflet and React Leaflet libraries Using Leaflet-Geoman: unpkg.com/@geoman-io/leaflet-geoman-free@2.11.2/dist/leaflet-geoman.min.js
I am new to Turf and Leaflet. There must be a simple way to fix this or perhaps this behavior is expected behavior in mapping applications. I simply do not know.
I am using Turf to buffer lines (polylines) on a world map. What I am seeing is that once the drawing of the line is complete the buffer is not showing on the map, however, when I take my mouse and click and drag the map (panning) to the left, the map will blink and then the buffer shows. As I pan the map back and forth (left to right or vice versa), the buffer will disappear or appear.
I am using Geoman for my draw control.
Here is a snippet of my code (I tried to format it but then the code does not show up highlighted. See link below for the complete code in CodePen):
latlngsArray = e.layer._latlngs; let lineString = L.polyline(latlngsArray, { color: "red" }); const newBuffered = turf.buffer(lineString.toGeoJSON(), 200, { units: "kilometers" }); const coordinates = newBuffered.geometry.coordinates[0]; for (let i = 1; i < coordinates.length - 1; ++i) { const coords = coordinates[i]; const prevCoords = coordinates[i - 1]; coordinates[i][0] = coords[0] + (coords[0] - prevCoords[0] > 180 ? -360 : prevCoords[0] - coords[0] > 180 ? 360 : 0); } const newBufferedLayer = L.geoJSON(newBuffered, { style: { color: "red", dashArray: "5,5", fillOpacity: 0 } }); newBufferedLayer.addTo(map); newBufferedLayer.bringToFront();I have a created a CodePen here to demonstrate my issue. Go to my Codepen and when u run it, on the base world map draw one complete line beginning at LA, California to Hawaii, click at Hawaii, then continue to draw the line to Japan, click at Japan, then continue to draw the line to anywhere in China. Your line should look similar to this:
Now place your mouse pointer in the middle of the map, left-mouse click and slowly drag the map to the left and to the right. The buffer will appear and disappear. Further, if you were to zoom out you would see the buffer on one "copy" of the world map and the line you had drawn on another "copy" of the map.
Can somebody please advise me as to this behavior? Is this expected behavior using Leaflet, or any mapping framework? Is this perhaps an issue with Turf? Are there settings / properties that should be set to prevent this behavior?
Thank you for your time.