Latar Belakang:
Sebelumnya saya telah membuat halaman yang memaparkan bagaimana membuat peta tematik / choropleth menggunakan highmap /highcart (
https://komputasistat.blogspot.co.id/2016/09/cara-menggunakan-highmap-highchart-dari.html). Library highmap dirancang untuk membuat chart menggunakan peta, mungkin hal ini yang membuat customization penampilan peta yang ditawarkan tidak selengkap pada leafletjs, openlayers dan googlemaps js api. Pada highmap js kita tidak dapat menggunakan marker, overlay peta, menghitung jarak dan masih banyak lagi.
NB: jika anda bisa menggunakan highmap js untuk overlay peta, marker atau menghitung jarak,
anda bisa berbagai melalui komen dibawah
Pengertian:
Peta Tematik adalah peta yang menyajikan tema tertentu dan untuk kepentingan tertentu (land status, penduduk, transportasi dll.) dengan menggunakan peta rupabumi yang telah disederhanakan sebagai dasar untuk meletakkan informasi tematiknya.
sumber: www.bakosurtanal.go.id/peta-tematik/
peta choropleth menurut oxforddictionaries:
A map which uses differences in shading, colouring, or the placing of symbols within predefined areas to indicate the average values of a particular quantity in those areas
Output pembuatan simple peta tematik / choropleth menggunakan leaflet JS:
Berikut cara / langkah-langkah pembuatan:
3. tambahkan var statesData = pada file geojson kemudian ubah ekstensi .geojson menjadi .js
contoh:
var statesData = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::32752" } },
"features": [
{ "type": "Feature", "properties": { "PROV_NO": "91", "KABKOTA_NO": "04", "KEC_NO": "082", "PROVINSI": "PAPUA BARAT", "KABUPATEN": "TELUK BINTUNI", "name": "MOSKONA BARAT" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 920854.4638, 9808573.4569 ], [ 920844.7188, 9803744.8114 ], [ 916610.87150000036, 9795153.296599999 ], [ 886969.56340000033, 9795351.434699999 ], [ 888083.90670000017, 9800105.4276 ], [ 895102.50779999979, 9817186.651 ], [ 897339.73369999975, 9824566.3836 ], [ 918866.98230000027, 9824700.9452 ], [ 920862.4715, 9812634.3669 ], [ 920854.4638, 9808573.4569 ] ] ] ] } },
{ "type": "Feature", "properties": { "PROV_NO": "91", "KABKOTA_NO": "04", "KEC_NO": "040", "PROVINSI": "PAPUA BARAT", "KABUPATEN": "TELUK BINTUNI", "name": "WAMESA" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 1062393.7576, 9750061.2426 ], [ 1052194.9853, 9750487.1191 ], [ 1052709.9768, 9751706.9327 ], [ 1051484.575, 9753953.0294 ], [ 1051263.7623, 9759256.7755 ],
4. Memaggil library dan sumber data peta dasar (bintuni4.js)
<link rel="stylesheet" href="leaflet.css" />
<script src="bintuni4.js"></script>
<script src="leaflet-src.js"></script>
5. membuat div map yang akan digunakan untuk menampilkan peta
6. Menampilkan peta dasar dari mapbox
var m = L.map('map').setView([-2.104146,133.522358], 8);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.light'
}).addTo(m);
7. Menampilkan peta dari Geojson dan memberian style
geojson = L.geoJson(statesData, {
style: getStyle
}).addTo(m);
8. Mendefinisikan getstyle. Fungsi getstyle berisi tentang pewarnaan dan style peta
function getStyle(feature) {
return {
weight: 1,
opacity: 1,
color: '#fff',
fillOpacity: 0.7,
// fillColor: getColor(feature.properties.density)
// TopoJSON used in this example doesn't have any data attributes
// so throwing in some random colors
fillColor:getColor(Math.random()*1000)
};
}
9. Fungsi pembuatan legenda dan menentukan posisi legenda diletakan
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '–' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
10. Fungsi menentukan warna apa yang digunakan
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
11. definisi style:
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0;}
#map { width: 800px; height: 500px; }
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }
</style>
Full source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=1024, user-scalable=no">
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0;}
#map { width: 800px; height: 500px; }
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }
</style>
<link rel="stylesheet" href="leaflet.css" />
<script src="bintuni4.js"></script>
<script src="leaflet-src.js"></script>
<title>Leaflet AJAX</title>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var m = L.map('map').setView([-2.104146,133.522358], 8);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.light'
}).addTo(m);
geojson = L.geoJson(statesData, {
style: getStyle
}).addTo(m);
function getStyle(feature) {
return {
weight: 1,
opacity: 1,
color: '#fff',
fillOpacity: 0.7,
// fillColor: getColor(feature.properties.density)
// TopoJSON used in this example doesn't have any data attributes
// so throwing in some random colors
fillColor:getColor(Math.random()*1000)
};
}
m.attributionControl.addAttribution('Population data © <a href="http://census.gov/">Ngasal doang</a>');
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '–' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
legend.addTo(m);
</script>
</body>
</html>
NB: data diatas dmenggunakan data random
Sekian dan Terima kasih
semoga bermanfaat
