Cara Sederhana Membuat Peta Tematik / Choropleth Menggunakan Leaflet JS -Leaflet

Peta tematik (juga disebut sebagai peta statistik atau peta tujuan khusus) menyajikan patron penggunaan ruangan pada tempat tertentu sesuai dengan tema tertentu. Berbeda dengan peta rujukan yang memperlihatkan pengkhususan geografi (hutan, jalan, perbatasan administratif), peta-peta tematik lebih menekankan variasi penggunaan ruangan daripada sebuah jumlah atau lebih dari distribusi geografis. Distribusi ini bisa saja merupakan fenomena fisikal seperti iklim atau ciri-ciri khas manusia seperti kepadatan penduduk atau permasalahan kesehatan.

Berikut langkah-langkah membuatya:

Definisikan data awal di variabel var statesData

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 ], 

Tambahkan library leaflet

<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet-src.js"></script>

Membuat div untuk menampilkan peta. Dapat diunduh di leaflet

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

Menampilkan peta dasar leaflet

 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);

Menampilkan peta dari geojson statesData, kemudian memberikan style dengan function getStyle()

geojson = L.geoJson(statesData, {
        style: getStyle
    }).addTo(m);

Definisi function getStyle()

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) 
  };
}

Membuat legenda peta

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;
    };

Definisi function getColor()

  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';
    }

Membuat css 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>

Source Code lengkap

<!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>

Conclusion

Membuat Peta tematik sederhana dapat dilakukan menggunakan leaflet.js tentunya dengan beberapa langkah sederhana. Semoga dapat membantu Anda dalam mempelajari leaflet.js. Terima kasih.

Referensi dari : https://leafletjs.com/examples/choropleth/


Leave a Reply