CODEWITHSUNDEEP
javascriptjquerygeospatialopenlayersopenstreetmap
Munzilla
Munzilla

Reputation: 3855

Targeting and/or modifying a KML region in OpenLayers

I've built several Javascript applications for map charts using google maps, and I was hoping to recreate these in OpenLayers. I'm finding the documentation on their site pretty confusing and tough to navigate. So far, I'm able to load in my KML, using the following code:

var map = new OpenLayers.Map({
            div: divName,
            layers: [
                new OpenLayers.Layer.OSM(),
                new OpenLayers.Layer.Vector("KML", {
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "data.kml",
                        format: new OpenLayers.Format.KML({
                            extractStyles: true, 
                            extractAttributes: true,
                            maxDepth: 4
                        })
                    })
                })
            ],
            zoom: 4
        });
        map.setCenter(
            new OpenLayers.LonLat(-97, 38).transform(
                new OpenLayers.Projection("EPSG:4326"),
                map.getProjectionObject()
            ), 4
        );

What I'd like to do is be able to modify or target the individual KML regions. For example, just attaching a click event, or changing the background color of the region.
I've looked around and can't seem to find a good example. I have jQuery loaded also if that helps. Any help would be greatly appreciated.

Upvotes: 0

Views: 544

Answers (1)

AlexC
AlexC

Reputation: 10756

You could add events to OpenLayers maps using the OpenLayers.Control.SelectFeature object

To change the background of the objects something like this should work 

var myVectorLayer = map.getLayersByName("KML")[0];

var highlightCtrl = new OpenLayers.Control.SelectFeature(myVectorLayer , {
                hover: true,
                highlightOnly: true,
                renderIntent: "temporary"                   
            });

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

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

To fire further events / get more details from the selected features you can employ

myVectorLayer.events.on({
            "featureselected": function (e) {
                 alert(e.type + " - " + e.feature.id);
    }
});

Upvotes: 1

Related Questions