Leaflet demo

For update marker position

by yairamon

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<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
	 	    });


iconColors = ["blue", "black", "grey", "yellow", "orange"	];

iconList = [];
for (i = 0; i < iconColors.length; i++)  {

	var icon = new L.Icon({
  	iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-' + iconColors[i] + '.png',
  	shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
	  iconSize: [25, 35],
	  iconAnchor: [12, 41],
	  popupAnchor: [1, -34],
	  shadowSize: [41, 41]
	});

	iconList.push(icon);

}


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

	 	// Script for adding marker on map click
	 	function onMapClick(e) {

	 	    var marker = L.marker(e.latlng, {
	 	        draggable: true,
            icon: iconList[0],
	 	        title: "Resource locatioasdasdadsn",
	 	        alt: "Resource Locationasas",
	 	        riseOnHover: true
	 	    }).addTo(map);
        
	 	       // .bindPopup(e.latlng.toString()).openPopup();

	 	    // Update marker on changing it's position
        
        marker.on("click", function(ev) {
       // debugger;
        //	alert(ev.latlng.toString());
          this.setOpacity(this.options.opacity - 0.01);
          for (i = 0; i < iconList.length; i++) {
          	if (this.options.icon == iconList[i]) {
            	this.setIcon(iconList[(i+1) % iconList.length]);
            	break;
            }
          }
       //   L.redraw();
        });
        
	 	    marker.on("dragend", function (ev) {

	 	        var...