D3 Examples - leaflet + OpenStreetMap

xxxxxxxxxx
 
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>leaflet+OpenStreetMapのテスト</title>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.1/leaflet.ie.css" />
    <![endif]-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.1/leaflet.min.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('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution : '&copy; <a href="https://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>
    