Skip to content

Instantly share code, notes, and snippets.

@alexyoung

alexyoung/openlayers_2.html

Created April 1, 2009 09:57
Show Gist options
  • Save alexyoung/88630 to your computer and use it in GitHub Desktop.
Save alexyoung/88630 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
openlayers_2.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Example</title>
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map, popup, ol_wms;
function init() {
function mousedown(evt) {
if (popup == null) {
feature = new OpenLayers.Feature(ol_wms, new OpenLayers.LonLat(1, 51));
popup = feature.createPopup(true);
popup.setContentHTML("<div style='color: #fff'>This is a popup</div>");
popup.setBackgroundColor('black');
popup.setOpacity(0.9);
markers.map.addPopup(popup);
} else {
popup.toggle();
}
OpenLayers.Event.stop(evt);
}
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS('OpenLayers WMS', 'http://labs.metacarta.com/wms/vmap0?', {layers: 'basic'});
map.addLayers([ol_wms]);
var markers = new OpenLayers.Layer.Markers('Markers');
map.addLayer(markers);
var marker = new OpenLayers.Marker(new OpenLayers.LonLat(1, 52));
var marker2 = new OpenLayers.Marker(new OpenLayers.LonLat(-3, 51.9));
/* Register the events */
marker.events.register('mousedown', marker, mousedown);
marker2.events.register('mousedown', marker, function(evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
/* Add markers to the map */
markers.addMarker(marker);
markers.addMarker(marker2);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(1, 50), 5);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Quite Useful Map Example</h1>
<p>Basic map usage example.</p>
<div id="map" class="smallmap"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment