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('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  attribution: attribution_ct
});

// 農研機構
var attribution_rapid = '<a href="http://www.city.muroran.lg.jp/main/org2260/odlib.php" target="_blank">農研機構</a>';

// 迅速測図タイルおよび出典
var basemap_rapid = L.tileLayer('http://habs.dc.affrc.go.jp/rapid16/{z}/{x}/{y}.png', {
  attribution: attribution_rapid,
  tms: true
});


// 土壌タイルおよび出典
var basemap_soil = L.tileLayer('http://soil-inventory.dc.affrc.go.jp/tile/figure/{z}/{x}/{y}.png', {
  attribution: attribution_rapid
});


// 地質タイルおよび出典
var basemap_geol = L.tileLayer('https://gbank.gsj.jp/seamless/tilemap/basic/g/{z}/{y}/{x}.png', {
  attribution: attribution_rapid
});

// 地図選択
var baseMaps = {
  "地理院タイル": basemap_ct,
  "迅速測図": basemap_rapid,
  "土壌図": basemap_soil,
  "地質図": basemap_geol
};

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

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