1

This is the code to highlight and pop up a country area on mouse click:

window.onload = function () {
    map = new OpenLayers.Map('map', {sphericalMercator: true});
    var osm = new OpenLayers.Layer.OSM({sphericalMercator: true});

    var shpLayer = new OpenLayers.Layer.Vector({projection: new OpenLayers.Projection('EPSG:4326')});
    map.addLayers([osm, shpLayer]);
    map.setCenter(new OpenLayers.LonLat(0, 0), 1);

    // Interaction; not needed for initial display.
    selectControl = new OpenLayers.Control.SelectFeature(shpLayer);
    map.addControl(selectControl);
    selectControl.activate();
    shpLayer.events.on({
        'featureselected': onFeatureSelect,
        'featureunselected': onFeatureUnselect
    });

    // load the shapefile
    var theUrl = 'naturalearthdata/cultural/110m-admin-0-countries';
    getOpenLayersFeatures(theUrl, function (fs) {
    // reproject features
    // this is ordinarily done by the format object, but since we're adding features manually we have to do it.
    var fsLen = fs.length;
    var inProj = new OpenLayers.Projection('EPSG:4326');
    var outProj = new OpenLayers.Projection('EPSG:3857');
    for (var i = 0; i < fsLen; i++) {
        fs[i].geometry = fs[i].geometry.transform(inProj, outProj);
    }
    shpLayer.addFeatures(fs);
    });
}


    // Needed only for interaction, not for the display.
    function onPopupClose(evt) {
        // 'this' is the popup.
        var feature = this.feature;
        if (feature.layer) { // The feature is not destroyed
        selectControl.unselect(feature);
        } else { // After "moveend" or "refresh" events on POIs layer all 
        //     features have been destroyed by the Strategy.BBOX
        this.destroy();
        }
    }
    function onFeatureSelect(evt) {
        feature = evt.feature;
        var table = '<table>';
        for (var attr in feature.attributes.values) {
        table += '<tr><td>' + attr + '</td><td>' + feature.attributes.values[attr] + '</td></tr>';
        }
        table += '</table>';
        popup = new OpenLayers.Popup.FramedCloud("featurePopup",
                             feature.geometry.getBounds().getCenterLonLat(),
                             new OpenLayers.Size(100,100), table, null, true, onPopupClose);
        feature.popup = popup;
        popup.feature = feature;
        map.addPopup(popup, true);
    }
    function onFeatureUnselect(evt) {
        feature = evt.feature;
        if (feature.popup) {
        popup.feature = null;
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
        }
    }

I want to highlight a city area using its latitude and longitude - how can I do this?

For Example: I want to highlight California on window load

1

You can use geometry.intersects():

function select() {
    var intersecting_feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-71.104939, 42.418935).transform(
    new OpenLayers.Projection("EPSG:4326"),
    new OpenLayers.Projection("EPSG:3857")));
    //vlayer.addFeatures([intersecting_feature]);
    var features = vlayer.features;
    for (var i = 0; i < features.length; i++) {
        var feature = features[i];
        console.log(feature.geometry);
        var intersection = feature.geometry.intersects(intersecting_feature.geometry);
        if (intersection) {
            console.log("ja");
            selectControl.select(feature);
        }

    }


}

see in action: http://jsfiddle.net/expedio/h1mccjp6/


If just selecting by attribute is ok you can do the following:

You could use the method "getFeaturesByAttribute"

or iterate through all features:

 for(var i = 0; i < yourgeojsonlayer.features.length; i++) { 
    if(yourgeojsonlayer.features[i].attributes.searchedAttribute == 'searchedValue')
     { selectFeatureControl.select(yourgeojsonlayer.features[i]); break; } 
    }

see http://jsfiddle.net/expedio/f2omkcox/

  • Thanks - i want to select city using its latitude and longitude - is it possible? – Tameen Malik Feb 2 '15 at 11:35
  • do you know this example? dev.openlayers.org/releases/OpenLayers-2.12/examples/… – Thomas B Feb 2 '15 at 11:40
  • okay yes i know this – Tameen Malik Feb 2 '15 at 12:12
  • just added an example above that works – Thomas B Feb 2 '15 at 12:14
  • 1
    The geojson you posted was not valid (perhaps copy/paste problem). Perhaps that was the Problem. Otherwise i just adapted the coordinates of the variable "intersecting_feature" and that was all. You can validate your geojson for example at geojsonlint.com – Thomas B Feb 6 '15 at 7:35

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.