[GIS] Preserving Curve Geometries in Leaflet

curvedgeojsonleafletsvgwell-known-text

Is there any way to represent a polygon geometry that contains a curve accurately in Leaflet (from WKT)? GeoJSON conversion from WKT is insufficient as it digitizes the points of a curve out to an approximation, it's necessary that curves be preserved as their mathematical representation (read:look circular/curved and not like a series of shortly connected lines at lower zoom levels).

I've checked out arc.js and leaflet-omnivore to start with, but my current thinking is that I would have to parse a WKT string into an SVG element and use either the D3 or RaphaelLayer plugins to properly render the layer while preserving curves. I also have performance concerns going the SVG route because I may have many polygons (hundreds to tens of thousands) to render in any given view.

I did find this old question and have looked into the Leaflet.curve and Leaflet.Arc plugins but I don't think either of them could really apply to what I need (I'm also stuck with Leaflet 0.7x for maintainability reasons which eliminates a lot of plugins).

Anyone else have experience with this or a similar problem and have any suggestions or advice on balancing performance/accuracy of the curves?

Best Answer

Is there any way to represent a polygon geometry that contains a curve accurately in Leaflet (from WKT)?

No.

Leaflet currently does not handle curves (besides L.Circle and L.CircleMarker).

I suggest you have a deep look at https://github.com/Leaflet/Leaflet/blob/master/src/layer/vector/SVG.js and https://github.com/Leaflet/Leaflet/blob/master/src/layer/vector/Polyline.js (among other source files). It should be possible to extend Leaflet's renderers to handle arcs, but that would need modifications across several classes.

Related Solutions

[GIS] Add svg filter to paths created by leaflet

I'd suggest going with your second approach of putting your svg markup in-line. I think your jQuery prepend method doesn't work because you need to create <defs> and other children of <svg> elements using document.createElementNS and jQuery is probably using document.createElement.

Anyway, the piece you're missing is applying your filter to your svg, which you could do two ways.

div.leaflet-overlay-pane svg > g path {
  filter: url(#dropshadow);
}

$ approach (put this after you add your geojson to your map):

$("div.leaflet-overlay-pane svg > g path").css({
  filter: "url(#dropshadow)"
});

[GIS] Leaflet popups – preserving user input on close/reopen

If you want to save the data only for that session, then this can achieved by the following code. I've basically re-arranged the code that you have written, along with the code to show the data in the Popup.

map.on('draw:created', function (e) {

        //ADDS THE LAYER TO THE MAP
        featureGroup.addLayer(e.layer);


        e.layer.on('click', function(){
            //IF THE POPUP'S CONTENT HAS BEEN 'SAVED' AS AN ATTRIBUTE OF THE GEOMETRY - IN OTHER WORDS, THE USER HAS EDITED THE POPUP CONTENT
            if(e.layer.hello){
                //If we have the data, then we will show only the content of the hello variable
                e.layer.bindPopup(e.layer.hello).openPopup();               
            }
            else{
                //we do not have the data; Hence we will show the editing functionality
                //SETS THE BASIC FORMAT, INCLUDING BUTTONS FOR ADDING C
                popUpFields = "<button class='add_content'>Add content</button><div class='content_container'></div><button class='popup_save'>Save</button>";

                //Open the Popup
                e.layer.bindPopup(popUpFields).openPopup();

                //Bind the click event on the Add content Button
                $(document).on("click", ".add_content", function(){
                    $(this).next(".content_container").append("Hello popup!");
                });

                //bind the click event on the save button
                $('.popup_save').click(function(){
                    //THE USER SAVES THEIR POPUP CONTENT, WRITING THE ADDED CONTENT TO AN ATTRIBUTE OF THE LAYER     
                    e.layer.hello = $(this).prev().html();
                });
            };
        });
});

Related Question

[GIS] Using SVG icon as marker for a geoJSON point file in Leaflet