instance/index.html at 057fa8c1b3d3a528a0839910f80d4312c6ff2e21

Fork: 1
Mr_HARU109 / instance
Find file
Newer
Older
instance / index.html
Nakagawa.K on 7 Jun 2024 20 KB 追加
Raw Blame History
<!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>災害避難マップ</title>
  <link rel="stylesheet" href="leaflet/leaflet.css" type="text/css">



<meta name="description"  content="書籍「動くWebデザインアイディア帳」のサンプルサイトです">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--==============レイアウトを制御する独自のCSSを読み込み===============-->
  <link href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css" rel="stylesheet">
  <link href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/4-1-2/css/4-1-2.css" rel="stylesheet">








  <script src="leaflet/leaflet.js"></script>
   <style>
      #map {
        width: 95%;
        height: 700px;
        margin: auto;
      }
      @media screen and (max-width:480px)
    </style>
  </head>
  <body>


 <div id="splash">
    <div id="splash_text"></div>
  </div>
<!--==============JQuery読み込み===============-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script>
<!--IE11用※対応しなければ削除してください-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
<!--自作のJS-->
<script src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/4-1-2/js/4-1-2.js"></script>

  <h1><ruby><rb>災害避難</rb><rt>さいがいひなん</rt>マップ</ruby>( <ruby><rb>指定避難場所</rb><rt>していひなんばしょ</rt></ruby> )</h1>
  <link rel="stylesheet" href="css/moyou.css" type="text/css">
  <p>(現在)<script class="right" src="js/hizuke.js"></script></p>
  <div id="map"></div>
  <script class="right" src="js/iti.js"></script>
  <!-- <script src="js/kensaku.js"></script> -->
  <script src="js/basyo.js"></script>
  <h2><ruby><rb>避難場所</rb><rt>ひなんばしょ</rt></ruby></h2>
    <details>
<summary>
  <span class="open">琢成地域</span>
</summary>
 <table border="1" style="border-collapse: collapse">
<tr>
  <th bgcolor="#ffff80">地区</th>
  <th bgcolor="#ffff80">名称</th>
  <th bgcolor="#ffff80">所在地</th>
  <th bgcolor="#ffff80">収容人数</th>
  <th bgcolor="#ffff80">標高</th>
  <th bgcolor="#ffff80">電話番号</th>
  <th bgcolor="#ffff80">場所</th>
</tr>
<tr>
  <td bgcolor="#ffff80">琢成</td>
  <td>酒田西高等学校定時制校舎体育館</td>
  <td>北新町1-1-57</td>
  <td style="text-align: right">597人</td>
  <th style="text-align: right">12.5m</th>
  <th>0234-21-2311</th>
  <th><input type="button" onclick="buttonClick(0)" value="クリック" class="5"></th>
</tr>
<tr>
  <td bgcolor="#ffff80">琢成</td>
  <td bgcolor="#fdf5e6">琢成学区コミュニティ防災センター</td>
  <td bgcolor="#fdf5e6">北新町1-1-60</td>
  <td bgcolor="#fdf5e6" style="text-align: right">94人</td>
  <th bgcolor="#fdf5e6">11.0m</th>
  <th bgcolor="#fdf5e6">0234-26-7715</th>
  <th bgcolor="#fdf5e6"><input type="button" onclick="buttonClick(1)" value="クリック" class="6"></th>
</tr>
<tr>
  <td bgcolor="#ffff80">琢成</td>
  <td>琢成小学校</td>
  <td>栄町10-8</td>
  <td style="text-align: right">176人</td>
  <th>9.0m</th>
  <th>0234-22-9731</th>
  <th><input type="button" onclick="buttonClick(2)" value="クリック" class="8"></th>
</tr>
<tr>
  <td bgcolor="#ffff80">琢成</td>
  <td bgcolor="#fdf5e6">酒田市総合文化センター</td>
  <td bgcolor="#fdf5e6">中央西町2-59</td>
  <td bgcolor="#fdf5e6" style="text-align: right">593人</td>
  <th bgcolor="#fdf5e6">8.5m</th>
  <th bgcolor="#fdf5e6">0234-24-2992</th>
  <th bgcolor="#fdf5e6"><input type="button" onclick="buttonClick(3)" value="クリック" class="9"></th>
</tr>
</table>
</details>
  <h3><ruby>
<rb>参考文献</rb><rt>さんこうぶんけん</rt></ruby></h3>
<ruby>
  <a href="https://www.city.sakata.lg.jp/bousai/bousai/hinanjyo/hinanjyoichiran.html"><rb>酒田市指定緊急避難場所</rb><rt>さかたしていきんきゅうひなんしょ</rt></ruby><ruby><rb>・</rb><rt>・</rt></ruby><ruby><rb>指定避難所</rb><rt>していひなんじょ</rt></a>
