]> dev.renevier.net Git - syp.git/blob - openlayers/examples/baseLayers.html
avoid html injection in item title
[syp.git] / openlayers / examples / baseLayers.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2     <head>
3         <title>OpenLayers Base Layers Example</title>
4         
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">
8             #controls
9             {
10                 width: 512px;
11             }
12         </style>
13
14         <!-- this gmaps key generated for http://openlayers.org/dev/ -->
15         <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'></script>
16         <!-- Localhost key -->
17         <!-- <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;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">
23             var lon = 5;
24             var lat = 40;
25             var zoom = 5;
26             var map, markers;
27             var barcelona = new OpenLayers.LonLat(2.13134765625,
28                                                   41.37062534198901);
29             var madrid = new OpenLayers.LonLat(-3.6968994140625,
30                                               40.428314208984375);
31
32             function init(){
33                 map = new OpenLayers.Map( 'map' );
34
35                 var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
36                           "http://labs.metacarta.com/wms/vmap0",
37                           {layers: 'basic'} );
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");
42
43
44                 map.addLayers([wms, google, ve, yahoo, mm]);
45
46                 markers = new OpenLayers.Layer.Markers("markers");
47                 map.addLayer(markers);
48
49                 map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
50                 map.addControl( new OpenLayers.Control.LayerSwitcher() );
51                 map.addControl( new OpenLayers.Control.MousePosition() );
52
53             }
54
55             function add() {
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);
60                                  };
61                 var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
62                 marker = new OpenLayers.Marker(barcelona, icon);
63                 markers.addMarker(marker);
64
65                 marker = new OpenLayers.Marker(madrid, icon.clone());
66                 markers.addMarker(marker);
67
68             }
69
70             function remove() {
71                 markers.removeMarker(marker);
72             }
73
74         </script>
75     </head>
76     <body onload="init()">
77         <h1 id="title">Base Layers Example</h1>
78
79         <div id="tags">
80         </div>
81
82         <p id="shortdesc">
83            This example shows the use base layers from multiple commercial map image providers.
84         </p>
85
86         <div id="controls">
87             <div id="map" class="smallmap"></div>
88
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>
91         </div>
92         
93         <div id="docs">
94        </div>
95     </body>
96 </html>