Custom Icons Example

<script type="module"> import {LeafletMap, TileLayer, Marker, Icon} from 'leaflet'; const map = new LeafletMap('map').setView([51.5, -0.09], 13); new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); class LeafIcon extends Icon { static { this.setDefaultOptions({ shadowUrl: 'leaf-shadow.png', iconSize: [38, 95], shadowSize: [50, 64], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76] }); } } const greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}); const redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}); const orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'}); const mGreen = new Marker([51.5, -0.09], {icon: greenIcon}).bindPopup('I am a green leaf.').addTo(map); const mRed = new Marker([51.495, -0.083], {icon: redIcon}).bindPopup('I am a red leaf.').addTo(map); const mOrange = new Marker([51.49, -0.1], {icon: orangeIcon}).bindPopup('I am an orange leaf.').addTo(map); </script>