JSFiddle - React, Tailwind, and code Playground

by e61983

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" style="width:95vw;height:95vh" />

CSS

.my-div-icon-wrapper div{
  width: 100px;
  background-color: #060390;
  color: #eee;
  text-align: center;
}

JavaScript

var map = L.map('map').setView([34.985851028839406, 135.75788488621308], 10);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}',
  {
    foo: 'bar', 
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(map);
  
let layer1 = L.layerGroup([
    L.marker([35.04074994371372, 135.72932367775914]),
    L.marker([34.97374817523019, 135.77195253085293]),
    L.marker([34.99936852552379, 135.7854861479551])
]).addTo(map)

var myIcon = L.icon({
    iconUrl: 'marker.png',
    iconSize: [100, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
    shadowUrl: 'my-icon-shadow.png',
    shadowSize: [68, 95],
    shadowAnchor: [22, 94]
});

var myDivIcon = L.divIcon({
    className:'my-div-icon-wrapper',
    html:`<div>這是 Div Icon </div>`
});

let layer2 = L.layerGroup([
    L.marker([34.70432671595862, 135.50096236284378], { icon: myIcon }),
    L.marker([34.68985107822455, 135.5253549268327], { icon: myDivIcon })
]).addTo(map);

var latlngs = [
    [35.02537491062854, 135.7438607946139],
    [34.88948810597932, 135.8076289149232],
    [34.961035819215525, 135.65613226663768],
    [34.976863645786004, 135.82695459531024],
    [34.88036360232042, 135.7002729085305],
    [35.02537491062854, 135.7438607946139],
];

let layer3= L.layerGroup([
    L.polyline(latlngs, {color: 'red'})
]).addTo(map);

let controller = L.control.layers().addTo(map);
controller.addOverlay(layer1,"Marker");
controller.addOverlay(layer2,"自定的Marker");
controller.addOverlay(layer3,"封印陣");
controller.expand();