Project

General

Profile

1
<html xmlns="http://www.w3.org/1999/xhtml">
2
  <head>
3
    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->
4
    <style type="text/css">
5
        #map {
6
            width: 800px;
7
            height: 475px;
8
            border: 1px solid black;
9
        }
10
    </style>
11
    <!-- gmaps api key for http://openlayers.org/~euzuro -->
12
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghQELW4Ku31wWCtlZquTlkHLCFh9LBTYvc_eIShlmo0YZwSitw0fQ1ZyXA'></script>
13
    <script src="../lib/OpenLayers.js"></script>
14
    <script type="text/javascript">
15
        <!--
16
        var lon = 5;
17
        var lat = 40;
18
        var zoom = 5;
19
        var map, layer, glayer;
20

    
21
        OpenLayers.ProxyHost = "/proxy/?url=";
22
        function init(){
23
            map = new OpenLayers.Map( $('map') );
24
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
25
                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
26
            map.addLayer(layer);
27

    
28
            glayer = new OpenLayers.Layer.Google("goog");
29
            map.addLayer(glayer);
30

    
31
            layer = new OpenLayers.Layer.WFS( "wfs",
32
                "http://labs.metacarta.com/search/WFS?",
33
                {maxfeatures: 1},
34
                { featureClass: OpenLayers.Feature.WFS});
35
            map.addLayer(layer);
36

    
37

    
38
            map.setCenter(new OpenLayers.LonLat(0, 0), 2);
39

    
40
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
41
        }
42
        
43
        function add() {
44

    
45
            markers2 = new OpenLayers.Layer.Markers("markers2");
46
            map.addLayer(markers2);
47

    
48

    
49
            var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',new OpenLayers.Size(10,17));
50
            marker = new OpenLayers.Marker(new OpenLayers.LonLat(2, 41), icon);
51
            markers.addMarker(marker);
52
        }
53

    
54

    
55
        function remove() {
56
            markers.removeMarker(marker);
57
        }
58
        
59

    
60
        // -->
61
    </script>
62
  </head>
63
  <body onload="init()">
64
    <div id="map"></div>
65
    <div style="background-color:green" onclick="add()"> click to add the marker to the map</div>
66
    <div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div>
67
  </body>
68
</html>
(2-2/35)