TIF_E41201448/application/views/cluster/v_peta.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$this->load->view('dist/_partials/header');
?>
      <!-- Main Content -->
      <div class="main-content">
        <section class="section">
          <div class="section-header">
            <h1>Peta</h1>
          </div>

          <div class="section-body">
		  <div class="row">
		<div class="col-md-12">
			<div class="card">
		  <div class="tile">
    <div class="tile-body">
    <div id="mapid" style="height:600px;"></div>
    </div>
</div>

<script>
	var map = L.map('mapid').setView([5.034550, 97.358286], 12);

	L.tileLayer(
		'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoicmVkb2syNSIsImEiOiJja3ZxOGxrdjI0NDhpMnVxZnB5cmZvbTdhIn0.BexWaptf8QYfClgq9iSuiQ', {
			id: 'mapbox/streets-v12',
			attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
				'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
			container: 'map-view', // container ID
			zoom: 12 // starting zoom
		}).addTo(map);

		

	// control that shows state info on hover
	var info = L.control();

	info.onAdd = function (map) {
		this._div = L.DomUtil.create('div', 'info1');
		this.update();
		return this._div;
	};

	info.update = function (props, data, altId) {
			this._div.innerHTML = '<h4>Data daerah rawan  lhoksukon</h4>';
			if (props) {
				this._div.innerHTML +=
					'<div class="container"><a class="btn btn-success btn-block" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" style="color:white;">Data daerah </a><div class="collapse" id="collapseExample"><div class="card card-body"><b> Kecamatan : ' +
					props.NAME_3 + '</b> Kampung : ' + props.NAME_4 + '<br><br>' + data + '</div></div></div>';
			} else {
				this._div.innerHTML += 'Dekatkan mouse untuk melihat data';
			}
		};

	info.addTo(map);

	function getColor(d) {
		return d == 3 ? '#ff510d' :
			d == 2 ? '#fcff0d' :
			d == 1 ? '#0dffa8' :
			'#0dffa8';
	}

	function style(feature) {
		return {
			weight: -1,
			opacity: 0.5,
			color: 'black',
			
			fillOpacity: 0.4,
			fillColor: getColor(feature)
		};
	}

	function highlightFeature(e) {
		var layer = e.target;
		var placeId = layer.feature.properties.GID_4;
		layer.setStyle({
			weight: 5,
			opacity: 1,
			color: 'black',
			dashArray: '',
			fillOpacity: 1
		});

		if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
			layer.bringToFront();
		}

		$.ajax({
			method: 'POST',
			url: '<?php echo base_url(); ?>dist/get_info',
			data: {
				placeId: placeId,
			},
			success: function (data) {
				var result = JSON.parse(data);
					var altId = result[0].altId;
					var ket = "<table>";
					result.forEach(function (item, index) {
						ket += "<tr><td>" + item.kriteria + "</td><td> : " + item.data +" </td></tr>";
					});
					ket += "</table>";

					info.update(layer.feature.properties, ket, altId);
			}
		});


	}

	var jsonData;

	function resetHighlight(e) {
		// jsonData.resetStyle(e.target);
		var layer = e.target;
		layer.setStyle({
			weight: -1,
			opacity: 0.5,
			color: 'black',
			fillOpacity: 0.4,
		});

		if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
			layer.bringToFront();
		}

		info.update();
	}

	function zoomToFeature(e) {
		map.fitBounds(e.target.getBounds());
	}

	function onEachFeature(feature, layer) {
		layer.on({
			mouseover: highlightFeature,
			mouseout: resetHighlight,
			
		});
	}

	
    <?php
	foreach($rendah as $r) {
		$data_kamp = $this->db->query("SELECT alternatif_file FROM alternatif WHERE alternatif_id = '$r'")->row(); ?>
		var jsonData = new L.GeoJSON.AJAX([
			"<?php echo base_url() ?>assets/geojson/<?=$data_kamp->alternatif_file ?>"
		], {
			onEachFeature: onEachFeature,
			style: style(1)
		}).addTo(map); <?php
	}
	foreach($sedang as $s) {
		$data_kamp = $this->db->query("SELECT alternatif_file FROM alternatif WHERE alternatif_id = '$s'")->row(); ?>
		var jsonData = new L.GeoJSON.AJAX([
			"<?php echo base_url() ?>assets/geojson/<?=$data_kamp->alternatif_file ?>"
		], {
			onEachFeature: onEachFeature,
			style: style(2)
		}).addTo(map); <?php
	}
	foreach($tinggi as $t) {
		$data_kamp = $this->db->query("SELECT alternatif_file FROM alternatif WHERE alternatif_id = '$t'")->row(); ?>
			var jsonData = new L.GeoJSON.AJAX([
				"<?php echo base_url() ?>assets/geojson/<?=$data_kamp->alternatif_file ?>"
			], {
				onEachFeature: onEachFeature,
				style: style(3)
			}).addTo(map); <?php
		} ?>

    // map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');


    var legend = L.control({
        position: 'bottomright'
    });

	legend.onAdd = function (map) {

		var label = ['Sangat Rawan', 'Rawan', 'Aman'];

		var div = L.DomUtil.create('div', 'info1 legend'),
			grades = [1, 2, 3],
			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) + '"></i>' + label[i]);
		}

		div.innerHTML = labels.join('<br>');
		return div;
	};

	legend.addTo(map);

</script>
          </div>
        </section>
      </div>
<?php $this->load->view('dist/_partials/footer'); ?>