I am trying to use an example of Layer Groups and Layers Control from https://leafletjs.com for my website. My code is as under. I want to use different colored icons for different layer groups.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layers Control Tutorial - Leaflet</title>
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.html" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="//unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
.leaflet-container {
height: 600px;
max-width: 100%;
max-height: 100%;
}
</style>
<style>
img.huechange { filter: hue-rotate(120deg); }
</style>
</head>
<body>
<div id='map'></div>
<script>
var eshed = L.layerGroup();
var BL = L.marker([20.5987450321997, 72.9344638067029]).bindPopup('ELS BL').addTo(eshed);
var BRC = L.marker([22.335715366084, 73.1705597206838]).bindPopup('ELS BRC').addTo(eshed);
var KYN = L.marker([19.2387335105271, 73.1443102673918]).bindPopup('ELS KYN').addTo(eshed);
var BSL = L.marker([21.0485611372791, 75.809485553333]).bindPopup('ELS BSL').addTo(eshed);
var AQ = L.marker([21.1179163293903, 79.082339374412]).bindPopup('ELS AQ').addTo(eshed);
var TKD = L.marker([28.5141853241027, 77.2896398520842]).bindPopup('ELS TKD').addTo(eshed);
var ET = L.marker([22.5974482434872, 77.7379869578423]).bindPopup('ELS ET').addTo(eshed);
var NKJ = L.marker([23.8014530465835, 80.4346860028409]).bindPopup('ELS NKJ').addTo(eshed);
var mbAttr = 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
var mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
var map = L.map('map', {
center: [23.06, 78.76],
zoom: 5,
layers: [osm, eshed]
});
var baseLayers = {
'OpenStreetMap': osm
};
var overlays = {
'Elect Loco Sheds': eshed
}
var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.');
var rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
var DLS = L.layerGroup([crownHill, rubyHill])
var rtm = L.marker([34.22, 74.93]).bindPopup('This is gda.');
var gda = L.marker([32.10, 76.52]).bindPopup('This is rtm.');
var dsl = L.layerGroup([rtm, gda])
var satellite = L.tileLayer(mbUrl, {id: 'mapbox/satellite-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
layerControl.addOverlay(DLS, 'DSL Loco Sheds');
layerControl.addOverlay(dsl, 'R/Rooms');
</script>
</body>
</html>
Tried a suggestion and added the following script to my code
var greenIcon = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-
shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
further modified layer group code as
var rtm = L.marker([34.22, 74.93], {icon: greenIcon} ).bindPopup('This is gda.');
var gda = L.marker([32.10, 76.52], {icon: greenIcon}).bindPopup('This is rtm.');
But it is not working. Please suggest solution.