</ruby>
<script>
  
          var map = L.map('map').setView([38.914544,139.836720], 14);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
      }).addTo(map);
          //現在地が取得できた場合の処理

    //現在地が取得できなかった場合の処理
    function gpsError(e) {
        alert("現在地を取得できませんでした。" + e.message);
    }
    //現在地の取得
    map.locate({setView: true, maxZoom: 13, timeout: 20000});
    //成功した場合
    map.on('locationfound', gpsSuccess);
    //失敗した場合          var map = L.map('map').setView([38.914544,139.836720], 14);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
      }).addTo(map);
          //現在地が取得できた場合の処理
    function gpsSuccess(e) {
        L.marker(e.latlng).addTo(map).bindPopup("現在地").openPopup();
    }
    //現在地が取得できなかった場合の処理
    function gpsError(e) {
        alert("現在地を取得できませんでした。" + e.message);
    }
    //現在地の取得
    map.locate({setView: true, maxZoom: 13, timeout: 20000});
    //成功した場合
    map.on('locationfound', gpsSuccess);
    //失敗した場合
    map.on('locationerror', gpsError);


  function buttonClick(number) {
    fetch('csv/iti.csv')
        .then((response) => {
            return response.text();
        })
        .then((data) => {
            let result = data.split(/\r?\n|\r/).map((e) => {
                return e.split(",");
            });
            // やりたい処理
            console.log(number);
            let arr = result[number+1];
            console.log(arr);
            map.setView([arr[1], arr[2]], 20);
        })
        .catch((error) => {
            console.log(error);
        });
}

