1

I'm trying to get topological movement of lines with Leaflet-Geoman plugin using TopoJSON. There is a method called topojson.mesh , which

Returns the GeoJSON MultiLineString geometry object representing the mesh for the specified object in the given topology. This is useful for rendering strokes in complicated objects efficiently, as edges that are shared by multiple features are only stroked once. If object is not specified, a mesh of the entire topology is returned.

Using an answer in this post, I've been able to return the MultiLineString using topojson.mesh. Since Leaflet-Geoman supports MultiLineString, I came across with idea that may be the returned mesh can be edited with Leaflet-Geoman while maintaining the topological properties.

But below shows what happens when plugin used with the returned MultiLineString.

enter image description here

What I need is I need to move below points without breaking the line.

enter image description here

Is that a doable?

I'll attach the code below

<!DOCTYPE html>
<html>

<head>
    <title>Topology Test</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/css/leaflet.css" />
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />

    <style>
        #mapdiv {
            height: 899px;
            background-color: #acd6e2;
        }
    </style>

</head>

<body>
    <div id="mapdiv"></div>
    <script src="https://unpkg.com/topojson@3"></script>
    <script src="src/js/leaflet-src.js"></script>
    <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
    <script>
        var mymap = L.map('mapdiv', {
            layers: [
                new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
                })
            ],
        });

        mymap.pm.addControls({
            position: 'topleft',
            drawCircle: false,
        });


        fetch("data/data.geojson")
            .then(res => res.json())
            .then(json => {

                //var layer = L.geoJSON(json).addTo(map);
                var topo = topojson.topology([json]);

                console.log(json, topo, topojson.mesh(topo));

                var layerLines = L.geoJson(topojson.mesh(topo), {
                    fill: false,
                }).addTo(mymap);


                mymap.fitBounds(layerLines.getBounds());

            });
    </script>


</body>

</html>

The data.geojson

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -113,
              37
            ],
            [
              -113,
              40
            ],
            [
              -109,
              40
            ],
            [
              -109,
              37
            ],
            [
              -113,
              37
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -109,
              37
            ],
            [
              -109,
              39
            ],
            [
              -104,
              39
            ],
            [
              -104,
              37
            ],
            [
              -109,
              37
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -109,
              34
            ],
            [
              -109,
              37
            ],
            [
              -102,
              37
            ],
            [
              -102,
              34
            ],
            [
              -109,
              34
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -104,
              37
            ],
            [
              -104,
              40
            ],
            [
              -100,
              40
            ],
            [
              -100,
              37
            ],
            [
              -104,
              37
            ]
          ]
        ]
      }
    }
  ]
}
6
  • 1
    I would say that what you want to achieve is not achievable with Leaflet-Geoman plugin. Yes, it can edit MultiLineString geometry, but has no idea that this geometry comes from TopoJSON where certain points should stay together. – TomazicM Jun 26 at 17:56
  • @TomazicM Thanks so much. It is an eye opener! I have two questions: 1) Is there a way I can assure that topojson.mesh really returned a mesh. 2) Are there any plugins work with topoJSON – Hashan hemachandra Jun 27 at 6:12
  • 1
    Ad1: Mesh is just a nickname for MultiLineString that optimally (display execution wise) describes TopoJSON topolgy. Do you trust it that it's is done correctly? As much as any library. Complex software without bugs does not exist. Ad2: I'm not aware of any, except for leaflet-omnivore plugin, but this one is just for displaying TopoJSON with Leaflet. – TomazicM Jun 27 at 16:15
  • 1
    Forgot to mention one more TopoJSON library: MapShaper. – TomazicM Jun 28 at 8:46
  • @TomazicM Thanks so much for the explaining through out the problem. I found a thread here. The answer is using openlayers. Not sure if this still works or not. I will have to do some research on this. It seems like this methord is using the openlayers 2. I'm going to try it out anyway :) – Hashan hemachandra – Hashan hemachandra Jun 28 at 17:16
1

For anyone who is looking for an answer to this type of question, I found a method using OpenLayers v6.5.0. Their is an example for Draw and Modify Features, which can maintain the topology of lines and polygons. I will post two examples here.

This one is for LineStrings

Below one is for LineStrings

This one is for Polygons

Below one is for Polygons

Hope this helps some one :)

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.