var lon = parseFloat(jq_sledrun.attr('data-lon'));
var lat = parseFloat(jq_sledrun.attr('data-lat'));
var point = new OpenLayers.Geometry.Point(lon, lat).transform(EPSG4326, EPSG3857);
- layer_sledruns.addFeatures([new OpenLayers.Feature.Vector(point, {label: jq_sledrun.attr('data-title')})]);
+ layer_sledruns.addFeatures([new OpenLayers.Feature.Vector(point, {
+ label: jq_sledrun.attr('data-title'),
+ url: jq_sledrun.attr('data-url')
+ })]);
});
map.addControl(new OpenLayers.Control.SelectFeature(layer_sledruns, {
hover: true,
autoActivate: true,
renderIntent: "highlight"
}));
+ map.addControl(new OpenLayers.Control.SelectFeature(layer_sledruns, {
+ autoActivate: true,
+ toggle: true,
+ onSelect: function(feature) {
+ // Open popup
+ var selectFeatureControl = this;
+ var popup = new OpenLayers.Popup.FramedCloud("sledruninfopopup_" + feature.attributes['label'],
+ feature.geometry.getBounds().getCenterLonLat(),
+ null,
+ "<h2>" + feature.attributes['label'] + "</h2>\n" +
+ "<ul>\n" +
+ "<li><a href=\"" + feature.attributes['url'] + "\">Details</a></li>\n" +
+ "</ul>\n",
+ null, true, function(event) {
+ // onPopupClose
+ selectFeatureControl.unselectAll();
+ });
+ feature.popup = popup;
+ map.addPopup(popup);
+ },
+ onUnselect: function(feature) {
+ // Close popup
+ map.removePopup(feature.popup);
+ feature.popup.destroy();
+ feature.popup = null;
+ }
+ }));
+
// Center map
map.addLayers([layer_map, layer_sledruns]);