diff --git a/examples/osm-marker-popup.html b/examples/osm-marker-popup.html
new file mode 100644
index 0000000000..8744ec811e
--- /dev/null
+++ b/examples/osm-marker-popup.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ OpenLayers OSM and Google Example
+
+
+
+
+
+
+
OSM with Marker and Popup
+
+ Demonstrate use of an OSM layer with a marker and a popup.
+
+
+ openstreetmap osm marker popup
+
+
+
+
+ A common use case for OpenLayers is to display a marker at a
+ location on the map, and add some information in a popup. It
+ is also easy to add a tooltip with a short description.
+ See the
+ osm-marker-popup.js source to see how this is done.
+
+
+
+
diff --git a/examples/osm-marker-popup.js b/examples/osm-marker-popup.js
new file mode 100644
index 0000000000..e8f39b5357
--- /dev/null
+++ b/examples/osm-marker-popup.js
@@ -0,0 +1,39 @@
+var map;
+function init() {
+
+ // The overlay layer for our marker, with a simple diamond as symbol
+ var overlay = new OpenLayers.Layer.Vector('Overlay', {
+ styleMap: new OpenLayers.StyleMap({
+ externalGraphic: '../img/marker.png',
+ graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
+ title: '${tooltip}'
+ })
+ });
+
+ // The location of our marker and popup. We usually think in geographic
+ // coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
+ var myLocation = new OpenLayers.Geometry.Point(10.2, 48.9)
+ .transform('EPSG:4326', 'EPSG:3857');
+
+ // We add the marker with a tooltip text to the overlay
+ overlay.addFeatures([
+ new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
+ ]);
+
+ // A popup with some information about our location
+ var popup = new OpenLayers.Popup.FramedCloud("Popup",
+ myLocation.getBounds().getCenterLonLat(), null,
+ 'We ' +
+ 'could be here. Or elsewhere.', null,
+ true // <-- true if we want a close (X) button, false otherwise
+ );
+
+ // Finally we create the map
+ map = new OpenLayers.Map({
+ div: "map", projection: "EPSG:3857",
+ layers: [new OpenLayers.Layer.OSM(), overlay],
+ center: myLocation.getBounds().getCenterLonLat(), zoom: 15
+ });
+ // and add the popup to it.
+ map.addPopup(popup);
+}