Tampil Map Geojson

<?php
/**
    * Author     : Alfikri, M.Kom
    * Created By : Alfikri, M.Kom
    * E-Mail     : alfikri.name@gmail.com
    * No HP      : 081277337405
*/
?>
<!-- Leaflet -->
<script src="<?php echo base_url(); ?>assets/leaflet/leaflet.js"></script>
<script src="<?php echo base_url(); ?>assets/leaflet/Leaflet.fullscreen.min.js"></script>
<script src="<?php echo base_url(); ?>assets/my_map/default.js"></script>
<script>

    $(document).ready(function()
    {
        getLocation();
        $('.lg-item').first().addClass('active');
        $('.lg-item').first().trigger('click');
        $('.table-detail').html('');
    });

    function tampil_geojson_di(id_daerah_irigasi, prop)
    {
        $('.lg-item').removeClass('active');
        $(prop).addClass('active');
        $('.table-detail').html('');

        let id = $(prop).attr('id-dokumentasi');
        $('#'+ id).trigger('click');
        $.ajax(
        {
            url     : baseUrl('public_dashboard/get_file_daerah_irigasi/'),
            dataType: 'JSON',
            type    : 'POST',
            data    : { id_daerah_irigasi : id_daerah_irigasi },
            success : function(data)
            {
                if(data.status == true)
                {
                    bounds_group.clearLayers();
                    $.each(data.data, function(k, v)
                    {
                        geojson(v.file_location, v.id_file_daerah_irigasi, v.kategori);
                    });

                    legend.remove(map);
                    map.addLayer(bang_pelengkap);
                    map.addLayer(bang_utama);
                    map.addLayer(bendung);
                    map.addLayer(sal_primer);
                    map.addLayer(sal_sekunder);
                    legend = L.control.layers(baseLayers, overlays).addTo(map);
                }else{
                    bounds_group.clearLayers();
                }
            }
        });
    }

    function geojson(url, id, kategori)
    {
        map.createPane('pane-'+ id);

        $.getJSON(url,function(data){
            var ratIcon     = L.icon({
                iconUrl     : '../../assets/marker/default_marker.png',
                iconSize    : [ 13, 13]
            });

            var gjson = L.geoJson(data,
            {
                pane            : 'pane-'+ id,
                onEachFeature   : pop_up,
                pointToLayer: function(feature, latlng)
                {
                    var marker = L.marker(latlng, { icon : ratIcon });
                        marker.bindPopup(feature.properties.Nama + '<br/>' + feature.properties.Nomenklatu);

                    return marker;
                }
            });

            switch(kategori) {
              case 'Bang Pelengkap':
                bang_pelengkap.clearLayers();
                gjson.addTo(bang_pelengkap).addTo(bounds_group);
                break;
              case 'Bang Utama':
                bang_utama.clearLayers();
                gjson.addTo(bang_utama).addTo(bounds_group);
                break;
              case 'Bendung':
                bendung.clearLayers();
                gjson.addTo(bendung).addTo(bounds_group);
                break;
              case 'Sal Primer':
                sal_primer.clearLayers();
                gjson.addTo(sal_primer).addTo(bounds_group);
                break;
              case 'Sal Sekunder':
                sal_sekunder.clearLayers();
                gjson.addTo(sal_sekunder).addTo(bounds_group);
                break;
            }

            map.addLayer(gjson);
            setBounds();
        });
    }

    var ZoomViewer = L.Control.extend(
    {
        onAdd: function(){
            var gauge = L.DomUtil.create('div');
            gauge.style.width = '100px';
            gauge.style.background = 'rgba(255,255,255,0.5)';
            gauge.style.textAlign = 'left';
            map.on('zoomstart zoom zoomend', function(ev){
                gauge.innerHTML = 'Zoom level: ' + map.getZoom();
                if(map.getZoom() < 13)
                {
                    bang_pelengkap.remove();
                    bang_utama.remove();
                    sal_primer.addTo(map);
                    sal_sekunder.addTo(map);
                }else{
                    bang_pelengkap.addTo(map);
                    bang_utama.addTo(map);
                }
            })
            return gauge;
        }
    });

    (new ZoomViewer).addTo(map);

</script>