Search code examples
javascriptleafletleaflet-geoman

leaflet geoman - load pre-existing polygon to map

I have the following jsfiddle and wonder how can I click the dummy button add the predefine polygon coordinates?

[[[7.43067, 49.109838], [7.43067, 50.331436], [10.135936, 50.331436], [10.135936, 49.109838]]]

My javasript:

        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([50, 8], 6).addLayer(osm);

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

    map.on('pm:create', ({
      workingLayer
    }) => {
      self_drawn = map.pm.getGeomanDrawLayers(true)
      console.log(self_drawn.toGeoJSON())
    });


function loadSquare()
{
    console.log("ok load the square");   
}

My html

<div id="map"></div>

<button ion-button class="button-action" onclick="loadSquare()"  block>Load Square!</button>

Before:

enter image description here

After click the Load Square button, get a gemoan with:

enter image description here

Solution

  • Use the default L.GeoJSON object from Leaflet.

    
function loadSquare(){
    console.log("ok load the square");   
    L.geoJSON(data).addTo(map); // data = console.log(self_drawn.toGeoJSON())
}