More than 3 years have passed since last update.

leafletのテスト

JavaScript

Posted at 2020-01-10

leafletdemo4_marker.html

<!DOCTYPE html>
<html>
	<head>
		<title>Leaflet Demo4</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
		<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
		<style type="text/css">
		<!--
			#mapid { height: 400px; width: 600px}
		-->
		</style>
	</head>
	<body>
		<div id="mapid"></div>

		<script>
			var mymap = L.map('mapid').setView([35.7102, 139.8132], 15);

			L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				maxZoom: 18,
				attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
			}).addTo(mymap);

			var marker = L.marker([35.7101, 139.8107]).addTo(mymap);
			marker.bindPopup("<p>popup1</p><p>地図表示時に一緒に表示されます。</p>").openPopup();

			var marker2 = L.marker([35.7121, 139.8207]).addTo(mymap);
			var popup = L.popup();
			function onMarker2Click(e) {
				popup
				.setLatLng(e.latlng)
				.setContent("<p>popup2</p><p>clickで表示されます。</p>" + e.latlng.toString())
				.openOn(mymap);
			}
			mymap.on('click', onMarker2Click);

		</script>
	</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up