1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>OpenLayers Base Layers Example</title> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <style type="text/css"> #controls { width: 512px; } </style> <!-- this gmaps key generated for http://openlayers.org/dev/ --> <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'></script> <!-- Localhost key --> <!-- <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>--> <script type="text/javascript" src="http://clients.multimap.com/API/maps/1.1/metacarta_04"></script> <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script> <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script> <script src="../lib/OpenLayers.js"></script> <script type="text/javascript"> var lon = 5; var lat = 40; var zoom = 5; var map, markers; var barcelona = new OpenLayers.LonLat(2.13134765625, 41.37062534198901); var madrid = new OpenLayers.LonLat(-3.6968994140625, 40.428314208984375); function init(){ map = new OpenLayers.Map( 'map' ); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); var google = new OpenLayers.Layer.Google( "Google Hybrid" , {type: G_HYBRID_MAP }); var ve = new OpenLayers.Layer.VirtualEarth( "VE"); var yahoo = new OpenLayers.Layer.Yahoo( "Yahoo"); var mm = new OpenLayers.Layer.MultiMap( "MultiMap"); map.addLayers([wms, google, ve, yahoo, mm]); markers = new OpenLayers.Layer.Markers("markers"); map.addLayer(markers); map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); map.addControl( new OpenLayers.Control.LayerSwitcher() ); map.addControl( new OpenLayers.Control.MousePosition() ); } function add() { var url = 'http://boston.openguides.org/markers/AQUA.png'; var sz = new OpenLayers.Size(10, 17); var calculateOffset = function(size) { return new OpenLayers.Pixel(-(size.w/2), -size.h); }; var icon = new OpenLayers.Icon(url, sz, null, calculateOffset); marker = new OpenLayers.Marker(barcelona, icon); markers.addMarker(marker); marker = new OpenLayers.Marker(madrid, icon.clone()); markers.addMarker(marker); } function remove() { markers.removeMarker(marker); } </script> </head> <body onload="init()"> <h1 id="title">Base Layers Example</h1> <div id="tags"> </div> <p id="shortdesc"> This example shows the use base layers from multiple commercial map image providers. </p> <div id="controls"> <div id="map" class="smallmap"></div> <div style="background-color:green" onclick="add()"> click to add a marker to the map</div> <div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div> </div> <div id="docs"> </div> </body> </html> |