# Leaflet Map Overlays

<br/>

## Map Overlays
* Use [layer groups](https://leafletjs.com/examples/layers-control/) to make a bunch of layers combined into a group to handle as one in your code

//setup map basic
var map = L.map("map").setView([51.505, -0.09], 13);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution:
    '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);


/*change marker icon*/
function iconImage(url, title) {
  let customIcon = {
    iconUrl: url,
    iconSize: [32, 32]
  };
  let myIcon = L.icon(customIcon);

  let iconOptions = {
    title: title,
    icon: myIcon
  };
  return iconOptions;
}
/*change marker icon end*/


function markerGroup(markersPos, url, title) {
  let arr = [];
  markersPos.forEach((item) => {
    const marker = L.marker([item[0], item[1]], iconImage(url, title));
    arr.push(marker);
  });
  return arr;
}


//add cctv markers group to the map
const cctvPos = [
  [51.505, -0.08],
  [51.501, -0.09],
  [51.5, -0.05]
];
let cctvOverLayer = L.layerGroup(markerGroup(cctvPos, url, 'CCTV'));
//remember to add actual url
cctvOverLayer.addTo(map);



//add eventListener to show/hide the layer
let showCCTV = true;
const cctvBtn = document.querySelector(".cctv-btn");
cctvBtn.addEventListener("click", toggleCCTVLayer);
function toggleCCTVLayer(){
  showCCTV = !showCCTV;
  if(showCCTV){
    cctvOverLayer.addTo(map); //show layer
  }else{
    cctvOverLayer.remove(map); //hide layer
  }
}

<br/><br/>

* There are two types of layer
- Base layer -> map figures
- Overlay -> markers

var baseMaps = {
    "OpenStreetMap": osm,
    "OpenStreetMap.HOT": osmHOT
};

var overlayMaps = {
    "Cities": cities
};

var parks = L.layerGroup([crownHill, rubyHill]);
var openTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: 'Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)'
});

layerControl.addBaseLayer(openTopoMap, "OpenTopoMap");
layerControl.addOverlay(parks, "Parks");

<br/><br/>

## Reference

[Leaflet-Layer Groups and Layers Control](https://leafletjs.com/examples/layers-control/)