I would like to have an edit option for my user to edit an existing line or polygon plotted in a map. The edit option should allow user to add new vertices where user clicks.
I have tried using Mapbox-gl-draw plugin and it is working in a different way -> When editing the existing polygon/line, when I am clicking on the geometry I will get existing vertices and new vertices will appear at middle of existing points. I would like to have an option to add a new vertices at the point where I click while editing.
This is what I have tried:
HTML:
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' /> <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.4/mapbox-gl-draw.js'></script> <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.4/mapbox-gl-draw.css' type='text/css' /> <div id='map'></div> JavaScript:
var map = new mapboxgl.Map({ container: 'map', style: 'https://maputnik.github.io/osm-liberty/style.json', center: [79.30961608886719, 61.57192958204744], zoom: 10, hash: true }); var Draw = new MapboxDraw({ userProperties: true, styles: [{ id: 'highlight-active-points', type: 'circle', filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'feature'], ['==', 'active', 'true'] ], paint: { 'circle-radius': 0.1, 'circle-color': '#D20C0C' } }, { id: 'points-are-blue', type: 'circle', filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'feature'], ['==', 'active', 'false'] ], paint: { 'circle-radius': 5, 'circle-color': '#D20C0C' } }, // ACTIVE (being drawn) // line stroke { id: 'gl-draw-line', type: 'line', filter: ['all', ['==', '$type', 'LineString'], ['!=', 'mode', 'static'] ], layout: { 'line-cap': 'round', 'line-join': 'round' }, paint: { 'line-color': '#D20C0C', 'line-width': 3 } }, // polygon fill { id: 'gl-draw-polygon-fill', type: 'fill', filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static'] ], paint: { 'fill-color': '#120404', 'fill-outline-color': '#120404', 'fill-opacity': 0.1 } }, // polygon outline stroke // This doesn't style the first edge of the polygon, which uses the line stroke styling instead { id: 'gl-draw-polygon-stroke-active', type: 'line', filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static'] ], layout: { 'line-cap': 'round', 'line-join': 'round' }, paint: { 'line-color': '#D20C0C', 'line-width': 2 } }, // vertex points { id: 'gl-draw-polygon-and-line-vertex-active', type: 'circle', filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point'], ['!=', 'mode', 'static'] ], paint: { 'circle-radius': 3, 'circle-color': '#D20C0C', } }, { 'id': 'gl-draw-polygon-midpoint', 'type': 'circle', 'filter': ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint'] ], 'paint': { 'circle-radius': 6, 'circle-color': '#D20C0C', } }, ] }); map.addControl(Draw, 'top-left'); map.on('load', (e) => { Draw.set(geoJSON) }); var geoJSON = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "class_id": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 79.30961608886719, 61.57192958204744 ], [ 79.34309005737303, 61.57192958204744 ], [ 79.34309005737303, 61.57871162332267 ], [ 79.30961608886719, 61.57871162332267 ], [ 79.30961608886719, 61.57192958204744 ] ] ] } }, { "type": "Feature", "properties": { "class_id": 2 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 79.35201644897461, 61.58271478278019 ], [ 79.35115814208984, 61.573972521656835 ], [ 79.38188552856444, 61.57192958204744 ], [ 79.3956184387207, 61.581080902573085 ], [ 79.37124252319336, 61.58973948654749 ], [ 79.35201644897461, 61.58271478278019 ] ] ] } }, { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [ 79.41947937011719, 61.58630901615167 ] } }, { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [ 79.3733024597168, 61.56302079282452 ], [ 79.42153930664062, 61.57078547708563 ] ] } }, { "type": "Feature", "properties": {}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 79.32952880859375, 61.55893333624483 ], [ 79.36197280883789, 61.55893333624483 ], [ 79.36197280883789, 61.56481910315267 ], [ 79.32952880859375, 61.56481910315267 ], [ 79.32952880859375, 61.55893333624483 ] ] ] } } ] } CSS:
body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } Here is JS fiddle:
