1

I currently get to a point where I add a layer to the big cities layer (first layer) from a geojson file and zoom in it. My aim now is when I click on the first layer, another layer should appear for small cities and it is name cities also.

The geojson file has both layer 1 and 2. To know which layer - if name_1==name_2 then it is layer 1 else layer 2

I need help as it is my first project in leaflet .

My code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
            My Map
        </title>
        <!-- Leaflet -->
        <link rel="stylesheet" href="lib/leaflet/leaflet.css" />
        <script src="lib/leaflet/leaflet.js"></script>
        <script src="data/muhafzat.geojson"></script>
        <script src="data/data.geojson"></script>
        <style type="text/css">
            #map { height : 400px; }
            .legend { background : white; line-height : 1.5em}
            .legend i { width : 5em; float : left }
        </style>
    </head>
    <body>
        <h1>My Map</h1>
        <div id="map"></div>
        <script>


            function getCountryColor(popEst){
                if(popEst > 100000000){
                    return 'red';
                }else if(popEst > 50000000){
                    return 'blue';
                }else{
                    return 'green';
                }
            }

            function countriesStyle(feature){
                return {
                    fillColor : getCountryColor(feature.properties.pop_est),
                    weight : 2,
                    opacity : 1,
                    color : 'white',
                    dashArray : 3,
                    fillOpacity : 0.7
                }
            }
             var popmaps = function(feature,layer){
                        var popUp = feature.properties.name
                        layer.bindPopup(String(popUp));
                    }


            var map = L.map('map').setView([43.8476, 18.3564], 13);//Sets the view of the map (geographical center and zoom) with the given animation options.
            var countriesLayer = L.geoJson(
                countries,
                {style : countriesStyle},{
                               pointToLayer:function (feature, latlng) {
                               return L.marker(latlng, {

                                                     fillColor: "#000000",
                                                     color: "green",

                                                     opacity: 1,

                                                     });
                               },
                               onEachFeature:popmaps
                               }).addTo(map);

            L.geoJSON(countries,{
                pointToLayer: function (feature, latlng) {
                    return L.circleMarker(name ,geojsonMarkerOptions);
                }
            }).addTo(map);

            map.fitBounds(countriesLayer.getBounds());//in order to cover the whole canvas

            countriesLayer.on("click", function (event) {//in order to zoom in each layer
                // Assuming the clicked feature is a shape, not a point marker.
                map.fitBounds(event.layer.getBounds());
            });

            var legend = L.control({position : 'bottomright'});
            legend.onAdd = function(map){
                var div = L.DomUtil.create('div', 'legend');
                var labels = [
                    "Population greater than 100000000", 
                    "Population greater than 50000000", 
                    "Population equal or less than 50000000"
                ];


                        var grades = [100000001, 50000001, 50000000];
                div.innerHTML = '<div><b>Legend</b></div>';
                for(var i = 0; i < grades.length; i++){
                    div.innerHTML += '<i style="background:' 
                    + getCountryColor(grades[i]) + '">&nbsp;&nbsp;</i>&nbsp;&nbsp;'
                    + labels[i] + '<br />';
                }
                return div;
            }
            legend.addTo(map);
        </script>

        <div id='buttons'>

        <input type="button" id="l1" value="layer one" onclick="alert('layer one');msgr(); "/>
        <input type="button" id="l2" value="layer two" onclick="dofunction();"/>
        <input type="button" id="l3" value="layer three" onclick="dofunction(); "/>
        </div>

    </body>
</html>

My GeoJSON file looks like :

