Changeset 8283 in genesis


Ignore:
Timestamp:
Aug 10, 2010, 10:09:35 AM (14 years ago)
Author:
rick
Message:

More layers, buttons and other cool stuff added

File:
1 edited

Legend:

Unmodified
Added
Removed

  • nodes/nodemap.html

    r8282 r8283  
    11<html>
    22  <head>
    3     <title>OpenLayers Demo</title>
     3    <title>Wireless Leiden Nodemap using OpenLayers.org and OpenSteetmap.org</title>
    44    <style type="text/css">
    55      html, body, #basicMap {
    … …  
    99      }
    1010    </style>
    11     <!-- <script src="http://www.openlayers.org/api/OpenLayers.js"></script> -->
    12     <script src="http://openlayers.org/dev/OpenLayers.js"</script>
     11    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'></script>
     12
     13    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
     14    <!-- <script src="http://openlayers.org/dev/OpenLayers.js"</script> -->
    1315
    1416    <script>
     17      var map, rulerControl;
     18      var projection_wgs = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
     19      var projection_smp = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator Projection
     20
    1521      function init() {
    1622        map = new OpenLayers.Map("basicMap");
    17         var mapnik = new OpenLayers.Layer.OSM();
    18         map.addLayer(mapnik);
    19 
    20         //layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
    21         //        "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
    22         //map.addLayer(layer);
     23
     24        var world_bound = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
     25        var mapnik = new OpenLayers.Layer.OSM("OpenStreepMap");
     26        var google_sat = new OpenLayers.Layer.Google("Google Satellite" ,
     27           { type: G_SATELLITE_MAP,
     28             sphericalMercator: true,
     29             maxExtent: world_bound,
     30             wrapDateLine: false});
     31        var google_normal = new OpenLayers.Layer.Google("Google Normal" ,
     32           { type: G_NORMAL_MAP,
     33             sphericalMercator: true,
     34             maxExtent: world_bound,
     35             wrapDateLine: false});
     36
     37        var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
     38                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
     39
     40        map.addLayers([mapnik, google_sat, wms, google_normal]);
     41        //map.setCenter(new OpenLayers.LonLat(4.40,52.186), 9);
     42
     43        defaultFocus();
     44
     45
    2346        //var pois = new OpenLayers.Layer.Text( "My Points",
    2447        //                   { location:"./textfile.txt",
    … …  
    2649        //                   });
    2750        //map.addLayer(pois);
     51
     52        //function parseKML(req) {
     53        //  alert(req.responseText);
     54        //};
     55        //alert(OpenLayers.loadURL("./kmlfile.kml", "", null, parseKML));
    2856
    2957        var kml = new OpenLayers.Layer.GML("KML", "./kmlfile.kml",
    … …  
    3866
    3967
    40         //var vectors = new OpenLayers.Layer.Vector("Vector Layer")
    41         //map.addLayer(vectors);
    42         //map.addControl(new OpenLayers.Control.MousePosition());
    43         //map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
     68        var vectors = new OpenLayers.Layer.Vector("Vector Layer")
     69        map.addLayer(vectors);
     70        map.addControl(new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }));
     71        map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
     72        map.addControl(new OpenLayers.Control.LayerSwitcher());
     73        map.addControl(new OpenLayers.Control.OverviewMap());
     74        map.addControl(new OpenLayers.Control.Permalink());
     75        map.addControl(new OpenLayers.Control.ScaleLine());
     76        map.addControl(new OpenLayers.Control.KeyboardDefaults());
    4477
    4578        //var in_options = {
    … …  
    76109        //}
    77110
    78          map.setCenter(new OpenLayers.LonLat(4.40,52.186) // Center of the map
    79           .transform(
    80             new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
    81             new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
    82           ), 11 // Zoom level
     111
     112        // style the sketch fancy
     113        var sketchSymbolizers = {
     114            "Point": {
     115                pointRadius: 4,
     116                graphicName: "square",
     117                fillColor: "white",
     118                fillOpacity: 1,
     119                strokeWidth: 1,
     120                strokeOpacity: 1,
     121                strokeColor: "#333333"
     122            },
     123            "Line": {
     124                strokeWidth: 3,
     125                strokeOpacity: 1,
     126                strokeColor: "#666666",
     127                strokeDashstyle: "dash"
     128            },
     129            "Polygon": {
     130                strokeWidth: 2,
     131                strokeOpacity: 1,
     132                strokeColor: "#666666",
     133                fillColor: "white",
     134                fillOpacity: 0.3
     135            }
     136        };
     137        var style = new OpenLayers.Style();
     138        style.addRules([
     139            new OpenLayers.Rule({symbolizer: sketchSymbolizers})
     140        ]);
     141        var styleMap = new OpenLayers.StyleMap({"default": style});
     142       
     143        rulerControl = new OpenLayers.Control.Measure(
     144                OpenLayers.Handler.Path, {
     145                    persist: true,
     146                    handlerOptions: {
     147                        layerOptions: {styleMap: styleMap}
     148                    }
     149                }
    83150        );
    84       }
     151
     152        rulerControl.events.on({
     153            "measure": handleMeasurements,
     154            "measurepartial": handleMeasurements
     155        });
     156        map.addControl(rulerControl);
     157      }
     158
     159      function resize() {
     160        size = new OpenLayers.Size(size.w + 10, size.h + 10);
     161        icon.setSize(size);   
     162      }
     163
     164
     165      function handleMeasurements(event) {
     166          // For some reason 'delayed' events get posted even though the object
     167          // is deactivated
     168          if (!rulerControl.active) {
     169            return;
     170          }
     171          var geometry = event.geometry;
     172          var units = event.units;
     173          var order = event.order;
     174          var measure = event.measure;
     175          var element = document.getElementById('output');
     176           out = measure.toFixed(3) + " " + units;
     177          if(order == 2) {
     178              out += "<sup>2</" + "sup>";
     179          } else {
     180          }
     181          element.innerHTML = out;
     182      }
     183
     184      function toggleRulerControl() {
     185          if (!rulerControl.active) {
     186             rulerControl.activate();
     187             document.getElementById('ruler').src = "ruler_on.png";
     188          } else {
     189             rulerControl.deactivate();
     190             document.getElementById('ruler').src = "ruler_off.png";
     191             document.getElementById('output').innerHTML = "";
     192             
     193          }
     194      }
     195      function defaultFocus() {
     196        map.setCenter(new OpenLayers.LonLat(4.50,52.186) // Center of the map
     197         .transform( projection_wgs, projection_smp), 12 // Zoom level
     198        );
     199      }
     200
     201      // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
    85202    </script>
    86203  </head>
    87204  <body onload="init();">
    88     <div id="basicMap"></div>
     205    <div id="basicMap">
     206    <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
     207        <img id="ruler" src="ruler_off.png" onClick="toggleRulerControl()" />
     208        <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon20.png" alt="Reset focus" onclick="defaultFocus()"/>
     209        <div id="output"></div>
     210    </div>
     211    </div>
    89212  </body>
    90213</html>
Note: See TracChangeset for help on using the changeset viewer.