1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>OpenLayers Base Layers Example</title>
5 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
6 <link rel="stylesheet" href="style.css" type="text/css" />
7 <style type="text/css">
14 <!-- this gmaps key generated for http://openlayers.org/dev/ -->
15 <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'></script>
16 <!-- Localhost key -->
17 <!-- <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>-->
18 <script type="text/javascript" src="http://clients.multimap.com/API/maps/1.1/metacarta_04"></script>
19 <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
20 <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
21 <script src="../lib/OpenLayers.js"></script>
22 <script type="text/javascript">
27 var barcelona = new OpenLayers.LonLat(2.13134765625,
29 var madrid = new OpenLayers.LonLat(-3.6968994140625,
33 map = new OpenLayers.Map( 'map' );
35 var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
36 "http://labs.metacarta.com/wms/vmap0",
38 var google = new OpenLayers.Layer.Google( "Google Hybrid" , {type: G_HYBRID_MAP });
39 var ve = new OpenLayers.Layer.VirtualEarth( "VE");
40 var yahoo = new OpenLayers.Layer.Yahoo( "Yahoo");
41 var mm = new OpenLayers.Layer.MultiMap( "MultiMap");
44 map.addLayers([wms, google, ve, yahoo, mm]);
46 markers = new OpenLayers.Layer.Markers("markers");
47 map.addLayer(markers);
49 map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
50 map.addControl( new OpenLayers.Control.LayerSwitcher() );
51 map.addControl( new OpenLayers.Control.MousePosition() );
56 var url = 'http://boston.openguides.org/markers/AQUA.png';
57 var sz = new OpenLayers.Size(10, 17);
58 var calculateOffset = function(size) {
59 return new OpenLayers.Pixel(-(size.w/2), -size.h);
61 var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
62 marker = new OpenLayers.Marker(barcelona, icon);
63 markers.addMarker(marker);
65 marker = new OpenLayers.Marker(madrid, icon.clone());
66 markers.addMarker(marker);
71 markers.removeMarker(marker);
76 <body onload="init()">
77 <h1 id="title">Base Layers Example</h1>
83 This example shows the use base layers from multiple commercial map image providers.
87 <div id="map" class="smallmap"></div>
89 <div style="background-color:green" onclick="add()"> click to add a marker to the map</div>
90 <div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div>