1

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.enter image description here

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">&nbsp;</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">&nbsp;</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 ? '&ndash;' + 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.

0

i have added this line

<table  width="100%"  border="0" id="list">

and in my js i have added

var list = document.getElementById("list");


function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
    var li = document.createElement("li"),
     a = document.createElement("a"),
     content = allProps(feature.properties.district);

    // Create the "button".
    a.innerHTML = content;
    a.href = "#";
    a.layer = layer; // Store a reference to the actual layer.
    a.addEventListener("click", function (event) {
        event.preventDefault(); // Prevent the link from scrolling the page.
        map.fitBounds(this.layer.getBounds());  
        layer.openPopup(); 
    });
    li.appendChild(a);
    list.appendChild(li);
    layer.bindPopup(content);  
}

function allProps(props) {
    var result = [];  
        result.push(props);  
    return result.join(", ");
}

now the problem is solved in my case

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.