dayjournal | Leaflet #023

Leafletで経路探索するためには、OpenStreetMapを利用した「Leaflet Routing Machine」と言うプラグインが便利です。


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Leaflet Sample</title>

        <script src="./Library/leaflet-0.7.3/leaflet.js"></script>
        <link href="./Library/leaflet-0.7.3/leaflet_min.css" rel="stylesheet"/>

        <script src="./plugin/leaflet-routing-machine/dist/leaflet-routing-machine.min.js"></script>
        <link href="./plugin/leaflet-routing-machine/dist/leaflet-routing-machine.css" rel="stylesheet"/>

        <link href="./css/stylesheet.css" rel="stylesheet"/>

    </head>
    <body>

        <div id="map"></div>

        <script src="./js/script.js"></script>

    </body>
</html>


html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}



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

var map = L.map('map', {
    center: [35.6800405, 139.7601591],
    zoom: 15,
    zoomControl: false,
    layers: [o_std]
});

L.Routing.control({
    waypoints: [
        L.latLng(35.676683,139.7558916),
        L.latLng(35.6852696,139.7630878)
    ],
}).addTo(map)

index.htmlを実行すると下記のようにブラウザで表示されます。

経路を設定： L.Routing.control({waypoints: ～の後に座標を設定します。


L.latLng(35.676683,139.7558916),
L.latLng(35.6852696,139.7630878),
L.latLng(35.6835522,139.7709409)

参考文献
Leaflet

dayjournal memo

Leaflet #023 – 経路探索

Yasunori Kirimoto 2015/12/17