Skip to content

Instantly share code, notes, and snippets.

@iorionda

iorionda/fuji.html

Created September 11, 2017 09:25
Show Gist options
  • Save iorionda/d1096d477836446d5f150959b694faef to your computer and use it in GitHub Desktop.
Save iorionda/d1096d477836446d5f150959b694faef to your computer and use it in GitHub Desktop.
Download ZIP
leaflet.js のお試し
Raw
fuji.html
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8' />
<title>leaflet example 01 OpenSterrtMap</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map').setView([35.360556, 138.727778], 15);
//OSMレイヤー追加
L.tileLayer(
'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
{
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
maxZoom: 18,
}
).addTo(map);
var marker = L.marker([35.360556, 138.727778]).bindPopup('<h1>剱岳はここだ</h1>').addTo(map)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment