leafletを鍛える。その38

概要

leafletを鍛えてみた。
geojson、見つけたのでやってみた。

参考にしたページ

写真

サンプルコード

var map = L.map('map').setView([38.0, 140.0], 10);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; ' + mapLink + ' Contributors',
  maxZoom: 18,
}).addTo(map);

d3.json("https://raw.githubusercontent.com/murakami0923/bear-map-web-sapporo/refs/heads/main/public/data/bears.geojson", function(error, data) {
  var markers = L.markerClusterGroup();
	var geoJsonLayer = L.geoJson(data, {
  	onEachFeature: function(feature, layer) {
	  	layer.bindPopup(feature.properties.datetime);
	  }
	});
	markers.addLayer(geoJsonLayer);
	map.addLayer(markers);
	map.fitBounds(markers.getBounds());
});

成果物

以上。