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 baseMaps = {
  "地理院タイル": basemap_ct,
  "室蘭市空中写真": basemap_muroran
};

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

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

// 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":"...