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.
What I need is I need to move below points without breaking the line.
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
]
]
]
}
}
]
}
MultiLineStringgeometry, but has no idea that this geometry comes from TopoJSON where certain points should stay together.@TomazicMThanks so much. It is an eye opener! I have two questions: 1) Is there a way I can assure thattopojson.meshreally returned a mesh. 2) Are there any plugins work with topoJSON@TomazicMThanks 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 theopenlayers 2. I'm going to try it out anyway :) – Hashan hemachandra