var marker = L.marker([38.933417, 139.852083]).addTo(map);
marker.bindPopup("琢成:酒田西高等学校定時制校舎体育館",{autoClose:false}).openPopup();
var marker = L.marker([38.92280781,139.83369207]).addTo(map);
marker.bindPopup("琢成:琢成学区コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.922643067364,139.83802319639]).addTo(map);
marker.bindPopup("琢成:琢成小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.921252120864,139.83711846729]).addTo(map);
/*浜田*/
marker.bindPopup("浜田:浜田小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.91692347,139.84649282]).addTo(map);
marker.bindPopup("浜田:酒田南高等学校体育館",{autoClose:false}).openPopup();
var marker = L.marker([38.5504,139.5053]).addTo(map);
marker.bindPopup("浜田:浜田学区コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.55012,139.50437]).addTo(map);
/*若浜*/
marker.bindPopup("若浜:若浜小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.91464621,139.84918699]).addTo(map);
marker.bindPopup("若浜:第二中学校",{autoClose:false}).openPopup();
var marker = L.marker([38.9166422,139.8540773]).addTo(map);
marker.bindPopup("若浜:勤労者福祉 センター",{autoClose:false}).openPopup();
var marker = L.marker([38.910187,139.851521]).addTo(map);
marker.bindPopup("若浜:若浜学区コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.9136438,139.84821812]).addTo(map);
/*富士見*/
marker.bindPopup("富士見:富士見小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.552826,139.514509]).addTo(map);
marker.bindPopup("富士見:富士見学区コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.55087,139.51498]).addTo(map);
/*亀城*/
marker.bindPopup("亀城:亀ヶ崎小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.90606293,139.84285435]).addTo(map);
marker.bindPopup("酒田東高等学校体育館",{autoClose:false}).openPopup();
var marker = L.marker([38.54345,139.50303]).addTo(map);
marker.bindPopup("亀城:亀ヶ崎コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.902936,139.848130]).addTo(map);
/*港南*/
marker.bindPopup("港南:港南コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.907507,139.832370]).addTo(map);
/*松原*/
marker.bindPopup("松原:松原小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.900706,139.850571]).addTo(map);
marker.bindPopup("松原:第三中学校",{autoClose:false}).openPopup();
var marker = L.marker([38.901232,139.852384]).addTo(map);
marker.bindPopup("松原:松原コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.903687,139.850920]).addTo(map);
/*松陵*/
marker.bindPopup("松陵:松陵小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.931418,139.834462]).addTo(map);
marker.bindPopup("松陵:第一中学校",{autoClose:false}).openPopup();
var marker = L.marker([38.929377,139.835669]).addTo(map);
marker.bindPopup("松陵:酒田光陵高等学校体育館",{autoClose:false}).openPopup();
var marker = L.marker([38.933074,139.833818]).addTo(map);
marker.bindPopup("松陵:酒田市武道館",{autoClose:false}).openPopup();
var marker = L.marker([38.932565,139.833051]).addTo(map);
marker.bindPopup("松陵:松陵学区コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.931823,139.832531]).addTo(map);
/*泉*/
marker.bindPopup("泉:泉小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.931643,139.851494]).addTo(map);
marker.bindPopup("泉:第六中学校",{autoClose:false}).openPopup();
var marker = L.marker([38.928246,139.855201]).addTo(map);
marker.bindPopup("泉:酒田西高等学校体育館",{autoClose:false}).openPopup();
var marker = L.marker([38.933671,139.851092]).addTo(map);
marker.bindPopup("泉:泉学区コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.936550,139.844633]).addTo(map);
/*飛島*/
marker.bindPopup("飛島:旧飛島小・中学校",{autoClose:false}).openPopup();
var marker = L.marker([39.195865,139.558924]).addTo(map);
marker.bindPopup("飛島:とびしま総合センター",{autoClose:false}).openPopup();
var marker = L.marker([39.195877,139.559659]).addTo(map);
/*西荒瀬*/
marker.bindPopup("西荒瀬:西荒瀬小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.962525,139.851102]).addTo(map);
marker.bindPopup("西荒瀬:西荒瀬コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.962525,139.851102]).addTo(map);
marker.bindPopup("西荒瀬:酒田市特別支援学校体育館",{autoClose:false}).openPopup();
var marker = L.marker([38.954174,139.844370]).addTo(map);
/*新堀*/
marker.bindPopup("新堀:新堀小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.867923,139.877163]).addTo(map);
marker.bindPopup("新堀:新堀コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.868357,139.877114]).addTo(map);
/*広野*/
marker.bindPopup("広野:広野小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.846447,139.851869]).addTo(map);
marker.bindPopup("広野:酒田農村環境改善センター(広野コミュニティセンター)",{autoClose:false}).openPopup();
var marker = L.marker([38.843288,139.852728]).addTo(map);
/*浜中*/
marker.bindPopup("浜中:浜中小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.825922,139.783779]).addTo(map);
marker.bindPopup("浜中:浜中農村研修センター",{autoClose:false}).openPopup();
var marker = L.marker([38.825642,139.785243]).addTo(map);
marker.bindPopup("浜中:浜中コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.825333,139.784986]).addTo(map);
/*黒森*/
marker.bindPopup("黒森:黒森小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.851185,139.822864]).addTo(map);
marker.bindPopup("黒森:黒森コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.851139,139.817939]).addTo(map);
/*十坂*/
marker.bindPopup("十坂:十坂小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.877497,139.816472]).addTo(map);
marker.bindPopup("十坂:第四中学校",{autoClose:false}).openPopup();
var marker = L.marker([38.882158,139.834974]).addTo(map);
marker.bindPopup("十坂:十坂コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.878084,139.816577]).addTo(map);
/*宮野浦*/
marker.bindPopup("宮野浦:宮野浦小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.906902,139.816325]).addTo(map);
marker.bindPopup("宮野浦:国体記念体育館",{autoClose:false}).openPopup();
var marker = L.marker([38.893162,139.822118]).addTo(map);
marker.bindPopup("宮野浦:宮野浦学区コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.904718,139.814656]).addTo(map);
marker.bindPopup("宮野浦:酒田市公益研修センター",{autoClose:false}).openPopup();
var marker = L.marker([38.892352,139.819500]).addTo(map);
/*東平田*/
marker.bindPopup("東平田:東平田コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.923105,139.937727]).addTo(map);
/*中平田*/
marker.bindPopup("中平田:平田小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.918514,139.890193]).addTo(map);
marker.bindPopup("宮野浦:中平田コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.906058,139.894339]).addTo(map);
/*北平田*/
marker.bindPopup("北平田:北平田コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.931142,139.888503]).addTo(map);
/*上田*/
marker.bindPopup("上田:上田コミュニティ防災センター",{autoClose:false}).openPopup();
var marker = L.marker([38.943890,139.888750]).addTo(map);
/*本楯*/
marker.bindPopup("本楯:鳥海小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.962954,139.888304]).addTo(map);
marker.bindPopup("北部農民センター(本楯コミュニティセンター) ",{autoClose:false}).openPopup();
var marker = L.marker([38.967926,139.887291]).addTo(map);
/*南遊佐*/
marker.bindPopup("南遊佐:旧南遊佐小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.983240,139.890000]).addTo(map);
marker.bindPopup("南遊佐:南遊佐コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.982898,139.889855]).addTo(map);
/*観音寺*/
marker.bindPopup("観音寺:鳥海八幡中学校",{autoClose:false}).openPopup();
var marker = L.marker([38.968498,139.935962]).addTo(map);
marker.bindPopup("観音寺:八幡小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.974224,139.943864]).addTo(map);
marker.bindPopup("観音寺:八幡体育館",{autoClose:false}).openPopup();
var marker = L.marker([38.970262,139.943574]).addTo(map);
marker.bindPopup("観音寺:修道館",{autoClose:false}).openPopup();
var marker = L.marker([38.970220,139.942775]).addTo(map);
marker.bindPopup("観音寺:八幡タウンセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.971100,139.942174]).addTo(map);
/*一條*/
marker.bindPopup("一條:一條小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.956902,139.927765]).addTo(map);
marker.bindPopup("一條:一條コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.963522,139.933977]).addTo(map);
/*大沢*/
marker.bindPopup("大沢:大沢コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.964765,139.997545]).addTo(map);
marker.bindPopup("大沢:曙自治会館",{autoClose:false}).openPopup();
var marker = L.marker([38.970208,140.032876]).addTo(map);
marker.bindPopup("大沢:青沢克雪管理センター ",{autoClose:false}).openPopup();
var marker = L.marker([38.967488,140.047172]).addTo(map);
/*日向*/
marker.bindPopup("日向:日向コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.993247,140.000174]).addTo(map);
marker.bindPopup("日向:鳥海高原家族旅行村",{autoClose:false}).openPopup();
var marker = L.marker([39.034420,140.034994]).addTo(map);
marker.bindPopup("日向:湯ノ台温泉鳥海山荘",{autoClose:false}).openPopup();
var marker = L.marker([39.030770,140.033009]).addTo(map);
marker.bindPopup("日向:滝の里ふれあい館",{autoClose:false}).openPopup();
var marker = L.marker([38.998513,140.040343]).addTo(map);
/*南部*/
marker.bindPopup("南部:南部コミュニティセンター（旧地見興屋小学校)",{autoClose:false}).openPopup();
var marker = L.marker([38.812823,139.995464]).addTo(map);
/*山寺・松嶺*/
marker.bindPopup("山寺・松嶺:松山小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.849092,139.962317]).addTo(map);
marker.bindPopup("山寺・松嶺:山寺コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.849083,139.961459]).addTo(map);
marker.bindPopup("山寺・松嶺:松嶺コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.858679,139.954614]).addTo(map);
marker.bindPopup("山寺・松嶺:松山体育館",{autoClose:false}).openPopup();
var marker = L.marker([38.858846,139.962285]).addTo(map);
marker.bindPopup("山寺・松嶺:松山農村環境改善センター",{autoClose:false}).openPopup();
var marker = L.marker([38.857568,139.953745]).addTo(map);
/*内郷*/
marker.bindPopup("内郷:旧内郷小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.875265,139.951106]).addTo(map);
marker.bindPopup("内郷:内郷コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.875227,139.951819]).addTo(map);
/*田沢*/
marker.bindPopup("田沢:小林温泉",{autoClose:false}).openPopup();
var marker = L.marker([38.833365,140.010302]).addTo(map);
marker.bindPopup("田沢:やまもと農村交流センター",{autoClose:false}).openPopup();
var marker = L.marker([38.847571,140.008146]).addTo(map);
marker.bindPopup("田沢:田沢コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.872676,139.992508]).addTo(map);
marker.bindPopup("田沢:旧田沢小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.873711,139.991409]).addTo(map);
/*東陽*/
marker.bindPopup("東陽:ひらた生涯学習センター",{autoClose:false}).openPopup();
var marker = L.marker([38.894277,139.980111]).addTo(map);
/*郡鏡・山谷*/
marker.bindPopup("郡鏡・山谷:郡鏡・山谷コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.902952,139.923983]).addTo(map);
/*南平田*/
marker.bindPopup("南平田:南平田コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.887116,139.925732]).addTo(map);
marker.bindPopup("南平田:平田農村環境改善センター",{autoClose:false}).openPopup();
var marker = L.marker([38.887012,139.925968]).addTo(map);
marker.bindPopup("南平田:南平田小学校",{autoClose:false}).openPopup();
var marker = L.marker([38.889642,139.924353]).addTo(map);
marker.bindPopup("南平田:東部中学校",{autoClose:false}).openPopup();
var marker = L.marker([38.889776,139.931638]).addTo(map);
marker.bindPopup("南平田:ひらたタウンセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.889129,139.927100]).addTo(map);
marker.bindPopup("南平田:ひらたＢ＆Ｇ海洋センター",{autoClose:false}).openPopup();
var marker = L.marker([38.889262,139.928098]).addTo(map);
/*砂越・砂越緑町*/
marker.bindPopup("砂越・砂越緑町:砂越・砂越緑町コミュニティセンター",{autoClose:false}).openPopup();
var marker = L.marker([38.891371,139.910980]).addTo(map);
</script>
  </body>
  </html>