I know this may be a duplicate question. I'm new in this field.I am developing a website in php here I have one leaflet map for Kerala state. I'm drawing this using the goejson using leaflet. So my function is if user clicks on any district it get zoom to the map box. it is working fine. The what is my problem is i have on table left side of map. it is the list of all districts in Kerala. i want to click on this name in table ie for eg if the user clicks THIRUVANANTHAPURAM the map should zoom to THIRUVANANTHAPURAM.
Please have a look at below picture.
In this picture fig 1 is the Kerala map that i have created. in that map if clicks any district( blue dotted all polygons are one district) it gets zoom to show that districts with some points. the fig 2 shows this thing. this is working fine.
the left side is table of contents as all district name in Kerala. what i want to do na if the user clicks any name in left side table map should get zoom like fig 2 as corresponding district .
please have alook at my below code.
HTML
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<link rel="stylesheet" href="leaflet/leaflet.css"/>
<script src="leaflet/leaflet.js"></script>
<script src="leaflet/leaflet-src.js"></script>
<script src="leaflet/geoGson.js"></script><!-- geo json to draw the map-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="./leaflet/locations/locationGeoGson.js"></script><!-- geo json to draw the points on each district-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCePQZCvtV-rHrEShq2gOaXUvqMn9bUU0" async defer></script>
<script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>
</head>
<body>
<table width="100%" border="1">
<tr>
<td width="20%">
<table width="100%" border="0" id="list">
<tr>
<td colspan="2" style="color: red; font-size: 20px;font-weight: bolder;">DISTRICT</td>
</tr>
<tr style="height: 40px;">
<td width="100%" colspan="2"><a href="#"> <img src="./images/back.png"height="40px" /> </a></td>
</tr>
<tr style="height: 40px;">
<td width="10%">1</td>
<td width="90%"><a href="#" >THIRUVANANTHAPURAM</a></td>
</tr>
<tr style="height: 40px;">
<td>2</td>
<td><a href="#">KOLLAM</a></td>
</tr>
<tr style="height: 40px;">
<td>3</td>
<td><a href="#">PATHANAMTHITTA</a></td>
</tr>
<tr style="height: 40px;">
<td>4</td>
<td><a href="#">ALAPPUZHA</a></td>
</tr>
<tr style="height: 40px;">
<td>5</td>
<td><a href="#">KOTTAYAM</a></td>
</tr>
<tr style="height: 40px;">
<td>6</td>
<td><a href="#">IDUKKI</a></td>
</tr>
<tr style="height: 40px;">
<td>7</td>
<td><a href="#">ERNAKULAM</a></td>
</tr>
<tr style="height: 40px;">
<td>8</td>
<td><a href="#">THRISSUR</a></td>
</tr>
<tr style="height: 40px;">
<td>9</td>
<td><a href="#">PALAKKAD</a></td>
</tr>
<tr style="height: 40px;">
<td>10</td>
<td><a href="#">MALAPPURAM</a></td>
</tr>
<tr style="height: 40px;">
<td>11</td>
<td><a href="#">KOZHIKODE</a></td>
</tr>
<tr style="height: 40px;">
<td>12</td>
<td><a href="#">WAYANAD</a></td>
</tr>
<tr style="height: 40px;">
<td>13</td>
<td><a href="#">KANNUR</a></td>
</tr>
<tr style="height: 40px;">
<td>14</td>
<td><a href="#">KASARAGOD</a></td>
</tr>
</table>
</td>
<td width="30%">
<div id="map" style="border: 1px solid red;height: 670px;width: 100%; " align="center"> </div>
</td>
<td width="25%">
<table width="100%" border="0">
<tr>
<td colspan="2" style="color: red; font-size: 20px;font-weight: bolder;">CATEGORY</td>
</tr>
<tr style="height: 40px;">
<td width="10%">1</td>
<td width="90%">GUEST HOUSES</td>
</tr>
<tr style="height: 40px;">
<td>2</td>
<td>HOTELS</td>
</tr>
<tr style="height: 40px;">
<td>3</td>
<td>MOTELS</td>
</tr>
<tr style="height: 40px;">
<td>4</td>
<td>TAMARINDS</td>
</tr>
<tr style="height: 40px;">
<td>5</td>
<td>PARKS</td>
</tr>
<tr style="height: 40px;">
<td>6</td>
<td>PALACES</td>
</tr>
<tr style="height: 40px;">
<td>7</td>
<td>BOAT CLUBS</td>
</tr>
<tr style="height: 40px;">
<td>8</td>
<td>TOURIST AMENITY CENTERS</td>
</tr>
<tr style="height: 40px;">
<td>9</td>
<td>INFORMATION CENTERS</td>
</tr>
<tr>
<td>
<div id="data"> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
MY JS
<script type="text/javascript">
var statesData="";
var districtLayer="",Kerala_Layer_Group="";
var pointJson="";
var map = L.map('map');
map.setView([10.54265308,76.13877106], 7);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.control.scale().addTo(map);
var customControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
container.style.backgroundColor = 'white';
container.style.backgroundImage = "url(./Images/back_multim.jpg)";
container.style.backgroundSize = "30px 30px";
container.style.width = '30px';
container.style.height = '30px';
container.onclick = function(){
console.log('buttonClicked');
map.removeLayer(pointJson);
map.setView([10.54265308,76.13877106], 7);
}
return container;
}
});
map.addControl(new customControl());
// control that shows state info on hover
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4>KERALA 2016</h4>' + (props ?
' ' + props.district + ' '
: 'Hover over a district');
};
info.addTo(map);
// get color depending on population density value
function getColor(d) {
return d=="Alappuzha"?'#cb41ea':
d=="Ernakulam"?'#4082ec':
d=="Idukki"?'#5553d4':
d=="Kannur"?'#e04b49':
d=="Kasargod"?'#28edc6':
d=="Kollam"?'#26b5dc':
d=="Kottayam"?'#6316d0':
d=="Kozhikkode"?'#e281a7':
d=="Malappuram"?'#54e254':
d=="Palakkad"?'#6ed095':
d=="Pathanamthitta"?'#dab933':
d=="Thiruvananthapuram"?'#69d91d':
d=="Thrissur"?'#ee40c9':
d=="Wayanad"?'#e99b67':'#000';
}
function style(feature) {
return {
weight: 1.5,
opacity: 1,
//color: 'black',
dashArray: '2',
fillOpacity: 0.0,
//fillColor: getColor(feature.properties.district)
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 1,
//color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
console.log(e.target);
map.fitBounds(e.target.getBounds());
addGeoJsonToMap(e);
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
var statesData=GeoDataJson;
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
function addGeoJsonToMap(e){
//alert("im here");
var layerp = e.target;
map.removeLayer(pointJson);
var districtName=layerp.feature.properties.district;//alert(districtName);
console.log(districtName);
switch(districtName){
case 'Thiruvananthapuram':
districtNameJson=Point_Thiruvananthapuram;
break;
case 'Kollam':
districtNameJson=Point_Kollam;
break;
case 'Alappuzha':
districtNameJson=Point_Alappuzha;
break;
case 'Pathanamthitta':
districtNameJson=Point_Pathanamthitta;
break;
}
var dataJson=districtNameJson;
//var dataJson=
pointJson = new L.GeoJSON(dataJson, {
style: stylePoint,
onEachFeature: addClickFeature
});
map.addLayer(pointJson);
}
function stylePoint(feature) {
return {
weight: 1.5,
opacity: 1,
color: 'red',
dashArray: '2',
fillOpacity: 1.0,
fillColor: getColor(feature.properties.district)
};
}
function addClickFeature(feature, layer) {
layer.on({
mouseover: openPopup,
mouseout: closePopup,
click: clickPonit
});
}
function openPopup(e){
var layerp = e.target;
var latLong=layerp.feature.geometry.coordinates;
var HtmlContents="";
HtmlContents+="<a href='#'>"+layerp.feature.properties.category+"<img src='./images/download.png'></a>"
layerp.bindPopup(HtmlContents, {
closeButton: true,
offset: L.point(0, -20)
});
layerp.addTo(map);
var templatlng =new L.LatLng(latLong[1],latLong[0]);
var popup = L.popup()
.setLatLng(templatlng)
.setContent(HtmlContents);
map.openPopup(popup);
}
function clickPonit(e){
var layer = e.target;
info.update = function (props) {
this._div.innerHTML = '<h4>KERALA 2016</h4>' + (layer.feature.properties.category);
};
info.addTo(map);
}
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;
};
</script>
Please help me to solve this, i have googled it but i didn't find the ans for this. this is one of the example . But i don't want to do like this my thing because entirely different from this.
