From 293d173079712f95c10dea9c65b63837a7e5d109 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Mon, 25 Jun 2012 17:18:32 +0200 Subject: [PATCH] Simple example with an OSM map, a marker and a popup. --- examples/osm-marker-popup.html | 32 ++++++++++++++++++++++++++++ examples/osm-marker-popup.js | 39 ++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 examples/osm-marker-popup.html create mode 100644 examples/osm-marker-popup.js 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); +}