Geoman Import Geojson

by Stefano

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" style="height: 400px;"></div>
<br>
<button onclick="importGeo()">
Import
</button>

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);

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

function importGeo(){
  const feature = {"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-120.32999,47.431338],[-120.323638,47.402183],[-120.273685,47.419144],[-120.32999,47.431338]]]}};

  var geoLayer = L.geoJSON(feature, {
    style: function (feature) {
      return feature.properties.options;
    },
    pointToLayer: function(feature, latlng){
      switch (feature.properties.type) {
        case "marker": return new L.Marker(latlng);
        case "circle": return new L.Circle(latlng, feature.properties.options);
        case "circlemarker": return new L.CircleMarker(latlng, feature.properties.options);
      }
    }
  });

  geoLayer.getLayers().forEach((layer) => {	
    if (layer._latlng) {
      var latlng = layer.getLatLng();
    } else {
      var latlng = layer.getLatLngs();
    }
    switch (layer.feature.properties.type) {
      case "rectangle":
        new L.Rectangle(latlng,  layer.options).addTo(map);
        break;
      case "circle":
        console.log(layer.options)
        new L.Circle(latlng, layer.options).addTo(map);
        break;
      case "polygon":
        new L.Polygon(latlng, layer.options).addTo(map);
        break;
      case "polyline":
        new L.Polyline(latlng, layer.options).addTo(map);
        break;
      case "marker":
        new L.Marker(latlng, layer.options).addTo(map);
       ...