ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Simple example with an OSM map, a marker and a popup.

Browse Source
This commit is contained in:
ahocevar
2012-06-25 17:18:32 +02:00
parent 0e78d40da2
commit 293d173079
2 changed files with 71 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
examples/osm-marker-popup.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers OSM and Google Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script src="osm-marker-popup.js"></script>
</head>
<body onload="init()">
<h1 id="title">OSM with Marker and Popup</h1>
<p id="shortdesc">
Demonstrate use of an OSM layer with a marker and a popup.
</p>
<div id="tags">
openstreetmap osm marker popup
</div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
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 <a href="osm-marker-popup.js" target="_blank">
osm-marker-popup.js source</a> to see how this is done.
</p>
</div>
</body>
</html>

39
examples/osm-marker-popup.js Normal file
View File

@@ -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,
'<a target="_blank" href="http://openlayers.org/">We</a> ' +
'could be here.<br>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);
}