 |
| format penyimpanan. |
Pada Webgis menggunakan Leaflet bagian 3 ini kita akan belajar memanggil data geojson dan menggunakan localhost (XAMPP).
Geojson
Sebelumnya, mari kita review kembali apa itu Geojson?
Geojson adalah tipe file vector yang memiliki sistem koordinat, tipe file geojson seperti data shapefile dan kml.
Kebanyakan pengembangan Webgis menggunakan data geojson untuk memanggil data pada sistem Website, karena tipe geojson cukup praktis, hanya satu file saja yang tersimpan, berbeda dengan shapefile yang memilki banyak sub file untuk menampilkannya.
XAMPP
XAMPP adalah software yang berfungsi untuk menjalankan program pada localhost atau pada laptop sebelum diupload pada hosting online.
Mulai
Pertama menyiapkan software XAMPP, yang dapat diunduh terlebih dahulu di https://www.apachefriends.org/download.html, sesuaikan sistem komputer yang digunakan seperti penggunaan Windows, sistem Linux atau yang lainnya, penulisan program masih mengunakan sublime text, sama seperti penggunaan awal.
Persiapan folder dan data
Data yang berupa geojson dapat difolderkan pada C:xampp - htdocs, beserta penulisan .html dan juga plugin tambahan Leaflet.Ajax
kami menggunakan file jawa tengah, dengan menyimpan pada folder geojson dan menyimpan Leaflet.Ajax pada folder js.
|
| format penyimpanan. |
file Leaflet.Ajax dapat diunduh pada (klik)
Penulisan
Pada Webgis bagian 1 & 2 cukup ditambahkan, script:
<script src="webgis3/js/leaflet.ajax.js"></script>
script digunakan untuk meload Leaflet.Ajax yang tersimpan pada folder js, script diletakkan pada bagian atas.
Serta tuliskan pada bagian bawah
var jsonTest = new L.GeoJSON.AJAX(["webgis3/geojson/jateng.geojson"],{onEachFeature:popUp}).addTo(mymap);
Penulisan var jsonTest digunakan untuk memanggil data geojson di folder geojson
Penulisan Program
<!-- Untuk kelengkapan penulisa dapat menggunakan sumber dari kami -->
<!DOCTYPE html>
<html>
<head>
<title>Webgis</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="
sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIpt
F7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZ
pVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<style type="text/css">
#mapid { height: 100vh; }
</style>
</head>
<body>
<script src="webgis3/js/leaflet.ajax.js"></script>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([-7.182184, 109.432878], 8);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?
access_token
=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.
rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">
OpenStreetMap</a> contributors, <a href="https://creativecommons.org/
licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">
Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcm
Z3N3gifQ.rJcFIG214AriISLbB6B5aw'
}).addTo(mymap);
var marker = L.marker([-7.182184, 109.432878]).addTo(mymap);
var circle = L.circle([-7.182184, 109.432878], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap);
var polygon = L.polygon([
[-7.112434, 109.473133],
[-7.219113, 110.124298],
[-7.548688, 109.443146]
]).addTo(mymap);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("area 1");
polygon.bindPopup("Area 2");
function popUp(f,l){
var out = [];
if (f.properties){
for(key in f.properties){
out.push(key+": "+f.properties[key]);
}
l.bindPopup(out.join("<br />"));
}
}
var jsonTest = new L.GeoJSON.AJAX(["webgis3/geojson/jateng.geojson"],
{onEachFeature:popUp}).addTo(mymap);
L.control.scale().addTo(mymap);
</script>
</body>
</html>
Untuk mempemudah mengikuti tutorial, berikut video yang dapat diikuti:
Tidak ada komentar:
Posting Komentar