Map Based Programming

Pertemuan 1

Gelar Aditya Pratama, S.T., M.Kom.

gelar@stmik-amikbandung.ac.id
Leaflet Map
Apa itu leaflet.js?

● Leaflet JavaScript atau di singkat (LaefletJS) merupakan perpustakaan

JavaScript yang bersifat Open Source.
● LeafletJS pertama kali dirilis oleh Vladimir Agafonkin pada tahun 2011. Library
ini khusus digunakan untuk membangun aplikasi pemetaan berbasis web,
memdukung sebagian besar mobile dan desktop platform.
● Hypertext Markup Language 5 (HTML5) dan Cascading Style Sheets 3 (CSS3)
serta OpenLayer dan Google Maps API yang merupakan library javascript
untuk membangun aplikasi peta yang sangat popular saat ini.

Map Based Programming

Apa itu leaflet.js?

● Dengan memanfaatkan leaflet, developer yang tidak memiliki latar belakang

GIS pun dapat dengan mudah menampilkan peta interaktif berbasis web pada
server.
● Leaflet mampu menampilkan layer dari file geojson, memberi style dan
membuat layer yang interaktif seperti menampilkan marker yang menampilkan
popup informasi ketika di klik.

Map Based Programming

Apa itu leaflet.js?

Berikut ini yang dapat dilakukan dengan LeafletJS:

● Leaflet JavaScript library memungkinkan kita menggunakan lapisan/layer
seperti Tile layers, Web Map Service (WMS), Markers, Popups, Vector layers
(point, polylines, polygons, circles, dll.), Image overlays dan GeoJSON.
● Kalian juga dapat berinteraksi dengan peta Leaflet dengan menyeret peta,
memperbesar (zoom) (dengan mengklik dua kali atau, menggulir mouse),
menggunakan keyboard, menggunakan event handling, dan dengan menyeret
marker (penanda).
● Leaflet.js mendukung browser seperti Chrome, Firefox, Safari 5+, Opera 12+,
Edge di desktop dan, browser seperti Safari, Android, Chrome, Firefox untuk
ponsel.

Map Based Programming

Apa itu google map api?

● Google Menyediakan Google Maps API yang memungkinkan kita membangun

aplikasi dengan memanfaatkan Google Maps.
● Google Maps API (Application Programming Interface) merupakan sebuah API
yang disediakan oleh Google untuk menggunakan peta Google (Google Map)
dalam aplikasi yang kita bangun. Google Maps API memungkinkan kita
memodifikasi peta dan informasi yang ada di dalamnya.

Map Based Programming

Apa itu google map api?

● Google Maps API tersedia untuk platform:

○ Web adalah Google Maps API yang digunakan pada Web.

○ Android adalah Google Maps API yang digunakan pada aplikasi Android.
○ iOS adalah Google Maps API yang digunakan pada aplikasi iOS.
○ Web Service adalah penggunaan Google Maps melalui Web Service.
● Pada kuliah ini kita akan menggunakan Google Maps API untuk Web, yang akan
diberikan setelah UTS

Map Based Programming

Praktikum leaflet.js

● Windows 10 Internet Information Services (IIS)

○ Diaktifkan (Melihat Web Secara localhost Offline)
● Html editor software
○ Visual Studio Code
○ Geany
○ Atau yg kamu suka
● Halaman web kita di online kan -> 000webhost.com
● Mulai Programming…

Map Based Programming

Praktikum leaflet.js

● https://leafletjs.com/examples/quick-start/

● Include Leaflet CSS file in the head section of your document:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq
crossorigin=""/>

● Include Leaflet JavaScript file after Leaflet’s CSS:

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearI"
crossorigin=""></script>

Map Based Programming

Praktikum leaflet.js

● Put a div element with a certain id where you want your map to be:
<div id="mapid"></div>

● Make sure the map container has a defined height, for example by setting it in
CSS:
#mapid { height: 180px; }

Map Based Programming

Praktikum leaflet.js

● Javascript
var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,
Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

Map Based Programming

Praktikum leaflet.js

● Change basemap
● https://leaflet-extras.github.io/leaflet-providers/preview/

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
maxZoom: 16
}).addTo(mymap);

Map Based Programming

Hasil Jadi

Map Based Programming