in-place Update Leaflet GeoJSON - Javascript Leaflet

Javascript examples for Leaflet:Configuration

  1. HOME
  2. Javascript
  3. Leaflet
  4. Configuration

Description

in-place Update Leaflet GeoJSON

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"> 
      <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
      <style id="compiled-css" type="text/css">

#map {/* ww w  .  j a  va 2s.  co  m*/
   height: 500px;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var map = L.map("map").setView([48.86, 2.35], 12),
   myGeoJsonLayerGroup = L.geoJson().addTo(map),
  currentID = 0;
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var addMarker = document.getElementById("addMarker");
var buttonsContainer = document.getElementById("buttonsContainer");
addMarker.addEventListener("click", addMarkerToGeoJsonLayerGroup);
function addMarkerToGeoJsonLayerGroup() {
   var newLayerGroup = L.layerGroup(); // Could be a newly created L.geoJSON() layer group.
  var newMarker = L.marker(getRandomLatLng()).addTo(newLayerGroup); // Could be newGeoJsonLayer.addData().
  newMarker.bindPopup("objectID " + currentID);
  myGeoJsonLayerGroup.addLayer(newLayerGroup);
  newMarker.openPopup();
  var newButton = document.createElement("button");
  newButton.innerHTML = "Remove objectID " + currentID;
  var newButton2 = document.createElement("button");
  newButton2.innerHTML = "Update objectID " + currentID;
  currentID += 1;
  newButton.addEventListener("click", function () {
     myGeoJsonLayerGroup.removeLayer(newLayerGroup);
    newButton.parentNode.removeChild(newButton.previousSibling); // button2
    newButton.parentNode.removeChild(newButton.nextSibling); // br
    newButton.parentNode.removeChild(newButton);
  });
  newButton2.addEventListener("click", function () {
     var popup = newMarker.getPopup();
    popup.setContent(popup.getContent() + " updated");
    newMarker.openPopup();
  });
  buttonsContainer.appendChild(newButton2);
  buttonsContainer.appendChild(newButton);
  buttonsContainer.appendChild(document.createElement("br"));
}
addMarkerToGeoJsonLayerGroup();
addMarkerToGeoJsonLayerGroup();
addMarkerToGeoJsonLayerGroup();
addMarkerToGeoJsonLayerGroup();
addMarkerToGeoJsonLayerGroup();
function getRandomLatLng() {
   return [
     48.86 + 0.1 * Math.random() - 0.05,
    2.35 + 0.2 * Math.random() - 0.1
  ];
}
    }

      </script> 
   </head> 
   <body> 
      <div id="map"></div> 
      <button id="addMarker"> Add a new feature </button> 
      <br> 
      <div id="buttonsContainer"> 
      </div>  
   </body>
</html>

Related Tutorials