Adding popup info in openlayers?
Im using th开发者_运维技巧is code to load a kml file over the map which in this case Im using OpenStreetMap.
I want to know how can I add a popup when clicking on the kml(road) so that it shows some information about it.var line_1 = new OpenLayers.Layer.GML(
'Line - 1',
"lines/line_1.kml",
{
visibility: true,
format: OpenLayers.Format.KML,
style:
{
strokeWidth: 4,
strokeColor: "#ff0000",
strokeOpacity: 1
},
projection: map.displayProjection
}
);
A GML layer is really a Vector layer instantiated with GML data. So you can look into how Vector layers should be used for opening popups. Your example is already doing that.
They use a Select Control and opens the popup when a feature is selected:
selectControl = new OpenLayers.Control.SelectFeature(polygonLayer,
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
Where polygonLayer
in your case would be line_1
instead.
Create a method onFeatureSelect
where you open a popup:
function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,
"<div style='font-size:.8em'>Feature: " + feature.id +"<br>Area: " + feature.geometry.getArea()+"</div>",
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
Where map
is your map object.
Try it out and comment on your progress or questions.
精彩评论