/*=========================================================================================

    File Name: maps-leaflet.js

    Description: Leaflet Maps.

    ----------------------------------------------------------------------------------------

    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template

    Author: PIXINVENT

    Author URL: http://www.themeforest.net/user/pixinvent

==========================================================================================*/

$(document).ready(function () {

  $(".maps-leaflet-container").css("height", "450px");

  // initialize the basic map

  var mapsLeafletBasic = L.map('maps-leaflet-basic').setView([42.35, -71.08], 10);

  L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {

    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',

    maxZoom: 18,

  }).addTo(mapsLeafletBasic);



  // initialize the Marker map

  var mapsLeafletMarker = L.map('maps-leaflet-marker').setView([51.5, -0.09], 12);

  var marker = L.marker([51.5, -0.09]).addTo(mapsLeafletMarker);

  var circle = L.circle([51.508, -0.11], {

    color: 'red',

    fillColor: '#f03',

    fillOpacity: 0.5,

    radius: 500

  }).addTo(mapsLeafletMarker);

  var polygon = L.polygon([

    [51.509, -0.08],

    [51.503, -0.06],

    [51.51, -0.047]

  ]).addTo(mapsLeafletMarker);

  L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {

    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',

    maxZoom: 18,

  }).addTo(mapsLeafletMarker);



  // initialize the Dragable Marker map

  var mapsLeafletMarkerDragable = L.map('maps-leaflet-marker-dragable').setView([48.817152, 2.4550], 12);

  var mapsLeafletMarkerLoc = L.marker([48.817152, 2.4550], {

    draggable: 'true'

  }).addTo(mapsLeafletMarkerDragable);

  mapsLeafletMarkerLoc.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

  L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {

    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',

    maxZoom: 18,

  }).addTo(mapsLeafletMarkerDragable);



  // initialize the user location map

  var mapsLeafletUserLocation = L.map('maps-leaflet-user-location').setView([42.35, -71.08], 10);

  mapsLeafletUserLocation.locate({

    setView: true,

    maxZoom: 16

  });



  function onLocationFound(e) {

    var radius = e.accuracy;

    L.marker(e.latlng).addTo(mapsLeafletUserLocation)

      .bindPopup("You are within " + radius + " meters from this point").openPopup();

    L.circle(e.latlng, radius).addTo(mapsLeafletUserLocation);

  }

  mapsLeafletUserLocation.on('locationfound', onLocationFound);

  L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {

    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',

    maxZoom: 18,

  }).addTo(mapsLeafletUserLocation);



  // initialize the Cutom Icons map

  var mapsLeafletCustomIcons = L.map('maps-leaflet-custom-icons').setView([51.5, -0.09], 10);

  var customIconBlue = L.icon({

    iconUrl: '../../../app-assets/images/map/leaflet/customIcons/map-marker-blue.png',

    iconSize: [52, 52], // size of the icon

    iconAnchor: [22, 94], // point of the icon which will correspond to marker's location

    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor

  });

  var customIconPink = L.icon({

    iconUrl: '../../../app-assets/images/map/leaflet/customIcons/map-marker-pink.png',

    iconSize: [52, 52], // size of the icon

    iconAnchor: [22, 94], // point of the icon which will correspond to marker's location

    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor

  });

  L.marker([51.5, -0.09], {

    icon: customIconPink

  }).addTo(mapsLeafletCustomIcons);

  L.marker([51.4, -0.51], {

    icon: customIconBlue

  }).addTo(mapsLeafletCustomIcons);

  L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {

    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',

    maxZoom: 18,

  }).addTo(mapsLeafletCustomIcons);



  // initialize the GeoJSON map

  var mapsLeafletGeojson = L.map('maps-leaflet-geojson').setView([44.2669, -72.576], 3);

  var mapsLeafletGeojsoonUsState = L.geoJson(statesData).addTo(mapsLeafletGeojson);



  function getColor(d) {

    return d > 1000 ? '#800026' :

      d > 500 ? '#BD0026' :

      d > 200 ? '#E31A1C' :

      d > 100 ? '#FC4E2A' :

      d > 50 ? '#FD8D3C' :

      d > 20 ? '#FEB24C' :

      d > 10 ? '#FED976' :

      '#FFEDA0';

  }



  function style(feature) {

    return {

      fillColor: getColor(feature.properties.density),

      weight: 2,

      opacity: 1,

      color: 'white',

      dashArray: '3',

      fillOpacity: 0.7

    };

  }

  L.geoJson(statesData, {

    style: style

  }).addTo(mapsLeafletGeojson);

  L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {

    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',

    maxZoom: 18,

  }).addTo(mapsLeafletGeojson);



  // initialize the Layer Groups and Layers Control map

  var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),

    denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),

    aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),

    golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

  var cities = L.layerGroup([littleton, denver, aurora, golden]);

  var street = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {

      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',

      maxZoom: 18,

    }),

    watercolor = L.tileLayer('http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg', {

      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',

      maxZoom: 18,

    });

  var mapsLeafletGroupControl = L.map('maps-leaflet-groups-control', {

    center: [39.73, -104.99],

    zoom: 10,

    layers: [street, cities]

  });

  var baseMaps = {

    "Street": street,

    "Watercolor": watercolor

  };

  var overlayMaps = {

    "Cities": cities

  };

  L.control.layers(baseMaps, overlayMaps).addTo(mapsLeafletGroupControl);

  L.tileLayer('https://c.tile.osm.org/{z}/{x}/{y}.png', {

    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',

    maxZoom: 18,

  }).addTo(mapsLeafletGroupControl);

});

