Customize the tools (04.index.html)

  • Create a custom OpenLayers?.Handler.Point handle: SinglePoint. This handler only draw one point on the layer
  • Add a method selector
  • Create the “compute” button with the callback function (empty for now) 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <style type="text/css"> 
        #map { 
            width: 800px; 
            height: 512px; 
            border: 1px solid black; 
        } 
    </style> 
    <script src="./OpenLayers-google/lib/OpenLayers.js"></script> 
    <script src="http://maps.google.com/maps?file=api&v=2&key=foobar"></script> 

    <script type="text/javascript"> 

        var SinglePoint = OpenLayers.Class.create(); 
        SinglePoint.prototype = OpenLayers.Class.inherit(OpenLayers.Handler.Point, { 
            createFeature: function(evt) { 
                this.control.layer.removeFeatures(this.control.layer.features); 
                OpenLayers.Handler.Point.prototype.createFeature.apply(this, arguments); 
            } 
        }); 

        var start_style = OpenLayers.Util.applyDefaults({ 
            externalGraphic: "start.png", 
            graphicWidth: 18, 
            graphicHeight: 26, 
            graphicYOffset: -26, 
            graphicOpacity: 1 
        }, OpenLayers.Feature.Vector.style['default']); 

        var stop_style = OpenLayers.Util.applyDefaults({ 
            externalGraphic: "stop.png", 
            graphicWidth: 18, 
            graphicHeight: 26, 
            graphicYOffset: -26, 
            graphicOpacity: 1 
        }, OpenLayers.Feature.Vector.style['default']); 

         var result_style = OpenLayers.Util.applyDefaults({ 
             strokeWidth: 3, 
             strokeColor: "#ff0000", 
             fillOpacity: 0 
         }, OpenLayers.Feature.Vector.style['default']); 

        // global variables
        var map, parser, start, stop, downtown, result, controls;

        function init() {
            map = new OpenLayers.Map('map', {projection: "EPSG: 54004",
                                             units: "m",
                                             maxResolution: 156543.0339,
                                             maxExtent: new OpenLayers.Bounds(-20037508, 
                                                                              -136554022, 
                                                                              20037508, 
                                                                              136554022)
                                            });
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());

            // create and add layers to the map
            var satellite = new OpenLayers.Layer.GoogleMercator("Google Satellite", 
                                                                {type: G_NORMAL_MAP});
            start = new OpenLayers.Layer.Vector("Start point", {style: start_style});
            stop = new OpenLayers.Layer.Vector("End point", {style: stop_style});
            downtown = new OpenLayers.Layer.Vector("Downtown data area", 
                                                 {style: result_style});
            result = new OpenLayers.Layer.Vector("Routing results", 
                                                 {style: result_style});

            map.addLayers([satellite, start, stop, downtown,result]);

            // create a feature from a wkt string and add it to the map
            parser = new OpenLayers.Format.WKT();
            var wkt = "POLYGON((-13737893 6151394, -13737893 6141906, -13728396 6141906, -13728396 6151394, -13737893 6151394))";
            var geometry = parser.read(wkt);
            var feature = new OpenLayers.Feature.Vector(geometry);
            downtown.addFeatures([feature]);

            // set default position 
            map.zoomToExtent(new OpenLayers.Bounds(-13737893, 
                                                   6141906, 
                                                   -13728396, 
                                                   6151394)); 

            // controls 
            controls = { 
              start: new OpenLayers.Control.DrawFeature(start, SinglePoint), 
              stop: new OpenLayers.Control.DrawFeature(stop, SinglePoint) 
            } 
            for (var key in controls) { 
                map.addControl(controls[key]); 
            } 
        } 

        function toggleControl(element) { 
            for (key in controls) { 
                if (element.value == key && element.checked) { 
                    controls[key].activate(); 
                } else { 
                    controls[key].deactivate(); 
                } 
            } 
        } 

        function compute() { } 

    </script> 
  </head> 
  <body onload="init()"> 
    <div id="map"></div> 

    <ul> 
      <li> 
        <input type="radio" name="control" id="noneToggle" 
               onclick="toggleControl(this);" checked="checked" /> 
        <label for="noneToggle">navigate</label> 
      </li> 
      <li> 
        <input type="radio" name="control" value="start" id="startToggle" 
               onclick="toggleControl(this);" /> 
        <label for="startToggle">set start point</label> 
      </li> 
      <li> 
        <input type="radio" name="control" value="stop" id="stopToggle" 
               onclick="toggleControl(this);" /> 
        <label for="stopToggle">set stop point</label> 
      </li> 
    </ul> 

    <select id="method"> 
      <option value="SPD">Shortest Path Dijkstra - undirected (BBox)</option> 
      <option value="SPA">Shortest Path A Star - undirected</option> 
      <option value="SPS">Shortest Path Shooting Star</option> 
    </select> 
    <button onclick="compute()">Calculate Route</button> 

  </body> 
</html>