Sunday, 13 November 2016

Membuat Peta Tematik / Choropleth Menggunakan Leaflet JS -Leaflet

Posted on November 13, 2016 by Hasta Nurhusada
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:

1. Sediakan peta format geojson (andai yang dimiliki shapefile, anda bisa di-convert menggunakan tutorial: https://komputasistat.blogspot.co.id/2016/09/menyederhanakan-shapefile-mengurangi.html kemudian https://komputasistat.blogspot.co.id/2016/09/mengubah-file-shapefile-shp-menjadi.html )

2. download library leaflet yang stable version : http://leafletjs.com/download.html

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

<div id="map"></div>

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 &copy; <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 ? '&ndash;' + 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 &copy; <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 &copy; <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 ? '&ndash;' + 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


Sumber tutorial ini diambil dari http://leafletjs.com/examples/choropleth/ dengan sedikit pengubahan dan penambahan

Sekian dan Terima kasih
semoga bermanfaat


Artikel Terkait javascript ,SISTEM INFORMASI GEOGRAFIS

Posted in , | 2 comments

2 comments:

  1. andreas7 August 2018 at 15:50

    sip ini min, lengkap banget tutorialnya
    alat pemisah lcd

    ReplyDelete
  2. meeee16 June 2019 at 04:41

    permisi min, mau tanya mengenai pewarnaan daerahnya itu apabila menggunakan data dari database gimana ya? terima kasih sebelumnya

    ReplyDelete

Subscribe to: Post Comments (Atom)