[Leaflet] Layer Groups and Layers Control

by 1004lucifer

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>

CSS

html,body { width:100%; height:100%; margin:0; padding:0; }
#map { width:100%; height:100%; }

JavaScript

var mbAttr = '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>',
  mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

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 grayscale = L.tileLayer(mbUrl, {id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
  streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});


var map = L.map('map', {
  center: [39.73, -104.99],
  zoom: 10,
  layers: [grayscale, cities] // 디폴트로 보여질 레이어
});

var baseLayers = {
  "Grayscale": grayscale,
  "Streets": streets
};
var overlays = {
  "Cities": cities
};
L.control.layers(baseLayers, overlays).addTo(map);