ksasao/eki_map.html

## eki_map.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>駅一覧</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    body {
      margin: 0;
    }

    #map {
      height: 100vh;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script>
    var initialCenter = [37, 138];
    var initialZoom = 7;
    var stations = [ // 駅名の先頭に*を付けると、特別な駅として赤色で表示されます。
      '東京', '品川', '新横浜', '小田原', '熱海', '三島', '新富士', '静岡', '掛川', '浜松', '豊橋', '三河安城', '名古屋', '岐阜羽島', '米原', '京都', '新大阪',
      '清水', '富士', '富士宮', '内船', '*身延',
      '桑名', '四日市', '鈴鹿', '津', '松阪', '多気', '三瀬谷', '紀伊長島', '*尾鷲'];
    const searchArea = {
      latMin: 33.0,
      latMax: 37.5,
      lonMin: 134.5,
      lonMax: 141.0
    };

    // 駅名から緯度と経度を検索する関数を定義します。
    function findCoordinates(stationName, data, area) {
      var isSpecialStation = stationName.startsWith('*');
      if (isSpecialStation) {
        stationName = stationName.substring(1);
      }
      for (var i = 0; i < data.length; i++) {
        if (data[i].name === stationName &&
          data[i].lat >= area.latMin &&
          data[i].lat <= area.latMax &&
          data[i].lon >= area.lonMin &&
          data[i].lon <= area.lonMax) {
          var color = isSpecialStation ? 'red' : 'blue';
          return [data[i].lat, data[i].lon, color];
        }
      }
      return null;
    }

    fetch('./stations.csv') // 駅メモマップ2と同じ形式の駅、緯度経度データを読み込みます
      .then(response => response.text())
      .then(data => {
        // CSVデータを行ごとの配列に変換します。
        var rows = data.split('\n');

        // 各行をさらにカンマで分割し、オブジェクトの配列に変換します。
        var data = rows.map(function(row) {
          var columns = row.split(',');
          return {
            id: columns[0],
            name: columns[1],
            lat: parseFloat(columns[2]),
            lon: parseFloat(columns[3]),
            unknown: parseInt(columns[4], 10)
          };
        });
        // 地図を初期化する
        var map = L.map('map').setView(initialCenter, initialZoom);

        // 地図のタイルレイヤーを設定する
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // 長方形を描画する
        L.rectangle([
          [searchArea.latMin, searchArea.lonMin],
          [searchArea.latMax, searchArea.lonMax]
        ], {
          color: 'white',
          weight: 1,
          fillOpacity: 0.1, // 長方形の内側の透明度を調整
          opacity: 0.8 // 長方形の枠の透明度を調整
        }).addTo(map);

        // 各座標にピンを置く
        for (var i = 0; i < stations.length; i++) {
          var coordinates = findCoordinates(stations[i], data, searchArea);
          if (coordinates) {
            var marker = L.marker([coordinates[0], coordinates[1]], {
              icon: L.icon({
                iconUrl: 'http://maps.google.com/mapfiles/ms/icons/' + coordinates[2] + '-dot.png',
                iconSize: [32, 32],
                iconAnchor: [16, 32]
              })
            });
            marker.addTo(map);
          }
        }
      })
      .catch(error => console.error('Error:', error));
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>駅一覧</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
	<style>
	body {
	margin: 0;
	}

	#map {
	height: 100vh;
	width: 100%;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
	<script>
	var initialCenter = [37, 138];
	var initialZoom = 7;
	var stations = [ // 駅名の先頭に*を付けると、特別な駅として赤色で表示されます。
	'東京', '品川', '新横浜', '小田原', '熱海', '三島', '新富士', '静岡', '掛川', '浜松', '豊橋', '三河安城', '名古屋', '岐阜羽島', '米原', '京都', '新大阪',
	'清水', '富士', '富士宮', '内船', '*身延',
	'桑名', '四日市', '鈴鹿', '津', '松阪', '多気', '三瀬谷', '紀伊長島', '*尾鷲'];
	const searchArea = {
	latMin: 33.0,
	latMax: 37.5,
	lonMin: 134.5,
	lonMax: 141.0
	};

	// 駅名から緯度と経度を検索する関数を定義します。
	function findCoordinates(stationName, data, area) {
	var isSpecialStation = stationName.startsWith('*');
	if (isSpecialStation) {
	stationName = stationName.substring(1);
	}
	for (var i = 0; i < data.length; i++) {
	if (data[i].name === stationName &&
	data[i].lat >= area.latMin &&
	data[i].lat <= area.latMax &&
	data[i].lon >= area.lonMin &&
	data[i].lon <= area.lonMax) {
	var color = isSpecialStation ? 'red' : 'blue';
	return [data[i].lat, data[i].lon, color];
	}
	}
	return null;
	}

	fetch('./stations.csv') // 駅メモマップ2と同じ形式の駅、緯度経度データを読み込みます
	.then(response => response.text())
	.then(data => {
	// CSVデータを行ごとの配列に変換します。
	var rows = data.split('\n');

	// 各行をさらにカンマで分割し、オブジェクトの配列に変換します。
	var data = rows.map(function(row) {
	var columns = row.split(',');
	return {
	id: columns[0],
	name: columns[1],
	lat: parseFloat(columns[2]),
	lon: parseFloat(columns[3]),
	unknown: parseInt(columns[4], 10)
	};
	});
	// 地図を初期化する
	var map = L.map('map').setView(initialCenter, initialZoom);

	// 地図のタイルレイヤーを設定する
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	// 長方形を描画する
	L.rectangle([
	[searchArea.latMin, searchArea.lonMin],
	[searchArea.latMax, searchArea.lonMax]
	], {
	color: 'white',
	weight: 1,
	fillOpacity: 0.1, // 長方形の内側の透明度を調整
	opacity: 0.8 // 長方形の枠の透明度を調整
	}).addTo(map);

	// 各座標にピンを置く
	for (var i = 0; i < stations.length; i++) {
	var coordinates = findCoordinates(stations[i], data, searchArea);
	if (coordinates) {
	var marker = L.marker([coordinates[0], coordinates[1]], {
	icon: L.icon({
	iconUrl: 'http://maps.google.com/mapfiles/ms/icons/' + coordinates[2] + '-dot.png',
	iconSize: [32, 32],
	iconAnchor: [16, 32]
	})
	});
	marker.addTo(map);
	}
	}
	})
	.catch(error => console.error('Error:', error));
	</script>
	</body>

	</html>