var countries ={
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "ID_0": 116, "ISO": "JOR", "NAME_0": "Jordan", "ID_1": 1, "NAME_1": "Ajlun", "ID_2": 1, "NAME_2": "Ajloun", "HASC_2": "JO.AJ.AJ", "CCN_2": 0, "CCA_2": null, "TYPE_2": "Nahia", "ENGTYPE_2": "Sub-Province", "NL_NAME_2": null, "VARNAME_2": "Ajlun" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 35.709953308105526, 32.386882781982479 ], [ 35.721813201904297, 32.384082794189567 ], [ 35.737407684326115, 32.381393432617187 ], [ 35.740989685058594, 32.380111694335994 ], [ 35.746570587158203, 32.376800537109375 ], [ 35.750656127929631, 32.375484466552848 ], [ 35.755344390869141, 32.374767303466797 ], [ 35.760337829589957, 32.374446868896541 ], [ 35.767951965332088, 32.374534606933651 ], [ 35.772846221923942, 32.375022888183707 ], [ 35.777328491211051, 32.376033782959098 ], [ 35.779300689697322, 32.376819610595817 ], [ 35.786537170410156, 32.381053924560547 ], [ 35.794475555419922, 32.383533477783203 ], [ 35.798202514648438, 32.38510894775402 ], [ 35.805011749267635, 32.389827728271484 ], [ 35.820453643798885, 32.397651672363338 ], [ 35.827964782714844, 32.401065826415959 ], [ 35.835235595703182, 32.405872344970703 ], [ 35.840755462646598, 32.404201507568416 ], [ 35.849449157714957, 32.400852203369254 ], [ 35.859226226806754, 32.398956298828182 ], [ 35.872241973877067, 32.397621154785213 ], [ 35.88483810424799, 32.399063110351506 ], [ 35.889312744140739, 32.399990081787109 ], [ 35.893348693847656, 32.401485443115234 ], [ 35.898902893066406, 32.405239105224723 ], [ 35.910152435302848, 32.411609649658203 ], [ 35.922111511230582, 32.420455932617187 ], [ 35.923290252685604, 32.402427673339901 ], [ 35.924568176269645, 32.391437530517635 ], [ 35.925888061523551, 32.386489868164063 ], [ 35.928176879882926, 32.382293701171875 ], [ 35.932826995849666, 32.377632141113338 ], [ 35.946205139160156, 32.369243621826172 ], [ 35.955009460449276, 32.365921020507813 ], [ 35.959201812744254, 32.363773345947322 ], [ 35.960937500000057, 32.362270355224666 ], [ 35.967174530029354, 32.354835510253906 ], [ 35.955650329589957, 32.348663330078239 ], [ 35.950786590576286, 32.344406127929744 ], [ 35.945461273193473, 32.340801239013615 ], [ 35.941913604736328, 32.337791442871207 ], [ 35.938816070556584, 32.335971832275504 ], [ 35.928977966308707, 32.332870483398551 ], [ 35.919715881347656, 32.327957153320312 ], [ 35.908443450927848, 32.325328826904411 ], [ 35.903789520263672, 32.323863983154297 ], [ 35.889163970947322, 32.317707061767692 ], [ 35.885223388671932, 32.3155517578125 ], [ 35.883338928222713, 32.314140319824332 ], [ 35.880100250244141, 32.310871124267578 ], [ 35.877803802490234, 32.307037353515682 ], [ 35.873989105224609, 32.294704437255859 ], [ 35.869277954101676, 32.284889221191463 ], [ 35.868049621582088, 32.280391693115234 ], [ 35.865505218505916, 32.264183044433707 ], [ 35.863887786865234, 32.259944915771484 ], [ 35.85990142822277, 32.252243041992188 ], [ 35.856620788574276, 32.242519378662223 ], [ 35.854736328125057, 32.239189147949332 ], [ 35.845932006835994, 32.230449676513729 ], [ 35.840759277343807, 32.226772308349609 ], [ 35.837230682373104, 32.223606109619197 ], [ 35.834396362304631, 32.221618652343807 ], [ 35.820922851562557, 32.214927673339901 ], [ 35.810604095459098, 32.210945129394645 ], [ 35.805030822753906, 32.208404541015682 ], [ 35.799484252929631, 32.205989837646484 ], [ 35.786060333251953, 32.201190948486328 ], [ 35.783786773681641, 32.209152221679688 ], [ 35.783321380615348, 32.213363647460994 ], [ 35.784141540527401, 32.219768524169979 ], [ 35.786071777343807, 32.224590301513786 ], [ 35.787792205810547, 32.232173919677791 ], [ 35.792560577392578, 32.247150421142521 ], [ 35.794258117675838, 32.250358581542969 ], [ 35.797103881835994, 32.253665924072266 ], [ 35.798732757568416, 32.256496429443303 ], [ 35.799480438232479, 32.260040283203125 ], [ 35.79913330078125, 32.263755798339901 ], [ 35.797370910644645, 32.267311096191406 ], [ 35.796089172363281, 32.268619537353572 ], [ 35.793090820312557, 32.270637512207088 ], [ 35.783493041992188, 32.275585174560547 ], [ 35.779201507568359, 32.277057647705192 ], [ 35.775104522705135, 32.277946472167912 ], [ 35.767448425292912, 32.278743743896541 ], [ 35.760246276855469, 32.277339935302734 ], [ 35.755218505859489, 32.275367736816463 ], [ 35.748241424560661, 32.270988464355526 ], [ 35.736751556396541, 32.266860961914176 ], [ 35.729312896728572, 32.262603759765682 ], [ 35.715927124023551, 32.258949279785213 ], [ 35.704689025878849, 32.254459381103516 ], [ 35.700469970703239, 32.253166198730469 ], [ 35.685756683349609, 32.249370574951229 ], [ 35.667037963867244, 32.245250701904297 ], [ 35.671630859375057, 32.254451751708984 ], [ 35.674545288086051, 32.261421203613281 ], [ 35.675868988037166, 32.266059875488338 ], [ 35.677940368652457, 32.277114868164119 ], [ 35.679145812988281, 32.281028747558594 ], [ 35.683525085449162, 32.287788391113338 ], [ 35.685024261474666, 32.291553497314567 ], [ 35.688076019287166, 32.311332702636662 ], [ 35.689579010009766, 32.315082550048828 ], [ 35.693088531494197, 32.320110321044979 ], [ 35.694602966308594, 32.323894500732479 ], [ 35.695453643798828, 32.328216552734432 ], [ 35.697509765625, 32.347080230713004 ], [ 35.701675415039063, 32.360050201416129 ], [ 35.706249237060604, 32.372310638427734 ], [ 35.709953308105526, 32.386882781982479 ] ] ] } },
{ "type": "Feature", "properties": { "ID_0": 116, "ISO": "JOR", "NAME_0": "Jordan", "ID_1": 1, "NAME_1": "Ajlun", "ID_2": 2, "NAME_2": "Kofranjah", "HASC_2": "JO.AJ.KF", "CCN_2": 0, "CCA_2": null, "TYPE_2": "Nahia", "ENGTYPE_2": "Sub-Province", "NL_NAME_2": null, "VARNAME_2": null }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 35.742671966552791, 32.169574737548828 ], [ 35.733383178710994, 32.174312591552734 ], [ 35.72740554809576, 32.177928924560547 ], [ 35.722118377685661, 32.181858062744254 ], [ 35.713947296142521, 32.189167022705021 ], [ 35.70883941650402, 32.194160461425895 ], [ 35.702774047851676, 32.201755523681584 ], [ 35.697807312011832, 32.205844879150447 ], [ 35.693527221679744, 32.210323333740348 ], [ 35.687484741211051, 32.215686798095703 ], [ 35.677803039550724, 32.228816986084098 ], [ 35.667037963867244, 32.245250701904297 ], [ 35.685756683349609, 32.249370574951229 ], [ 35.700469970703239, 32.253166198730469 ], [ 35.704689025878849, 32.254459381103516 ], [ 35.715927124023551, 32.258949279785213 ], [ 35.729312896728572, 32.262603759765682 ], [ 35.736751556396541, 32.266860961914176 ], [ 35.748241424560661, 32.270988464355526 ], [ 35.755218505859489, 32.275367736816463 ], [ 35.760246276855469, 32.277339935302734 ], [ 35.767448425292912, 32.278743743896541 ], [ 35.775104522705135, 32.277946472167912 ], [ 35.779201507568359, 32.277057647705192 ], [ 35.783493041992188, 32.2755851745]] ] } }
]}
1

An example has been given on the leaflet original website

http://leafletjs.com/examples/layers-control/

If you use it and implement your logic of geojson instead of markers you can acheive said objective

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.