2025-shino/omise.html at cbc6cdeaab585837fd6d49d29345814a2d9746b0

Fork: 1

Vongole_bianco / 2025-shino

forked from KoekiGameDesign/2025-shino

Find file

Newer

Older

2025-shino / omise.html

takeuchi shino on 5 Dec 1 KB Update omise.html

Raw Blame History

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>順路マップ</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>
  #map { height: 90vh; width: 100%; }
</style>
</head>
<body>

<h2>大学 → おすすめのお店(いろは蔵パーク)</h2>
<div id="map"></div>

<script>
(function() {
  "use strict";

  const univ = { lat: 38.893938809754154, lng: 139.81877014048092 };
  const shop = { lat: 38.91101944355851, lng: 139.83960158963376 };

  const map = L.map("map").setView([univ.lat, univ.lng], 15);

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; OpenStreetMap contributors"
  }).addTo(map);


  const osrmURL =
    `https://router.project-osrm.org/route/v1/driving/` +
    `${univ.lng},${univ.lat};${shop.lng},${shop.lat}` +
    `?overview=full&geometries=geojson`;

  fetch(osrmURL)
    .then(res => res.json())
    .then(data => {
      // 道路ルートのライン座標
      const coords = data.routes[0].geometry.coordinates;

      // OSRMは [経度, 緯度] ⇒ Leafletは [緯度, 経度] なので変換
      const latlngs = coords.map(c => [c[1], c[0]]);

      // polyline でルート描画
      L.polyline(latlngs, {
        color: "#FF66CC",
        weight: 7,
        opacity: 0.95
      }).addTo(map);

      // ルート全体が見えるように
      map.fitBounds(latlngs);
    })
    .catch(err => {
      console.error("OSRMルート取得エラー:", err);
      alert("ルート取得に失敗しました。");
    });


  L.marker([univ.lat, univ.lng])
    .addTo(map)
    .bindPopup("<b>東北公益文科大学</b>")
    .openPopup();

  L.marker([shop.lat, shop.lng])
    .addTo(map)
    .bindPopup("<b>いろは蔵パーク</b><br>営業時間：10:00〜20:00")
    .openPopup();

})();
</script>

</body>
</html>