/**
 * Theme: Dastone - Bootstrap 5 Responsive Admin Dashboard
 * Author: Mannatthemes
 * File: Leaflet Js
 */
 var mymap = L.map('Leaf_default').setView([51.505, -0.09], 13);

 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
     maxZoom: 18,
     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
         '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
         'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
     id: 'mapbox/streets-v11'
 }).addTo(mymap);

 L.marker([51.5, -0.09]).addTo(mymap)
     .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

 L.circle([51.508, -0.11], 500, {
     color: 'red',
     fillColor: '#f03',
     fillOpacity: 0.5
 }).addTo(mymap).bindPopup("I am a circle.");

 L.polygon([
     [51.509, -0.08],
     [51.503, -0.06],
     [51.51, -0.047]
 ]).addTo(mymap).bindPopup("I am a polygon.");


 var popup = L.popup();

 function onMapClick(e) {
     popup
         .setLatLng(e.latlng)
         .setContent("You clicked the map at " + e.latlng.toString())
         .openOn(mymap);
 }

 mymap.on('click', onMapClick);


 //  Map -2

 var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 osm = new L.TileLayer(osmUrl, {maxZoom: 18});

 var latLng = new L.LatLng(54.18815548107151, -7.657470703124999);

 var bounds1 = new L.LatLngBounds(new L.LatLng(54.559322, -5.767822), new L.LatLng(56.1210604, -3.021240));
 var bounds2 = new L.LatLngBounds(new L.LatLng(56.56023925701561, -2.076416015625), new L.LatLng(57.01158038001565, -0.9777832031250001));
 var bounds3;

 var map = new L.Map('Bounds_Extend', {
     layers: [osm],
     center: bounds1.getCenter(),
     zoom: 7
 });

 var rectangle1 = new L.Rectangle(bounds1);
 var rectangle2 = new L.Rectangle(bounds2);
 var rectangle3;

 var marker = new L.Marker(latLng);

 map.addLayer(rectangle1).addLayer(rectangle2).addLayer(marker);





 function boundsExtendBounds() {
     if  (rectangle3) {
         map.removeLayer(rectangle3);
         rectangle3 = null;
     }
     if (bounds3) {
         bounds3 = null;
     }
     bounds3 = new L.LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
     bounds3.extend(bounds2);
     rectangle3 = new L.Rectangle(bounds3, {
         color: "#ff0000",
         weight: 1,
         opacity: 1,
         fillOpacity: 0
     });

     map.addLayer(rectangle3);
 }

 function boundsExtendLatLng() {
     if  (rectangle3) {
         map.removeLayer(rectangle3);
         rectangle3 = null;
     }
     if (bounds3) {
         bounds3 = null;
     }
     bounds3 = new L.LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
     bounds3.extend(marker.getLatLng());
     rectangle3 = new L.Rectangle(bounds3, {
         color: "#ff0000",
         weight: 1,
         opacity: 1,
         fillOpacity: 0
     });

     map.addLayer(rectangle3);
 }

// Map-3


var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
         osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});

     var poly_points = [
         [39.70348880963439, -104.98603820800781],
         [39.69926245589766, -104.95582580566406],
         [39.67918374111695, -104.94483947753906],
         [39.663856582926165, -104.95307922363281],
         [39.66279941218785, -104.98672485351562],
         [39.70348880963439, -104.98603820800781]
     ];

     var path_points = [
         [39.72567292003209, -104.98672485351562],
         [39.717222671644635, -104.96612548828124],
         [39.71405356154611, -104.95513916015625],
         [39.70982785491674, -104.94758605957031],
         [39.70454535762547, -104.93247985839844],
         [39.696092520737224, -104.91874694824217],
         [39.687638648548635, -104.90432739257812],
         [39.67759833072648, -104.89471435546875]
     ];

     for (var i = 0, latlngs = [], len = path_points.length; i < len; i++) {
         latlngs.push(new L.LatLng(path_points[i][0], path_points[i][1]));
     }
     var path = new L.Polyline(latlngs);

     for (var i = 0, latlngs2 = [], len = poly_points.length; i < len; i++) {
         latlngs2.push(new L.LatLng(poly_points[i][0], poly_points[i][1]));
     }
     var poly = new L.Polygon(latlngs2);

     var map = new L.Map('Vector_bounds', {
         layers: [osm],
         center: new L.LatLng(39.69596043694606, -104.95084762573242),
         zoom: 12
     });

     //map.fitBounds(new L.LatLngBounds(latlngs));

     //map.addLayer(new L.Marker(latlngs[0]));
     //map.addLayer(new L.Marker(latlngs[len - 1]));

     map.addLayer(path);
     map.addLayer(poly);

     path.bindPopup("Hello world");
     
     // Map-4


     var osmUrl = 'https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
         osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
         osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});

     var map = L.map('Moov_Canvas', {preferCanvas: true})
             .setView([50.5, 30.51], 15)
             .addLayer(osm);

     var markers = [];
     var colors = ['red', 'green', 'blue', 'purple', 'cyan', 'yellow'];
     for (var i = 0; i < 20; i++) {
         markers.push(L.circleMarker([50.5, 30.51], {color: colors[i % colors.length]}).addTo(map));
     }

     function update() {
         var t = new Date().getTime() / 1000;
         markers.forEach(function(marker, i) {
             var v = t * (1 + i / 10) + (12.5 * i) / 180 * Math.PI;
             marker.setLatLng([
                 50.5 + (i % 2 ? 1 : -1) * Math.sin(v) * 0.005,
                 30.51 + (i % 3 ? 1 : -1) * Math.cos(v) * 0.005,
                 ]);
         });

         L.Util.requestAnimFrame(update);
     }

     update();
     
     // Map-5


     var map = L.map('Array_Map', {
         center: [20, 20],
         zoom: 3,
         preferCanvas: true
     });
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         minZoom: 1,
         maxZoom: 17,
         label: 'open street map'
     }).addTo(map);
     var points = [
                     [0, 0],
                     [0, 42],
                     [42, 42],
                     [0, 0]
             ];
             L.polygon([points, []], {dashArray: '5, 5'}).addTo(map);
             L.circleMarker([42, 0], {color: 'red'}).addTo(map);


             // Map-6


             var map = L.map('V_Simple');
     
     map.setView([51.505, -0.09], 13);

     var marker = L.marker([51.5, -0.09])
         .bindPopup("<b>Hello world!</b><br />I am a popup.")
         .addTo(map);

     var circle = L.circle([51.508, -0.11], 500, {color: '#f03', opacity: 0.7})
         .bindPopup("I am a circle.")
         .addTo(map);

     var polygon = L.polygon([
         [51.509, -0.08],
         [51.503, -0.06],
         [51.51,  -0.047]])
         .bindPopup("I am a polygon.")
         .addTo(map);

     var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
         osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}).addTo(map);
 