<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="css/leaflet.css"><link rel="stylesheet" href="css/L.Control.Locate.min.css">
        <link rel="stylesheet" href="css/qgis2web.css"><link rel="stylesheet" href="css/fontawesome-all.min.css">
        <link rel="stylesheet" href="css/leaflet-search.css">
        <link rel="stylesheet" href="css/leaflet-measure.css">
        <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        </style>
        <title>Peta Radius & Potensi</title>
		<link rel="icon" type="image/png" href="apple.ico">
    </head>
    <body>
        <div id="map">
        </div>
        <script src="js/qgis2web_expressions.js"></script>
        <script src="js/leaflet.js"></script><script src="js/L.Control.Locate.min.js"></script>
        <script src="js/leaflet.rotatedMarker.js"></script>
        <script src="js/leaflet.pattern.js"></script>
        <script src="js/leaflet-hash.js"></script>
        <script src="js/Autolinker.min.js"></script>
        <script src="js/rbush.min.js"></script>
        <script src="js/labelgun.min.js"></script>
        <script src="js/labels.js"></script>
        <script src="js/leaflet-measure.js"></script>
        <script src="js/leaflet-search.js"></script>
        <script src="data/Radius5Km_0.js"></script>
        <script src="data/Radius2Km_1.js"></script>
        <script src="data/BatasKelurahan_2.js"></script>
        <script src="data/ProdukUnggulan_3.js"></script>
        <script src="data/SkalaPrioritasPotensiUKM_4.js"></script>
        <script src="data/IndustriMikroKecil_5.js"></script>
        <script src="data/MinimarketSembakoWarungMakan_6.js"></script>
        <script src="data/KepadatanPenduduk_7.js"></script>
        <script src="data/KantorBJBCabangBraga_8.js"></script>
        <script type="text/javascript" src="invisible_debut.js" ></script>
        <script>
        		
        var map = L.map('map', {
            zoomControl:true, maxZoom:28, minZoom:1
        })
        var title = new L.Control();
      title.onAdd = function (map) {
      this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
      this.update();
      return this._div;
      };
      title.update = function () {
			this._div.innerHTML = '<h2>Kota Bandung</h2>'
		};
		title.addTo(map);



		var hash = new L.Hash(map);
        L.control.locate({locateOptions: {maxZoom: 19}}).addTo(map);
        var measureControl = new L.Control.Measure({
            position: 'topleft',
            primaryLengthUnit: 'meters',
            secondaryLengthUnit: 'kilometers',
            primaryAreaUnit: 'sqmeters',
            secondaryAreaUnit: 'hectares'
        });
        measureControl.addTo(map);
        document.getElementsByClassName('leaflet-control-measure-toggle')[0]
        .innerHTML = '';
        document.getElementsByClassName('leaflet-control-measure-toggle')[0]
        .className += ' fas fa-ruler';
        var bounds_group = new L.featureGroup([]);
        function setBounds() {
            if (bounds_group.getLayers().length) {
                map.fitBounds(bounds_group.getBounds());
            }
        }
        
	  map.createPane('pane_GoogleTerrainHybrid_0');
      map.getPane('pane_GoogleTerrainHybrid_0').style.zIndex = 400;
      var layer_GoogleTerrainHybrid_0 = L.tileLayer('https://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}', {
      pane: 'pane_GoogleTerrainHybrid_0',
      opacity: 0.3,
      minZoom: 1,
      maxZoom: 28,
      minNativeZoom: 0,
      maxNativeZoom: 18
      });
      layer_GoogleTerrainHybrid_0;
      map.addLayer(layer_GoogleTerrainHybrid_0);	
      
        function pop_Radius5Km_0(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <th scope="row">RADIUS(KM)</th>\
                        <td>' + (feature.properties['BUFF_DIST'] !== null ? Autolinker.link(String(feature.properties['BUFF_DIST'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_Radius5Km_0_0() {
            return {
                pane: 'pane_Radius5Km_0',
                opacity: 1,
                color: 'rgba(245,183,10,1.5)',
                dashArray: '1,5',
                lineCap: 'square',
                lineJoin: 'bevel',
                weight: 4.0,
                fillOpacity: 0,
            }
        }
        map.createPane('pane_Radius5Km_0');
        map.getPane('pane_Radius5Km_0').style.zIndex = 400;
        map.getPane('pane_Radius5Km_0').style['mix-blend-mode'] = 'normal';
        var layer_Radius5Km_0 = new L.geoJson(json_Radius5Km_0, {
            pane: 'pane_Radius5Km_0',
            onEachFeature: pop_Radius5Km_0,
            style: style_Radius5Km_0_0,
        });
        bounds_group.addLayer(layer_Radius5Km_0);
        map.addLayer(layer_Radius5Km_0);
        function pop_Radius2Km_1(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <th scope="row">RADIUS(KM)</th>\
                        <td>' + (feature.properties['BUFF_DIST'] !== null ? Autolinker.link(String(feature.properties['BUFF_DIST'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_Radius2Km_1_0() {
            return {
                pane: 'pane_Radius2Km_1',
                opacity: 1,
                color: 'rgba(9,99,36,1.5)',
                dashArray: '1,5',
                lineCap: 'square',
                lineJoin: 'bevel',
                weight: 4.0,
                fillOpacity: 0,
            }
        }
        map.createPane('pane_Radius2Km_1');
        map.getPane('pane_Radius2Km_1').style.zIndex = 401;
        map.getPane('pane_Radius2Km_1').style['mix-blend-mode'] = 'normal';
        var layer_Radius2Km_1 = new L.geoJson(json_Radius2Km_1, {
            pane: 'pane_Radius2Km_1',
            onEachFeature: pop_Radius2Km_1,
            style: style_Radius2Km_1_0,
        });
        bounds_group.addLayer(layer_Radius2Km_1);
        map.addLayer(layer_Radius2Km_1);
        function pop_BatasKelurahan_2(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <th scope="row">KECAMATAN</th>\
                        <td>' + (feature.properties['KECAMATAN'] !== null ? Autolinker.link(String(feature.properties['KECAMATAN'])) : '') + '</td>\
                    </tr>\
                        <th scope="row">DESA</th>\
                        <td>' + (feature.properties['DESA'] !== null ? Autolinker.link(String(feature.properties['DESA'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">LUAS(KM)</th>\
                        <td>' + (feature.properties['LUAS_KM'] !== null ? Autolinker.link(String(feature.properties['LUAS_KM'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_BatasKelurahan_2_0() {
            return {
                pane: 'pane_BatasKelurahan_2',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'square',
                lineJoin: 'bevel',
                weight: 1.0,
                fillOpacity: 0,
            }
        }
        map.createPane('pane_BatasKelurahan_2');
        map.getPane('pane_BatasKelurahan_2').style.zIndex = 402;
        map.getPane('pane_BatasKelurahan_2').style['mix-blend-mode'] = 'normal';
        var layer_BatasKelurahan_2 = new L.geoJson(json_BatasKelurahan_2, {
            pane: 'pane_BatasKelurahan_2',
            onEachFeature: pop_BatasKelurahan_2,
            style: style_BatasKelurahan_2_0,
        });
        bounds_group.addLayer(layer_BatasKelurahan_2);
        map.addLayer(layer_BatasKelurahan_2);
        function pop_ProdukUnggulan_3(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <th scope="row">KECAMATAN</th>\
                        <td>' + (feature.properties['KECAMATAN'] !== null ? Autolinker.link(String(feature.properties['KECAMATAN'])) : '') + '</td>\
                    </tr>\
                        <th scope="row">DESA</th>\
                        <td>' + (feature.properties['DESA'] !== null ? Autolinker.link(String(feature.properties['DESA'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">PANGAN</th>\
                        <td>' + (feature.properties['PANGAN'] !== null ? Autolinker.link(String(feature.properties['PANGAN'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">NON_PANGAN</th>\
                        <td>' + (feature.properties['NON_PNGN'] !== null ? Autolinker.link(String(feature.properties['NON_PNGN'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_ProdukUnggulan_3_0(feature) {
            switch(String(feature.properties['PROD_UGGL'])) {
                case '1':
                    return {
                pane: 'pane_ProdukUnggulan_3',
                radius: 8.0,
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1,
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(234,28,9,1.0)',
            }
                    break;
                default:
                    return {
                pane: 'pane_ProdukUnggulan_3',
                radius: 5.5,
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1,
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(139,222,123,1.0)',
            }
                    break;
            }
        }
        map.createPane('pane_ProdukUnggulan_3');
        map.getPane('pane_ProdukUnggulan_3').style.zIndex = 403;
        map.getPane('pane_ProdukUnggulan_3').style['mix-blend-mode'] = 'normal';
        var layer_ProdukUnggulan_3 = new L.geoJson(json_ProdukUnggulan_3, {
            pane: 'pane_ProdukUnggulan_3',
            onEachFeature: pop_ProdukUnggulan_3,
            pointToLayer: function (feature, latlng) {
                var context = {
                    feature: feature,
                    variables: {}
                };
                return L.circleMarker(latlng, style_ProdukUnggulan_3_0(feature));
            },
        });
        bounds_group.addLayer(layer_ProdukUnggulan_3);
        function pop_SkalaPrioritasPotensiUKM_4(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <th scope="row">KECAMATAN</th>\
                        <td>' + (feature.properties['KECAMATAN'] !== null ? Autolinker.link(String(feature.properties['KECAMATAN'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">DESA</th>\
                        <td>' + (feature.properties['DESA'] !== null ? Autolinker.link(String(feature.properties['DESA'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_SkalaPrioritasPotensiUKM_4_0(feature) {
            if (feature.properties['BOBOT_TOT'] >= 3.000000 && feature.properties['BOBOT_TOT'] <= 4.666667 ) {
                return {
                pane: 'pane_SkalaPrioritasPotensiUKM_4',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(255,249,188,0.4)',
            }
            }
            if (feature.properties['BOBOT_TOT'] >= 4.666667 && feature.properties['BOBOT_TOT'] <= 6.333333 ) {
                return {
                pane: 'pane_SkalaPrioritasPotensiUKM_4',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(255,164,128,0.4)',
            }
            }
            if (feature.properties['BOBOT_TOT'] >= 6.333333 && feature.properties['BOBOT_TOT'] <= 8.000000 ) {
                return {
                pane: 'pane_SkalaPrioritasPotensiUKM_4',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(255,0,0,0.4)',
            }
            }
        }
        map.createPane('pane_SkalaPrioritasPotensiUKM_4');
        map.getPane('pane_SkalaPrioritasPotensiUKM_4').style.zIndex = 404;
        map.getPane('pane_SkalaPrioritasPotensiUKM_4').style['mix-blend-mode'] = 'normal';
        var layer_SkalaPrioritasPotensiUKM_4 = new L.geoJson(json_SkalaPrioritasPotensiUKM_4, {
            pane: 'pane_SkalaPrioritasPotensiUKM_4',
            onEachFeature: pop_SkalaPrioritasPotensiUKM_4,
            style: style_SkalaPrioritasPotensiUKM_4_0,
        });
        bounds_group.addLayer(layer_SkalaPrioritasPotensiUKM_4);
        function pop_IndustriMikroKecil_5(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <th scope="row">KECAMATAN</th>\
                        <td>' + (feature.properties['KECAMATAN'] !== null ? Autolinker.link(String(feature.properties['KECAMATAN'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">DESA</th>\
                        <td>' + (feature.properties['DESA'] !== null ? Autolinker.link(String(feature.properties['DESA'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">KULIT</th>\
                        <td>' + (feature.properties['KULIT'] !== null ? Autolinker.link(String(feature.properties['KULIT'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">KAYU</th>\
                        <td>' + (feature.properties['KAYU'] !== null ? Autolinker.link(String(feature.properties['KAYU'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">LOGAM</th>\
                        <td>' + (feature.properties['LOGAM'] !== null ? Autolinker.link(String(feature.properties['LOGAM'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">KAIN</th>\
                        <td>' + (feature.properties['KAIN'] !== null ? Autolinker.link(String(feature.properties['KAIN'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">GERABAH</th>\
                        <td>' + (feature.properties['GERABAH'] !== null ? Autolinker.link(String(feature.properties['GERABAH'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">ANYAMAN</th>\
                        <td>' + (feature.properties['ANYAM'] !== null ? Autolinker.link(String(feature.properties['ANYAM'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">MAKAN&MINUM</th>\
                        <td>' + (feature.properties['MAKAN'] !== null ? Autolinker.link(String(feature.properties['MAKAN'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">LAINNYA</th>\
                        <td>' + (feature.properties['LAINNYA'] !== null ? Autolinker.link(String(feature.properties['LAINNYA'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">TOTAL</th>\
                        <td>' + (feature.properties['TOTAL_IMK'] !== null ? Autolinker.link(String(feature.properties['TOTAL_IMK'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">TOTAL(KM2)</th>\
                        <td>' + (feature.properties['TOT_IMK_KM'] !== null ? Autolinker.link(String(feature.properties['TOT_IMK_KM'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_IndustriMikroKecil_5_0(feature) {
            if (feature.properties['TOT_IMK_KM'] >= 0.000000 && feature.properties['TOT_IMK_KM'] <= 209.666667 ) {
                return {
                pane: 'pane_IndustriMikroKecil_5',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(249,244,75,0.4)',
            }
            }
            if (feature.properties['TOT_IMK_KM'] >= 209.666667 && feature.properties['TOT_IMK_KM'] <= 419.333333 ) {
                return {
                pane: 'pane_IndustriMikroKecil_5',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(255,188,128,0.4)',
            }
            }
            if (feature.properties['TOT_IMK_KM'] >= 419.333333 && feature.properties['TOT_IMK_KM'] <= 629.000000 ) {
                return {
                pane: 'pane_IndustriMikroKecil_5',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(255,0,0,0.4)',
            }
            }
        }
        map.createPane('pane_IndustriMikroKecil_5');
        map.getPane('pane_IndustriMikroKecil_5').style.zIndex = 405;
        map.getPane('pane_IndustriMikroKecil_5').style['mix-blend-mode'] = 'normal';
        var layer_IndustriMikroKecil_5 = new L.geoJson(json_IndustriMikroKecil_5, {
            pane: 'pane_IndustriMikroKecil_5',
            onEachFeature: pop_IndustriMikroKecil_5,
            style: style_IndustriMikroKecil_5_0,
        });
        bounds_group.addLayer(layer_IndustriMikroKecil_5);
        function pop_MinimarketSembakoWarungMakan_6(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <th scope="row">KECAMATAN</th>\
                        <td>' + (feature.properties['KECAMATAN'] !== null ? Autolinker.link(String(feature.properties['KECAMATAN'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">DESA</th>\
                        <td>' + (feature.properties['DESA'] !== null ? Autolinker.link(String(feature.properties['DESA'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">MINIMARKET</th>\
                        <td>' + (feature.properties['MINIMRKT'] !== null ? Autolinker.link(String(feature.properties['MINIMRKT'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">KELONTONG</th>\
                        <td>' + (feature.properties['KELONTONG'] !== null ? Autolinker.link(String(feature.properties['KELONTONG'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">SEMBAKO</th>\
                        <td>' + (feature.properties['SEMBAKO'] !== null ? Autolinker.link(String(feature.properties['SEMBAKO'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">RESTORAN</th>\
                        <td>' + (feature.properties['RESTORAN'] !== null ? Autolinker.link(String(feature.properties['RESTORAN'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">WRGMAKAN</th>\
                        <td>' + (feature.properties['WRGMAKAN'] !== null ? Autolinker.link(String(feature.properties['WRGMAKAN'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">TOTAL</th>\
                        <td>' + (feature.properties['TOTAL'] !== null ? Autolinker.link(String(feature.properties['TOTAL'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">TOTAL(KM2)</th>\
                        <td>' + (feature.properties['TOTAL_KM'] !== null ? Autolinker.link(String(feature.properties['TOTAL_KM'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_MinimarketSembakoWarungMakan_6_0(feature) {
            if (feature.properties['TOTAL_KM'] >= 5.000000 && feature.properties['TOTAL_KM'] <= 414.333333 ) {
                return {
                pane: 'pane_MinimarketSembakoWarungMakan_6',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(251,233,109,0.4)',
            }
            }
            if (feature.properties['TOTAL_KM'] >= 414.333333 && feature.properties['TOTAL_KM'] <= 823.666667 ) {
                return {
                pane: 'pane_MinimarketSembakoWarungMakan_6',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(244,135,26,0.4)',
            }
            }
            if (feature.properties['TOTAL_KM'] >= 823.666667 && feature.properties['TOTAL_KM'] <= 1233.000000 ) {
                return {
                pane: 'pane_MinimarketSembakoWarungMakan_6',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(255,0,0,0.4)',
            }
            }
        }
        map.createPane('pane_MinimarketSembakoWarungMakan_6');
        map.getPane('pane_MinimarketSembakoWarungMakan_6').style.zIndex = 406;
        map.getPane('pane_MinimarketSembakoWarungMakan_6').style['mix-blend-mode'] = 'normal';
        var layer_MinimarketSembakoWarungMakan_6 = new L.geoJson(json_MinimarketSembakoWarungMakan_6, {
            pane: 'pane_MinimarketSembakoWarungMakan_6',
            onEachFeature: pop_MinimarketSembakoWarungMakan_6,
            style: style_MinimarketSembakoWarungMakan_6_0,
        });
        bounds_group.addLayer(layer_MinimarketSembakoWarungMakan_6);
        function pop_KepadatanPenduduk_7(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <th scope="row">KECAMATAN</th>\
                        <td>' + (feature.properties['KECAMATAN'] !== null ? Autolinker.link(String(feature.properties['KECAMATAN'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">DESA</th>\
                        <td>' + (feature.properties['DESA'] !== null ? Autolinker.link(String(feature.properties['DESA'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">PENDUDUK</th>\
                        <td>' + (feature.properties['PDDK_15'] !== null ? Autolinker.link(String(feature.properties['PDDK_15'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">LUAS(KM2)</th>\
                        <td>' + (feature.properties['LUASKM2'] !== null ? Autolinker.link(String(feature.properties['LUASKM2'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">KEPADATAN_PDDK</th>\
                        <td>' + (feature.properties['KPDT_PDDK'] !== null ? Autolinker.link(String(feature.properties['KPDT_PDDK'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_KepadatanPenduduk_7_0(feature) {
            if (feature.properties['KPDT_PDDK'] >= 1870.000000 && feature.properties['KPDT_PDDK'] <= 19271.666667 ) {
                return {
                pane: 'pane_KepadatanPenduduk_7',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(243,223,134,0.4)',
            }
            }
            if (feature.properties['KPDT_PDDK'] >= 19271.666667 && feature.properties['KPDT_PDDK'] <= 36673.333333 ) {
                return {
                pane: 'pane_KepadatanPenduduk_7',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(245,174,87,0.4)',
            }
            }
            if (feature.properties['KPDT_PDDK'] >= 36673.333333 && feature.properties['KPDT_PDDK'] <= 54075.000000 ) {
                return {
                pane: 'pane_KepadatanPenduduk_7',
                opacity: 1,
                color: 'rgba(35,35,35,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1.0, 
                fill: true,
                fillOpacity: 1,
                fillColor: 'rgba(255,0,0,0.4)',
            }
            }
        }
        map.createPane('pane_KepadatanPenduduk_7');
        map.getPane('pane_KepadatanPenduduk_7').style.zIndex = 407;
        map.getPane('pane_KepadatanPenduduk_7').style['mix-blend-mode'] = 'normal';
        var layer_KepadatanPenduduk_7 = new L.geoJson(json_KepadatanPenduduk_7, {
            pane: 'pane_KepadatanPenduduk_7',
            onEachFeature: pop_KepadatanPenduduk_7,
            style: style_KepadatanPenduduk_7_0,
        });
        bounds_group.addLayer(layer_KepadatanPenduduk_7);
        function pop_KantorBJBCabangBraga_8(feature, layer) {
            var popupContent = '<table>\
                    <tr>\
                        <th scope="row">Kantor</th>\
                        <td>' + (feature.properties['Jenis'] !== null ? Autolinker.link(String(feature.properties['Jenis'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_KantorBJBCabangBraga_8_0() {
            return {
                pane: 'pane_KantorBJBCabangBraga_8',
        rotationAngle: 0.0,
        rotationOrigin: 'center center',
        icon: L.icon({
            iconUrl: 'markers/town-hall-15.svg',
            iconSize: [19.0, 19.0]
        }),
            }
        }
        map.createPane('pane_KantorBJBCabangBraga_8');
        map.getPane('pane_KantorBJBCabangBraga_8').style.zIndex = 408;
        map.getPane('pane_KantorBJBCabangBraga_8').style['mix-blend-mode'] = 'normal';
        var layer_KantorBJBCabangBraga_8 = new L.geoJson(json_KantorBJBCabangBraga_8, {
            pane: 'pane_KantorBJBCabangBraga_8',
            onEachFeature: pop_KantorBJBCabangBraga_8,
            pointToLayer: function (feature, latlng) {
                var context = {
                    feature: feature,
                    variables: {}
                };
                return L.marker(latlng, style_KantorBJBCabangBraga_8_0(feature));
            },
        });
        bounds_group.addLayer(layer_KantorBJBCabangBraga_8);
        map.addLayer(layer_KantorBJBCabangBraga_8);
        var baseMaps = {};
        L.control.layers(baseMaps,{'<img src="legend/KantorBJBCabangBraga_8.png" /> Kantor Cabang Braga': layer_KantorBJBCabangBraga_8,'Kepadatan Penduduk<br /><table><tr><td style="text-align: center;"><img src="legend/KepadatanPenduduk_7_1870192720.png" /></td><td> 1870 - 19272 </td></tr><tr><td style="text-align: center;"><img src="legend/KepadatanPenduduk_7_19272366731.png" /></td><td> 19272 - 36673 </td></tr><tr><td style="text-align: center;"><img src="legend/KepadatanPenduduk_7_36673540752.png" /></td><td> 36673 - 54075 </td></tr></table>': layer_KepadatanPenduduk_7,'Minimarket, Sembako, Warung Makan<br /><table><tr><td style="text-align: center;"><img src="legend/MinimarketSembakoWarungMakan_6_54140.png" /></td><td> 5 - 414 </td></tr><tr><td style="text-align: center;"><img src="legend/MinimarketSembakoWarungMakan_6_4148241.png" /></td><td> 414 - 824 </td></tr><tr><td style="text-align: center;"><img src="legend/MinimarketSembakoWarungMakan_6_82412332.png" /></td><td> 824 - 1233 </td></tr></table>': layer_MinimarketSembakoWarungMakan_6,'Industri Mikro & Kecil<br /><table><tr><td style="text-align: center;"><img src="legend/IndustriMikroKecil_5_02100.png" /></td><td> 0 - 210 </td></tr><tr><td style="text-align: center;"><img src="legend/IndustriMikroKecil_5_2104191.png" /></td><td> 210 - 419 </td></tr><tr><td style="text-align: center;"><img src="legend/IndustriMikroKecil_5_4196292.png" /></td><td> 419 - 629 </td></tr></table>': layer_IndustriMikroKecil_5,'Skala Prioritas Potensi UKM<br /><table><tr><td style="text-align: center;"><img src="legend/SkalaPrioritasPotensiUKM_4_Rendah0.png" /></td><td>Rendah</td></tr><tr><td style="text-align: center;"><img src="legend/SkalaPrioritasPotensiUKM_4_Sedang1.png" /></td><td>Sedang</td></tr><tr><td style="text-align: center;"><img src="legend/SkalaPrioritasPotensiUKM_4_Tinggi2.png" /></td><td>Tinggi</td></tr></table>': layer_SkalaPrioritasPotensiUKM_4,'Produk Unggulan<br /><table><tr><td style="text-align: center;"><img src="legend/ProdukUnggulan_3_Ada0.png" /></td><td>Ada</td></tr><tr><td style="text-align: center;"><img src="legend/ProdukUnggulan_3_TidakAda1.png" /></td><td>Tidak Ada</td></tr></table>': layer_ProdukUnggulan_3,'<img src="legend/BatasKelurahan_2.png" /> Batas Kelurahan': layer_BatasKelurahan_2,'<img src="legend/Radius2Km_1.png" /> Radius 2 Km': layer_Radius2Km_1,'<img src="legend/Radius5Km_0.png" /> Radius 5 Km': layer_Radius5Km_0,}).addTo(map);
        setBounds();
        map.addControl(new L.Control.Search({
            layer: layer_BatasKelurahan_2,
            initial: false,
            hideMarkerOnCollapse: true,
            propertyName: 'DESA'}));
        document.getElementsByClassName('search-button')[0].className +=
         ' fa fa-binoculars';
        </script>
    </body>
</html>
