pastebin - collaborative debugging

pastebin is a collaborative debugging tool allowing you to share and modify code snippets while chatting on IRC, IM or a message board.

This site is developed to XHTML and CSS2 W3C standards. If you see this paragraph, your browser does not support those standards and you need to upgrade. Visit WaSP for a variety of options.

yancho private pastebin - collaborative debugging tool What's a private pastebin?


Posted by Yancho on Wed 21 Nov 10:44
report abuse | download | new post

  1. <html>
  2. <head>
  3.  <title>OpenLayers Example</title>
  4.  
  5.   <style type="text/css">
  6.        #map {
  7.            width: 800px;
  8.            height: 600px;
  9.            border: 1px solid black;
  10.        }
  11.    </style>
  12.  
  13.    <script src="http://yancho.no-ip.org/~yancho/OpenLayers.js"></script>
  14.  
  15.  
  16.  
  17. <script type="text/javascript">
  18.  
  19.  
  20. var map, layer, layer2;
  21. var parser, result, end_geometry, stop_point;
  22. var active = 0;
  23.        
  24.         var SinglePoint = OpenLayers.Class(OpenLayers.Handler.Point, {
  25.             createFeature: function(evt) {
  26.                 this.control.layer.removeFeatures(this.control.layer.features);
  27.                 OpenLayers.Handler.Point.prototype.createFeature.apply(this, arguments);
  28.             }
  29.             /*
  30.            
  31.               mousemove: function(evt) {
  32.                 if(this.drawing) {
  33.                     this.callback("move", [this.point.geometry]);
  34.                     var lonlat = this.map.getLonLatFromPixel(evt.xy);
  35.                     this.point.geometry.x = lonlat.lon;
  36.                     this.point.geometry.y = lonlat.lat;
  37.                     this.point.geometry.clearBounds();
  38.                     this.drawFeature();
  39.                 }
  40.                 return true;
  41.             }  */
  42.         });
  43.  
  44.  
  45.       var start_style = {
  46.             externalGraphic: "start.png",
  47.             graphicWidth: 18,
  48.             graphicHeight: 26,
  49.             graphicYOffset: -26,
  50.             graphicOpacity: 1
  51.         }
  52.         OpenLayers.Util.applyDefaults(start_style, OpenLayers.Feature.Vector.style['default']);
  53.  
  54.         var stop_style = {
  55.             externalGraphic: "stop.png",
  56.             graphicWidth: 18,
  57.             graphicHeight: 26,
  58.             graphicYOffset: -26,
  59.             graphicOpacity: 1
  60.         }
  61.         OpenLayers.Util.applyDefaults(stop_style, OpenLayers.Feature.Vector.style['default']);
  62.  
  63.          var result_style = {
  64.              strokeWidth: 3,
  65.              strokeColor: "#ff0000",
  66.              fillOpacity: 0
  67.          };
  68.          OpenLayers.Util.applyDefaults(result_style, OpenLayers.Feature.Vector.style['default']);
  69.  
  70.  
  71. function init(){
  72.  
  73.    myBounds = new OpenLayers.Bounds(609462,196653,678224,258103);
  74.  
  75.    
  76.    map = new OpenLayers.Map("map", {maxExtent : myBounds, projection :'EPSG:32119', units:'m', maxResolution:1000});
  77.  
  78.    layer = new OpenLayers.Layer.MapServer
  79.    ( "Major Roads",
  80.      "http://yancho.no-ip.org/~yancho/cgi-bin/mapserv",
  81.      {map:'/home/yancho/public_html/nc/sample.map',layers:'majorroads'},
  82.      {gutter: 15, buffer:0}
  83.    );
  84.                          
  85.    map.addLayer(layer);
  86.  
  87.    layer2 = new OpenLayers.Layer.MapServer
  88.    ( "Streets Layer",
  89.      "http://yancho.no-ip.org/~yancho/cgi-bin/mapserv",
  90.      {map:'/home/yancho/public_html/nc/sample.map', layers:'streets'},
  91.      {gutter: 15, buffer:0}
  92.    );
  93.    
  94.    map.addLayer(layer2);
  95.  
  96.    //map.addControl(new OpenLayers.Control.PanZoomBar(), newOpenLayers.Pixel(5,5));
  97.    map.addControl(new OpenLayers.Control.LayerSwitcher());
  98.    map.addControl(new OpenLayers.Control.MouseDefaults());
  99.    map.addControl(new OpenLayers.Control.MousePosition());
  100.  
  101.    map.zoomToExtent(new OpenLayers.Bounds(637311,222242,645906,229924));
  102.  
  103.    start = new OpenLayers.Layer.Vector("Start point", {style: start_style});
  104.    stop = new OpenLayers.Layer.Vector("End point", {style: stop_style});
  105.    result = new OpenLayers.Layer.Vector("Routing results",{style: result_style})
  106.  
  107.    map.addLayers([start, stop, result]);
  108.    
  109.    
  110.    parser = new OpenLayers.Format.WKT();
  111.    
  112.    controls = {
  113.         start: new OpenLayers.Control.DrawFeature(start, SinglePoint),
  114.         stop: new OpenLayers.Control.DrawFeature(stop, SinglePoint )
  115.       }
  116.  
  117.   for (var key in controls) {
  118.       map.addControl(controls[key]);
  119.   }
  120.        
  121. }
  122.  
  123.   function toggleControl(element) {
  124.             for (key in controls) {
  125.                 if (element.value == key && element.checked) {
  126.                     controls[key].activate();
  127.                 } else {
  128.                     controls[key].deactivate();
  129.                 }
  130.             }
  131.         }
  132.        
  133.    function compute() {
  134.             var startPoint = start.features[0];
  135.             var stopPoint = stop.features[0];
  136.  
  137.             if (startPoint && stopPoint) {
  138.                 var result = {
  139.                     startpoint: startPoint.geometry.x + ' ' + startPoint.geometry.y,
  140.                     finalpoint: stopPoint.geometry.x + ' ' + stopPoint.geometry.y,
  141.                     method: OpenLayers.Util.getElement('method').value,
  142.                     region: "streets",
  143.                     srid: "-1"
  144.                 };
  145.                 OpenLayers.loadURL("routing.php",
  146.                                    OpenLayers.Util.getParameterString(result),
  147.                                    null,
  148.                                    displayRoute);
  149.             }
  150.         }
  151.  
  152.        
  153.        function displayRoute(response) {
  154.             if (response && response.responseXML) {
  155.                 // erase the previous results
  156.                 result.removeFeatures(result.features);
  157.  
  158.                 // parse the features
  159.                 var edges = response.responseXML.getElementsByTagName('edge');
  160.                 var features = [];
  161.                 for (var i = 0; i < edges.length; i++) {
  162.                     var g = parser.read(edges[i].getElementsByTagName('wkt')[0].textContent);
  163.                     features.push(new OpenLayers.Feature.Vector(g));
  164.                 }
  165.                 result.addFeatures(features);
  166.             }
  167.         }
  168.  
  169.      </script>
  170.    </head>
  171. <body onload="init()">
  172. <div id="map"></div>
  173.      <div id="right" style="float:right;width:30%;padding:10px;" >
  174.      <ol>
  175.       <li>Click "Set Start  Point"</li>
  176.       <li>Click on the map</li>
  177.       <li>Click "Set Stop Point"</li>
  178.       <li>Click on the Map, and without letting go, drag around.</li>
  179.     </ol>
  180.     <div id="nodeList" style="font-weight:normal; margin-top:10px;"></div>
  181.     <ul>
  182.       <li>
  183.         <input type="radio" name="control" id="noneToggle"
  184.                onclick="toggleControl(this);" checked="checked" />
  185.         <label for="noneToggle">navigate</label>
  186.       </li>
  187.       <li>
  188.         <input type="radio" name="control" value="start" id="startToggle"
  189.                onclick="toggleControl(this);" />
  190.         <label for="startToggle">set start point</label>
  191.       </li>
  192.       <li>
  193.         <input type="radio" name="control" value="stop" id="stopToggle"
  194.                onclick="toggleControl(this);" />
  195.         <label for="stopToggle">set stop point</label>
  196.       </li>
  197.     </ul>
  198.       <select id="method">
  199.       <option value="SPD">Shortest Path Dijkstra - undirected (BBox)</option>
  200.       <option value="SPA" selected>Shortest Path A Star - undirected</option>
  201.       <option value="SPS">Shortest Path Shooting Star</option>
  202.     </select>
  203.     <button onclick="compute()">Calculate Route</button>
  204. </html>

Submit a correction or amendment below (click here to make a fresh posting)
After submitting an amendment, you'll be able to view the differences between the old and new posts easily.

Syntax highlighting:

To highlight particular lines, prefix each line with @@


Remember me so that I can delete my post