Routing backend

ui

#1

สิ่งที่ต้องการคือ

  1. leaflet-routing-machine

  2. osrm-backend – more info

     docker run -it -p 5000:5000 -v $(pwd):/data osrm/osrm-backend osrm-routed --algorithm mld /data/thailand-latest.osrm
    

    :eight_spoked_asterisk: dependency :eight_spoked_asterisk: .pbf processes to .osrm

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Leaflet Routing Machine Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <link rel="stylesheet" href="/node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
    <style>
        .map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script src="/node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
    <script>
    var map = L.map('map');

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}{r}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    L.Routing.control({
        waypoints: [
            L.latLng(7.8711, 98.3605),
            L.latLng(7.8210, 98.3445)
        ],
        routeWhileDragging: true,
        serviceUrl: 'http://localhost:5000/route/v1'
    }).addTo(map);
    </script>
</body>
</html>