Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

335
Views
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

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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())
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!