JSFiddle - React, Tailwind, and code Playground

by wata909

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<div id="map"></div>

CSS

#map {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    border: 2px solid blue;
}

JavaScript

// STEP 2: 室蘭市空中写真追加  -------------------------------------
// これまで入力した部分を消して、以下をペースト
// 地理院タイル 出典
var attribution_ct = '<a href="http://www.gsi.go.jp">国土地理院</a> <a href="http://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>';

// 地理院標準タイルおよび出典
var basemap_ct = L.tileLayer( 'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',{attribution: attribution_ct});

// 室蘭市オープンデータ出典
var attribution_muroran = '<a href="http://www.city.muroran.lg.jp/main/org2260/odlib.php" target="_blank">室蘭市オープンデータ</a>';

// 室蘭市空中写真タイルおよび出典
var basemap_muroran = L.tileLayer('http://habs.dc.affrc.go.jp/FOSS4G/muroran_tile/{z}/{x}/{y}.png', {attribution: attribution_muroran, tms: true});

// 地理院タイル・室蘭市空中写真を用いた地図の生成
var map = L.map('map', {
    layers:　[basemap_ct, basemap_muroran],
    center: [42.317432,140.976820],
    zoom: 11
});

// 地理院タイル・室蘭空中写真の追加
var baseMaps = {
  "地理院タイル": basemap_ct,
  "室蘭市空中写真": basemap_muroran
};

// 選択コントロールの追加
L.control.layers(baseMaps).addTo(map);

// STEP 3: 避難所geojson追加  -------------------------------------
// これまで入力した部分の下に、以下を追加
// geojsonファイルをテキストエディタで開いて、以下にペースト
var geostring = '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"FID":0,"施設名称":"絵鞆町会館","住所":"室蘭市絵鞆町1-11-12","収容人数":61,"トイレ":"○","身障トイレ":0,"洗面":1,"自家発電装":" ","入浴設備":" ","EV":" ","避難場所表":"○"},"geometry":{"type":"Point","coordinates":[140.938748,42.336989]}},{"type":"Feature","properties":{"FID":1,"施設名称":"エンルムマリーナ室蘭センターハウス","住所":"室蘭市絵鞆町4-2-14","収容人数":80,"トイレ":"○","身障トイレ":1,"洗面":1,"自家発電装":" ","入浴設備":"○","EV":" ","避難場所表":" "},"geometry":{"type":"Point","coordinates":[140.940725,42.340472]}},{"type":"Feature","properties":{"FID":2,"施設名称":"特養老人ホームエンルムハイツ","住所":"室蘭市祝津町3-16-32","収容人数":54,"トイレ":"○","身障トイレ":1,"洗面":2,"自家発電装":" ","入浴設備":"○","EV":"○","避難場所表":" "},"geometry":{"type":"Point","coordinates":[140.9436,42.333536]}},{"type":"Feature","properties":{"FID":3,"施設名称":"祝津町会館","住所":"室蘭市祝津町4-4-2","収容人数":48,"トイレ":"○","身障トイレ":0,"洗面":0,"自家発電装":" ","入浴設備":" ","EV":"...