Leaflet.js
出自福留子孫
示範程式(http://jendo.org/~游士賢/使用說明/jupyter/index.html)：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
// 設定地圖區塊的 ID，用以與 JavaScript 互動
#map_8d7547be8d8cb9285c28ef544dc96b9c {
position: relative; // 設定元素定位方式為相對定位
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
// 設定 Leaflet 地圖的字型大小為 1rem
.leaflet-container { font-size: 1rem; }
</style>
</head>
<body>
<div class="folium-map" id="map_8d7547be8d8cb9285c28ef544dc96b9c"></div>
</body>
<script>
// 建立一個地圖物件，並設定初始的座標位置、縮放層級、底圖 CRS 等屬性
var map_8d7547be8d8cb9285c28ef544dc96b9c = L.map(
"map_8d7547be8d8cb9285c28ef544dc96b9c",
{
center: [25.00620324010834, 121.468425037375],
crs: L.CRS.EPSG3857,
zoom: 15,
zoomControl: true,
preferCanvas: false,
}
);
// 建立一個地圖物件，並指定圖層資料源的URL、標記屬性等屬性，然後將圖層加入地圖
var tile_layer_5bebbb5fece2d596fd71c941dbb4ad9d = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'Data by \u0026copy; \u003ca target="_blank" href="http://openstreetmap.org"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca target="_blank" href="http://www.openstreetmap.org/copyright"\u003eODbL\u003c/a\u003e.',
detectRetina: false,
maxNativeZoom: 18,
maxZoom: 18,
minZoom: 0,
noWrap: false,
opacity: 1,
subdomains: "abc",
tms: false,
}
).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
// 建立一個圓形標記，並設定該標記的座標位置、填充顏色、邊框顏色、邊框粗細等屬性，再將其加入地圖物件
var circle_marker_030d721730ec5759fa41649b896ce3b8 = L.circleMarker(
[24.99819526441787, 121.47305833965504],
{
bubblingMouseEvents: true,
color: "blue",
dashArray: null,
dashOffset: null,
fill: true,
fillColor: "blue",
fillOpacity: 0.2,
fillRule: "evenodd",
lineCap: "round",
lineJoin: "round",
opacity: 1.0,
radius: 8,
stroke: true,
weight: 3,
}
).addTo(map_8d7547be8d8cb9285c28ef544dc96b9c);
// 建立一個彈出視窗，並設定該彈出視窗的最大寬度
var popup_0c6f68e7affe1987d052919274941dcb = L.popup({ maxWidth: "100%" });
// 建立一個 HTML 元素，並將其設為彈出視窗的內容，再將該內容加入彈出視窗
var html_5fa9a121de83f7c83e84d89cf3764f48 = $(
`<div id="html_5fa9a121de83f7c83e84d89cf3764f48" style="width: 100.0%; height: 100.0%;">板橋車站</div>`
)[0];
popup_0c6f68e7affe1987d052919274941dcb.setContent(
html_5fa9a121de83f7c83e84d89cf3764f48
);
// 將圓形標記與彈出視窗做綁定，當使用者點擊圓形標記時，會彈出該彈出視窗
circle_marker_d7d6ba893e87bd16ad516ab23a265471.bindPopup(
popup_0c6f68e7affe1987d052919274941dcb
);
</script>
</html>
