Leaflet demo

For update marker position

by Vignesh Gopalakrishnan

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://cdn.rawgit.com/jieter/Leaflet.layerscontrol-minimap/gh-pages/control.layers.minimap.css">
<script src="https://cdn.rawgit.com/jieter/Leaflet.layerscontrol-minimap/gh-pages/L.Control.Layers.Minimap.js"></script>
<div id="map"></div>

CSS

#map {
    height: 500px;
    width: 100%;
}

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
	 	    });
        
var overlays = {

    'FeatureGroup': L.featureGroup([
        L.marker([42, -2]),
        L.marker([43, -3]),
        L.marker([44, -4]),
        L.marker([45, -5]),
        L.marker([46, -6]),
        L.polyline([[42, -2], [46, -6]]),
        L.circle([44, -4], 240000, {
            color: '#000fff'
        })
    ]),

    'LayerGroup': L.layerGroup([
        L.marker([52, 2]),
        L.marker([53, 3]),
        L.marker([54, 4]),
        L.marker([55, 5]),
        L.marker([56, 6]),
        L.polyline([[52, 2], [56, 6]]),
        L.circle([54, 4], 240000, {
            color: '#fff000'
        })
    ]),

};

var baseLayerControl ={'osm':osm} ;
	 	// 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);
    var layersControl = L.control.layers.minimap(baseLayerControl,overlays, {
    collapsed: false
}).addTo(map);