

<!-- Make sure you put this AFTER Leaflet's CSS -->

 <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="

   crossorigin=""></script>

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCHqhgVQmhdp3XAJ91LHRdXJ3YOjP1V2Gs" async defer></script>



 <script src="assets/js/leaflet-panel-layers-master/src/leaflet-panel-layers.js"></script>

 <script src="assets/js/leaflet.ajax.js"></script>

 <script src="assets/js/Leaflet.GoogleMutant.js"></script>



 <script type="text/javascript">



   	// var map = L.map('mapid').setView([3.2352436, 99.3412807], 10);

		var map = L.map('mapid').setView([3.2304447,99.315189], 11);

		map.zoomControl.setPosition('topright');



    var LayerKita = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {

          maxZoom: 19,

          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'

    });

    var roadMutant = L.gridLayer.googleMutant({

				maxZoom: 24,

				type:'roadmap'

		});

		

		map.addLayer(LayerKita);





	function popUp(f,l){

	    var out = [];

	    if (f.properties){



	    		for(key in f.properties){

              out.push(key+": "+f.properties[key]);

          }

          l.bindPopup(out.join("<br />"));

          l.bindTooltip(f.properties['<B>KECAMATAN</B>'],{

	        	permanent:true,

	        	direction:"center",

	        	className:"no-background"

	        });

	    }

	}





	function iconByName(name) {

		return '<i class="icon" style="background-color:'+name+';border-radius:50%"></i>';

	}



	function featureToMarker(feature, latlng) {

		return L.marker(latlng, {

			icon: L.divIcon({

				className: 'marker-'+feature.properties.amenity,

				html: iconByName(feature.properties.amenity),

				iconUrl: '../images/markers/'+feature.properties.amenity+'.png',

				iconSize: [25, 41],

				iconAnchor: [12, 41],

				popupAnchor: [1, -34],

				shadowSize: [41, 41]

			})

		});

	}



	var baseLayers = [

		{

			name: "OpenStreetMap",

			layer: LayerKita

		},

		{

			name: "OpenCycleMap",

			layer: L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png')

		},

		{

			name: "Outdoors",

			layer: L.tileLayer('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png')

		},

		{

			name:'Satelite Google',

			layer : L.gridLayer.googleMutant({

				maxZoom: 24,

				type:'satellite'

			})

		},

		{

			name: "Roadmap Google",

			layer: roadMutant

		}

	];



	<?php

		$getKecamatan=$db->ObjectBuilder()->get('m_kecamatan');

		foreach ($getKecamatan as $row) {

			?>



			var myStyle<?=$row->id?> = {

			    "color": "<?=$row->warna_kecamatan?>",

			    "weight": 3,

			    "opacity": 2

			};



			<?php

			$arrayKec[]='{

			name: "'.$row->kecamatan.'",

			icon: iconByName("'.$row->warna_kecamatan.'"),

			layer: new L.GeoJSON.AJAX(["assets/unggah/geojson/BatasKab/'.$row->geojson_kecamatan.'"],{onEachFeature:popUp,style: myStyle'.$row->id.',pointToLayer: featureToMarker }).addTo(map)

			}';

		}

	?>

	// var tooltip = L.tooltip(latlng, {content: 'Hello world!<br />This is a nice tooltip.'}).addTo(map);



	var overLayers = [{

		group: "Daftar Kecamatan",

		layers: [

			<?=implode(',', $arrayKec);?>

		]

	}

	];



	

	var panelLayers = new L.Control.PanelLayers(baseLayers, overLayers,{

		collapsibleGroups: true,

		position:'topleft'

	});



	map.addControl(panelLayers);



   </script>

