Leafletを使って地図に複数のマーカーを追加 (openstreetmap )

19751 ワード
新人プログラマ応援 地図 leaflet OpenStreetMap OpenStreetMap テキストリンク

LeafletはOpenStreetMapをベースに地図にアンカーなどを簡単に追加できるJavascriptライブラリです。店情報を地図に乗せたり、地域情報を表示したりするときに便利だと思います。

参考
http://leafletjs.com/index.html

日本地図に複数のアンカーをクラスター表示して見やすくしてみます。
最初は日本の緯度・経度が必要ですね。以下のサイトで住所を入力するだけで簡単に緯度・経度がわかります。私は渋谷駅を検索して使いました。
http://www.geocoding.jp/

まずは単純マーカーを追加してみます。

◆L.map('map').setView([35.664035, 139.698212], 18) ：緯度、経度、Zoom
◆bindPopup("マーカーをクリックしました。")：マーカーをクリックした時のPopup
◆L.marker([35.664035, 139.698212]).addTo(map) :地図にマーカー追加

test.html
<html>
<head>
<title>Leaflet</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<style type="text/css">
    #map { height: 500px; with: 500px}
</style>

</head>

<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script>

    var map = L.map('map').setView([35.664035, 139.698212], 15);

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

    map.addLayer(tiles);
    L.marker([35.664035, 139.698212]).bindPopup("マーカーをクリックしました。").addTo(map);
    L.marker([35.658182, 139.702043]).bindPopup("〒150-8319 東京都渋谷区渋谷２丁目２４ 渋谷駅").addTo(map);
</script>

</body>
</html>

次は複数のマーカーをクラスター表示します。。

※MarkerClustererとは、ラベルでマーカーを異なったクラスタに集めて、各クラスタにマーカーの数を表示するものです。

必要なライブラリは以下でダウンロードしてください。
https://github.com/Leaflet/Leaflet.markercluster
geoJsonData部分はPHPなどでJsonを取得したりするといいです。properties部分は自分のpropertiesを追加可能です。

test2.html

<html>
<head>
<title></title>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<link rel="stylesheet" href="screen.css" />
<link rel="stylesheet" href="css/MarkerCluster.css" />
<link rel="stylesheet" href="css/MarkerCluster.Default.css" />
<script src="js/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map"></div>
    <script type="text/javascript">
        var geoJsonData = {
            "type": "FeatureCollection", 
            "features": [
                { "type": "Feature", "id":"1", "properties": { "popup": "これは1番目です。"   }, "geometry": { "type": "Point", "coordinates": [139.768898, 35.672737] } },
                { "type": "Feature", "id":"2", "properties": { "popup": "これは2番目です。"   }, "geometry": { "type": "Point", "coordinates": [139.758496, 35.671062] } },
                { "type": "Feature", "id":"3", "properties": { "popup": "これは3番目です。"   }, "geometry": { "type": "Point", "coordinates": [139.768100, 35.672737] } },
                { "type": "Feature", "id":"4", "properties": { "popup": "これは4番目です。"   }, "geometry": { "type": "Point", "coordinates": [139.768200, 35.672737] } },
                { "type": "Feature", "id":"5", "properties": { "popup": "これは5番目です。"   }, "geometry": { "type": "Point", "coordinates": [139.768300, 35.672737] } },
                { "type": "Feature", "id":"6", "properties": { "popup": "これは6番目です。"   }, "geometry": { "type": "Point", "coordinates": [139.768300, 35.672737] } },
            ]
        };

        var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            maxZoom: 14,
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        });

        var map = L.map('map')
                .addLayer(tiles);

        var markers = L.markerClusterGroup();

        var geoJsonLayer = L.geoJson(geoJsonData, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.popup);
            }
        });
        markers.addLayer(geoJsonLayer);

        map.addLayer(markers);
        map.fitBounds(markers.getBounds());
    </script>
</body>
</html>

結果