Geoman Add Prop

https://stackoverflow.com/q/60921735/8283938

by Bretto

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css">
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
<div id="map"></div>

CSS

#map {
    height: 500px;
    width: 80%;
}

JavaScript

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
	 	// Creating a tile layer usually involves setting the URL template for the tile images
	 	var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
	 	    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	 	    osm = L.tileLayer(osmUrl, {
	 	        maxZoom: 18,
	 	        attribution: osmAttrib
	 	    });

	 	// initialize the map on the "map" div with a given center and zoom
	 	var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

		var options = {
        position: 'topleft', // toolbar position, options are 'topleft', 'topright', 'bottomleft', 'bottomright'
        drawMarker: true,  // adds button to draw markers
        drawPolygon: true,  // adds button to draw a polygon
        drawPolyline: true,  // adds button to draw a polyline
        drawCircle: true,  // adds button to draw a cricle
        editPolygon: true,  // adds button to toggle global edit mode
        deleteLayer: true   // adds a button to delete layers
    };

    // add leaflet.pm controls to the map
    map.pm.addControls(options);
    

    // get array of all available shapes
    map.pm.Draw.getShapes()

    // disable drawing mode
    map.pm.disableDraw('Poly');
		
    map.pm.Draw.setPathOptions({custom:"prop"});

// listen to when a new layer is created
map.on('pm:create', function(e) {
  console.log(e)
  var layer = e.layer;
  var id = 123; 
  layer.properties = {
        id,
        name: `Zone ${id}`
  }
  console.log(layer);

  // listen to changes on the new layer
  e.layer.on('pm:edit', function(x) {
    console.log('edit', x)
  });
});