Skip to content

Instantly share code, notes, and snippets.

@katsumitakano

katsumitakano/index.html

Last active December 31, 2015 05:49
Show Gist options
  • Save katsumitakano/7943247 to your computer and use it in GitHub Desktop.
Save katsumitakano/7943247 to your computer and use it in GitHub Desktop.
Download ZIP
leaflet + OpenStreetMap
Raw
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>leaflet+OpenStreetMapのテスト</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<style type="text/css">
#map {
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// 位置とズームを決めてマップを描画
var map = L.map('map',{
center:[35.40, 139.50],
zoom: 13
});
// OpenStreetMapを使うためのおまじない
var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution : '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
tileLayer.addTo(map);
// 指定した位置にマーカーを置く
var mapMarker = L.marker([35.40, 139.50]);
mapMarker.addTo(map);
mapMarker.bindPopup('ここですよ！');
mapMarker.openPopup();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment