membuat routing machine peta dengan leaflet js – pada artikel sebelumnya kita telah membuat sebuah peta, dan telah sampai pada membuat sebuah polygon.
baca juga Cara Membuat Polygon Peta Library Leaflet tutorial sebelumnya agar tidak ketinggalan tutorial.
artikel kali ini kita akan membahas mengenai membuat rute perjalanan peta dengan library leaflet js.
pada sebuah peta biasanya jika kita ingin pergi sebuah titik di peta, kita pasti ingin mengetahui rute jalan mana yang dapat kita tempuh. Menggunakan routing dengan library leaflet Js ini, Kita akan membuat hal demikian.
kunjungi leaflet-routing-machine untuk melihat dan mengambil documentasi pembuatan routing machine
cara membuat routing machine peta dengan leaflet js
letakkan code berikut pada bagian tag <head>
[...] <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" /> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script> [...]
masukkan code basic routing pada peta. masukkan code pada tag <script>
L.Routing.control({
waypoints: [
L.latLng(-3.815625, 114.692371),
L.latLng(-3.726897, 114.650485)
]
}).addTo(mymap);
code keseluruhan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<title>Peta</title>
<!-- baru add -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
<!-- ==== -->
</head>
<body>
<div id="mapid" style="width:100%; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([-3.9372941, 114.775563], 10);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
// create a red polygon from an array of LatLng points
var latlngs = [
[-3.722951, 114.641599],
[-3.707026, 114.653919],
[-3.700517, 114.669711],
[-3.700517, 114.680011],
[-3.703258, 114.687908],
[-3.702915, 114.724300],
[-3.705313, 114.733226],
[-3.705313, 114.760692],
[-3.699831, 114.777515],
[-3.683386, 114.796054],
[-3.679617, 114.807384],
[-3.679275, 114.819400],
[-3.676534, 114.824893],
[-3.663857, 114.834163],
[-3.658032, 114.851672],
[-3.660431, 114.851672],
[-3.674478, 114.844463],
[-3.682701, 114.843433],
[-3.689211, 114.840343],
[-3.708054, 114.834850],
[-3.716619, 114.826267],
[-3.724499, 114.813907],
[-3.726897, 114.820087],
[-3.727582, 114.825923],
[-3.728917, 114.828019],
[-3.728917, 114.835717],
[-3.730454, 114.837256],
[-3.733833, 114.833869],
[-3.756263, 114.825247],
[-3.759950, 114.825247],
[-3.771012, 114.812315],
[-3.785759, 114.806772],
[-3.789139, 114.788297],
[-3.796099, 114.789531],
[-3.796441, 114.803607],
[-3.803635, 114.803951],
[-3.805691, 114.791934],
[-3.810829, 114.792964],
[-3.814597, 114.816997],
[-3.819051, 114.818713],
[-3.825902, 114.814250],
[-3.830355, 114.814250],
[-3.835493, 114.807727],
[-3.828300, 114.799487],
[-3.831383, 114.793994],
[-3.858102, 114.797427],
[-3.860842, 114.802234],
[-3.872831, 114.811504],
[-3.877284, 114.803607],
[-3.885847, 114.798801],
[-3.921470, 114.785068],
[-3.902974, 114.758289],
[-3.894753, 114.734256],
[-3.893726, 114.720180],
[-3.885505, 114.694774],
[-3.888588, 114.686534],
[-3.878997, 114.686534],
[-3.868720, 114.691684],
[-3.815625, 114.692371],
[-3.798154, 114.674518],
[-3.742314, 114.660098],
[-3.726897, 114.650485],
];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(mymap);
// routing
L.Routing.control({
waypoints: [
L.latLng(-3.815625, 114.692371),
L.latLng(-3.726897, 114.650485)
]
}).addTo(mymap);
// zoom the map to the polygon
mymap.fitBounds(polygon.getBounds());
L.marker([-3.8011986,114.7630298]).addTo(mymap);
</script>
</body>
</html>
hasil jika sudah selesai dan jadi
dengan menggunakan Route Machine dari library leaflet Js ini, sangat memudahkan dalam membuat Sistem Informasi Geografis, dan secara otomatis route terbentuk, lengkap dengan keterangannya.
