--- step-10/index.html 2023-07-02 13:20:09.119154723 +0000
+++ step-11/index.html 2023-07-02 13:20:09.119154723 +0000
@@ -1,6 +1,6 @@
<html>
<head>
- <title>Step 10: add a marker</title>
+ <title>Step 11: marker plus popup</title>
<script src="../OpenLayers.js"></script>
<script src="../OpenStreetMap.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
@@ -73,7 +73,37 @@
markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
- markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(lon,lat).transform(projLonLat, projMercator)));
+
+ feature = new OpenLayers.Feature(markers, new OpenLayers.LonLat(lon,lat).transform(projLonLat,projMercator));
+ feature.closeBox = true;
+ feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
+ 'autoSize': true,
+ 'maxSize': new OpenLayers.Size(300,200)
+ });
+ feature.data.popupContentHTML = "<h1>Hello World!</h1><hr/>Lore ipsum ...";
+ feature.data.overflow = "auto";
+
+ marker = feature.createMarker();
+
+ markerClick = function (evt) {
+ if (this.popup == null) {
+ this.popup = this.createPopup(this.closeBox);
+ map.addPopup(this.popup);
+ this.popup.show();
+ } else {
+ this.popup.toggle();
+ }
+ currentPopup = this.popup;
+ OpenLayers.Event.stop(evt);
+ };
+ marker.events.register("mousedown", feature, markerClick);
+ markers.addMarker(marker);
+
+ map.setCenter(new OpenLayers.LonLat(lon, lat).transform(projLonLat,projMercator), zoom);
+
+ feature.popup = feature.createPopup(feature.closeBox);
+ map.addPopup(feature.popup);
+ feature.popup.hide();
}
</script>
</head>