[GIS] How to ‘highlight’ a selected country

openlayers-2web-mapping

Over the past several days I've read as much as possible regarding the OpenLayers API (within a JavaScript/jQuery environment), yet I'm still having trouble in getting my head around what I believe to be basic features.

I can successfully place maps on my page, set bounds, etc, etc, but I'm having an incredibly hard time in the following:

My requriements are extremely simple, I want a 'file' (KML, JS, I don't know) of each country and it's borders so that I can simply (as an example) select a country from a dropdown list and OpenLayers highlight that country!

I did think it would be a simple task, have gone through all 220 examples of the OpenLayers website and can't see anything remotely close.

I've been here: http://thematicmapping.org/downloads/world_borders.php

Downloaded the WorldData which I thought would have the vector co-ordinates for the worlds countries borders, it looks to be a database file but haven't a clue what to do with this!

If someone can break down the basics, I'd be incredibly grateful and better still show a basic example of what I'm after, I should be able to learn from it.

Many thanks,

Best Answer

To Select and Highlight an feature in Openlayers

You can use the WKT format (convert your shapefiles to this format) (QGIS will do this if save the shapefile as csv) Converting Shapefiles to Text (ASCII) files?

enter image description here

    var highlightCtrl = new OpenLayers.Control.SelectFeature(vectors, {
        hover: true,
        highlightOnly: true,
        renderIntent: "temporary",
        eventListeners: {
            beforefeaturehighlighted: report,
            featurehighlighted: report,
            featureunhighlighted: report
        }
    });

    var selectCtrl = new OpenLayers.Control.SelectFeature(vectors,
        {clickout: true}
    );

    map.addControl(highlightCtrl);
    map.addControl(selectCtrl);

    highlightCtrl.activate();
    selectCtrl.activate();

http://openlayers.org/dev/examples/highlight-feature.html