[GIS] hiding some “feature”s in GeoJSON file on map

featuresgeojsonleafletpolygon

I have geojson file including boundaries of most countries in world.

When I clicked on a "feature" (aka country, or polygon) I want to hide it while keep showing the others. because I am planing to showing more detailed geojson (states, cities) for that clicked country.

I am planning to use Leaflet JS, but I am open to any other libraries as well.

===================

This is the first screen, apply the world countries boundaries.
enter image description here

This is after clicking somewhere on map, I added to US boundaries geoJson to main map variable.

enter image description here

As you can see, I put US geojson upon the world geojson (you can realize that there is still some green area(which comes from world geojson) on the top left part of USA).

What i want is to hide only clicked country, USA in this case, and show more detailed geojson belong to that country.

PS: I dont use tiles, I need to clarify countries by geojson

Best Answer

Leaflet has a useful filter function that could easily be triggered based on some event.

Alternatively, mapbox.js which is built on top of leaflet, has a useful setFilter function that you can apply to the a geojson feature layer.

Related Solutions

Leaflet GeoJSON – How to Load External GeoJSON File into Leaflet Map

Look into Leaflet-Ajax. It streamlines everything. Will give up-vote for Neogeomat for mentioning it.

Get the script here (github repo) and add it to your header:

<script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>

Then it's a matter of uploading with the file name.

var geojsonLayer = new L.GeoJSON.AJAX("foo.geojson");       
geojsonLayer.addTo(map);

Really straight forward fix and it works. So yay.

[GIS] How to modify features during runtime, in a GeoJSON feature group on Leaflet

I have written down a small code to modify geojson feature style on runtime using leaflet. you can try it on jsFiddle or use the following code test locally.

I hope it will help.

Here is the code:

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Coloring Geojson Features</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<style>
#map {
    width: 800px;
    height: 500px;
}
.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
.legend {
    text-align: left;
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://leafletjs.com/dist/leaflet.js"></script> 
<script type="text/javascript" src="http://leafletjs.com/examples/us-states.js"></script> 
<script type="text/javascript">
    $(document).ready(function () {
        init_map();
        init_geojson();
        $("#btn").on('click', function () {
            var stateName = $('#statename').val();
            console.log(stateName);
            init_geojson(stateName);
        });
    });
    var map, geojson, sn;

    function init_map() {
        map = L.map('map').setView([37.8, -96], 4);
        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);
        geojson = L.geoJson(statesData, {
            style: style
            //onEachFeature: onEachFeature,
        }).addTo(map);
    }

    function init_geojson(n) {
        console.log(geojson.options);
        map.removeLayer(geojson);
        if (n != "") {
            sn = n;
            console.log(sn);
            geojson = L.geoJson(statesData, {
                style: style
            }).addTo(map);
        }
    }

    function style(feature) {
        console.log(sn);
        if (sn == feature.properties.name) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.3,
                fillColor: '#ff0000'
            };
        } else {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.3,
                fillColor: '#666666'
            };
        }
    }
</script>
<input type="text" id="statename" value="Alaska">
<input type="button" id="btn" value="Set Color"/>
</body>
</html>

Best Answer

Related Solutions

Leaflet GeoJSON – How to Load External GeoJSON File into Leaflet Map

[GIS] How to modify features during runtime, in a GeoJSON feature group on Leaflet

Related Question