[GIS] Displaying specific country into map using countries.geojson file

geojsonopenlayers

I was trying different ways to display one country using countries.geojson file, but I unable to display.
I tried like this, but map is not displaying….

var map = new ol.Map({
    layers : [
        new ol.layer.Tile({
            source : new ol.source.OSM()
        }),   
        vector],
    target : document.getElementById('map'),
    view : new ol.View({
        center : [ 0,0 ],
        zoom : 4 
    })
});

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'https://raw.githubusercontent.com/openlayers/ol3/6838fdd4c94fe80f1a3c98ca92f84cf1454e232a/examples/data/geojson/countries.geojson'
    }),
    style: function(feature, res){
        if(feature.get("name") == "Germany"){
            return new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                })
            });
        }
    }
});

Best Answer

Use a ol.StyleFunction() and get the name (or any other - depending on the source) attribute of the feature. E.g.:

// vector layer
var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'https://raw.githubusercontent.com/openlayers/ol3/6838fdd4c94fe80f1a3c98ca92f84cf1454e232a/examples/data/geojson/countries.geojson'
    }),
    style: function(feature, res){
        // replace "Germany" with any country name you would like to display...
        if(feature.get("name") == "Germany"){
            return new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                })
            });
        }
    }
});

See Demo on JSFiddle

Related Question