diff --git a/map4.js b/map4.js index 8712c08..a0e763c 100644 --- a/map4.js +++ b/map4.js @@ -185,14 +185,12 @@ selfMarker.addTo(map); } -// =================================== -// ピン生成(ステータス色ラベル付き) -// =================================== function createLabeledMarker(lat, lng, name, isSelf, status) { const pinUrl = isSelf ? "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png" : "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png"; + // ステータス色(丸バッジに使う) const statusColor = { "移動中": "#4caf50", "遅れます": "#ff9800", @@ -201,17 +199,28 @@ }[status || "移動中"]; const html = ` -
- -
${name}
-
+ +
${name}
+ + +
${status}
+ border-radius:50%; + margin-left:4px; + border:1px solid white; + box-shadow:0 0 3px rgba(0,0,0,0.3); + ">
`; @@ -219,12 +228,11 @@ icon: L.divIcon({ className: "custom-pin", html: html, - iconSize: [40, 60], - iconAnchor: [20, 60], + iconSize: [60, 30], + iconAnchor: [30, 30], }), }); } - // =================================== // 距離計算(修正版) // ===================================