Draggable Via Points
This commit is contained in:
Dennis Luxen
parent
61bc95dc9a
commit
f7e81a8d22
@ -36,11 +36,16 @@ var status = ''; //possible values [start,end]
|
||||
function getStatus(){ return status; }
|
||||
function setStatus(stat){ status = stat; }
|
||||
|
||||
//Indicator
|
||||
var ISDRAGGING = false;
|
||||
|
||||
//Layer
|
||||
var dragLayer;
|
||||
var vectorLayerRoute;
|
||||
var vectorLayerViaRoute;
|
||||
var markersLayer;
|
||||
|
||||
var selectFeature;
|
||||
//======================
|
||||
// FUNCTIONS
|
||||
/*
|
||||
@ -94,10 +99,15 @@ function init(){
|
||||
map.addLayer(new OpenLayers.Layer.OSM.Mapnik("Mapnik"));
|
||||
map.addLayer(new OpenLayers.Layer.OSM.MapQuest("MapQuest"));
|
||||
map.addLayer(new OpenLayers.Layer.OSM.Osmarender("Osmarender"));
|
||||
|
||||
//Add layer for the route
|
||||
vectorLayerRoute = new OpenLayers.Layer.Vector("Route",{maxResolution: 156543.0339});
|
||||
map.addLayer(vectorLayerRoute);
|
||||
|
||||
//Add layer for temporary via route
|
||||
vectorLayerViaRoute = new OpenLayers.Layer.Vector("ViaRoute",{maxResolution: 156543.0339});
|
||||
map.addLayer(vectorLayerViaRoute);
|
||||
|
||||
//Add Layerswitcher
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
@ -131,17 +141,51 @@ function init(){
|
||||
graphicWidth: 22,
|
||||
graphicHeight: 40
|
||||
}),
|
||||
rendererOptions: {yOrdering: true}
|
||||
rendererOptions: {zIndexing: true}
|
||||
}
|
||||
);
|
||||
// Add a drag feature control to move features around.
|
||||
var dragFeatures = new OpenLayers.Control.DragFeature(dragLayer,
|
||||
{ onDrag: function(feature, pixel){
|
||||
feature.move(map.getLonLatFromPixel(pixel));
|
||||
if(!ISCALCULATING){ routing(true); }},
|
||||
ISDRAGGING = true;
|
||||
if(feature.name == "start" || feature.name == "end") {
|
||||
feature.move(map.getLonLatFromPixel(pixel));
|
||||
if(!ISCALCULATING){ routing(true); }
|
||||
}
|
||||
if(feature.name == "via") {
|
||||
computeViaRoute(pixel, true);
|
||||
}
|
||||
if(feature.name == "viapoint" && feature.popup) {
|
||||
map.removePopup(feature.popup);
|
||||
computeViaRoute(pixel, true, feature.viaIndex);
|
||||
}
|
||||
},
|
||||
onComplete: function(feature, pixel){
|
||||
feature.move(map.getLonLatFromPixel(pixel));
|
||||
routing(false); },
|
||||
ISDRAGGING = false;
|
||||
if(feature.name == "start" || feature.name == "end") {
|
||||
feature.move(map.getLonLatFromPixel(pixel));
|
||||
routing(false);
|
||||
} else if(feature.name == "via") {
|
||||
console.log('finished via');
|
||||
//Erase temporary point from draglayer
|
||||
dragLayer.renderer.eraseFeatures([feature]);
|
||||
//delete temporary route from via route Layer
|
||||
vectorLayerViaRoute.removeFeatures(vectorLayerViaRoute.features);
|
||||
//compute via route
|
||||
computeViaRoute(pixel, false);
|
||||
feature.destroy();
|
||||
} else if(feature.name == "viapoint") {
|
||||
//Erase temporary point from draglayer
|
||||
dragLayer.renderer.eraseFeatures([feature]);
|
||||
//delete via point from vector
|
||||
viaPointsVector.splice(feature.viaIndex,1);
|
||||
//delete temporary route from via route Layer
|
||||
vectorLayerViaRoute.removeFeatures(vectorLayerViaRoute.features);
|
||||
//compute via route
|
||||
computeViaRoute(pixel, false);
|
||||
feature.destroy();
|
||||
}
|
||||
},
|
||||
onLeave: function(f){
|
||||
if(!ISCALCULATING){ routing(false); }}
|
||||
});
|
||||
@ -152,17 +196,99 @@ function init(){
|
||||
//Add a marker layer
|
||||
markersLayer = new OpenLayers.Layer.Markers("Markers");
|
||||
map.addLayer(markersLayer);
|
||||
|
||||
|
||||
//Add zoom event for rerouting
|
||||
map.events.on({zoomend: function(e) {reroute();}});
|
||||
map.events.on({zoomend: function(e) {reroute();distanceToRoute(null);}});
|
||||
|
||||
// Register Callback to evaluate distance to from mouse location to route on Mousemove
|
||||
map.events.on({mousemove: function(e) {distanceToRoute(e.xy);}});
|
||||
|
||||
// Set center of the map
|
||||
if (!map.getCenter()){
|
||||
map.setCenter(new OpenLayers.LonLat(600000, 6600000),6);
|
||||
}
|
||||
|
||||
//Check if the URL contains some GET parameter, e.g. for the route
|
||||
checkURL();
|
||||
|
||||
//Check if the URL contains some GET parameter, e.g. for the route
|
||||
checkURL();
|
||||
for(var i = 0; i < map.layers.length; i++) {
|
||||
map.layers[i].transitionEffect = 'resize';
|
||||
}
|
||||
|
||||
document.getElementById('map').oncontextmenu = function(e){
|
||||
e = e?e:window.event;
|
||||
if (e.preventDefault) e.preventDefault(); // For non-IE browsers.
|
||||
else return false; // For IE browsers.
|
||||
};
|
||||
|
||||
// A control class for capturing click events...
|
||||
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
|
||||
|
||||
defaultHandlerOptions: {
|
||||
'single': true,
|
||||
'double': true,
|
||||
'pixelTolerance': 0,
|
||||
'stopSingle': false,
|
||||
'stopDouble': false
|
||||
},
|
||||
handleRightClicks:true,
|
||||
initialize: function(options) {
|
||||
this.handlerOptions = OpenLayers.Util.extend(
|
||||
{}, this.defaultHandlerOptions
|
||||
);
|
||||
OpenLayers.Control.prototype.initialize.apply(
|
||||
this, arguments
|
||||
);
|
||||
this.handler = new OpenLayers.Handler.Click(
|
||||
this, this.eventMethods, this.handlerOptions
|
||||
);
|
||||
},
|
||||
CLASS_NAME: "OpenLayers.Control.Click"
|
||||
|
||||
});
|
||||
|
||||
// Add an instance of the Click control that listens to various click events:
|
||||
var oClick = new OpenLayers.Control.Click({eventMethods:{
|
||||
'rightclick': function(e) {
|
||||
rightClick(e);
|
||||
},
|
||||
'click': function(e) {
|
||||
leftClick(e);
|
||||
},
|
||||
'dblclick': function(e) {
|
||||
dblClick(e);
|
||||
},
|
||||
'dblrightclick': function(e) {
|
||||
dblRightClick(e);
|
||||
}
|
||||
}});
|
||||
map.addControl(oClick);
|
||||
oClick.activate();
|
||||
|
||||
|
||||
selectFeature = new OpenLayers.Control.SelectFeature(
|
||||
[dragLayer],
|
||||
{
|
||||
clickout: true, toggle: false,
|
||||
multiple: false, hover: true,
|
||||
toggleKey: "ctrlKey", // ctrl key removes from selection
|
||||
multipleKey: "shiftKey", // shift key adds to selection
|
||||
onSelect: createPopup,
|
||||
onUnselect: destroyPopup
|
||||
|
||||
}
|
||||
);
|
||||
map.addControl(selectFeature);
|
||||
dragLayer.events.on({
|
||||
"featureselected": function(e) {
|
||||
featureSelected(e);
|
||||
},
|
||||
"featureunselected": function(e) {
|
||||
featureUnselected(e);
|
||||
}
|
||||
});
|
||||
|
||||
selectFeature.activate();
|
||||
}
|
||||
|
||||
//Helper Functions
|
||||
@ -182,40 +308,47 @@ function closeOpenDiv(name){
|
||||
else{ document.getElementById(name).style.display = 'none'; }
|
||||
}
|
||||
|
||||
//URL Functions
|
||||
function checkURL(){
|
||||
var getObjs = new Array();
|
||||
var getString = document.location.search.substr(1,document.location.search.length);
|
||||
if(getString != ''){
|
||||
var getArray=getString.split('&');
|
||||
for(i=0 ; i<getArray.length ; ++i){
|
||||
var v='';
|
||||
var vArr = getArray[i].split('=');
|
||||
if(vArr.length>1){ v = vArr[1]; }
|
||||
getObjs[unescape(vArr[0])]=unescape(v);
|
||||
}
|
||||
}
|
||||
|
||||
var fr = getObjectOfArray(getObjs, "fr");
|
||||
var to = getObjectOfArray(getObjs, "to");
|
||||
|
||||
if(fr != 'undefined' && to != 'undefined'){
|
||||
//From
|
||||
var fr_pos = fr.split(',');
|
||||
var fr_lonlat = new OpenLayers.LonLat(fr_pos[1],fr_pos[0]);
|
||||
setMarkerAndZoom('start', fr_lonlat);
|
||||
isStartPointSet = true;
|
||||
//To
|
||||
var to_pos = to.split(',');
|
||||
var to_lonlat = new OpenLayers.LonLat(to_pos[1],to_pos[0]);
|
||||
setMarker('end', to_lonlat);
|
||||
isEndPointSet = true;
|
||||
//Calculate the route
|
||||
routing(false);
|
||||
}
|
||||
}
|
||||
|
||||
function getObjectOfArray(objects, elementName){
|
||||
if(!objects[elementName]){ return 'undefined'; }
|
||||
return objects[elementName];
|
||||
}
|
||||
//URL Functions
|
||||
function checkURL(){
|
||||
var getObjs = new Array();
|
||||
var getString = document.location.search.substr(1,document.location.search.length);
|
||||
if(getString != ''){
|
||||
var getArray=getString.split('&');
|
||||
console.log(getArray);
|
||||
for(i=0 ; i<getArray.length ; ++i){
|
||||
var v='';
|
||||
var vArr = getArray[i].split('=');
|
||||
if(vArr.length>1){ v = vArr[1]; }
|
||||
if("via" == vArr[0]) {
|
||||
var via_loc = unescape(v).split(',');
|
||||
for(var j=0; j<via_loc.length; j++) { via_loc[j] = parseFloat(via_loc[j]); }
|
||||
viaPointsVector.push(via_loc);
|
||||
} else {
|
||||
getObjs[unescape(vArr[0])]=unescape(v);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var fr = getObjectOfArray(getObjs, "fr");
|
||||
var to = getObjectOfArray(getObjs, "to");
|
||||
|
||||
if(fr != 'undefined' && to != 'undefined'){
|
||||
//From
|
||||
var fr_pos = fr.split(',');
|
||||
var fr_lonlat = new OpenLayers.LonLat(fr_pos[1],fr_pos[0]);
|
||||
setMarkerAndZoom('start', fr_lonlat);
|
||||
isStartPointSet = true;
|
||||
//To
|
||||
var to_pos = to.split(',');
|
||||
var to_lonlat = new OpenLayers.LonLat(to_pos[1],to_pos[0]);
|
||||
setMarker('end', to_lonlat);
|
||||
isEndPointSet = true;
|
||||
//Calculate the route
|
||||
routing(false);
|
||||
}
|
||||
}
|
||||
|
||||
function getObjectOfArray(objects, elementName){
|
||||
if(!objects[elementName]){ return 'undefined'; }
|
||||
return objects[elementName];
|
||||
}
|
||||
|
||||
@ -29,12 +29,14 @@
|
||||
//======================
|
||||
// OBJECTS
|
||||
//Map
|
||||
var HOST_ROUTING_URL = 'http://localhost:5000/viaroute';
|
||||
//var HOST_ROUTING_URL = 'http://routingdemo.geofabrik.de/route-via/';
|
||||
var HOST_WEBSITE = 'http://map.project-osrm.org/';//location.host
|
||||
var HOST_ROUTING_URL = 'http://routingdemo.geofabrik.de/route-de/';
|
||||
|
||||
var ISCALCULATING = false;
|
||||
var EPSG_4326 = new OpenLayers.Projection("EPSG:4326");
|
||||
var EPSG_900913 = new OpenLayers.Projection("EPSG:900913");
|
||||
|
||||
var allRoutePoints = [];
|
||||
//======================
|
||||
// FUNCTIONS
|
||||
/*
|
||||
@ -70,18 +72,18 @@ function routing(isDragRoute){
|
||||
script.type = 'text/javascript';
|
||||
|
||||
var callBackFunction = 'showResultsRoute';
|
||||
var instructions = '&instructions=true';
|
||||
var instructions = '&geomformat=cmp&instructions=true';
|
||||
if(isDragRoute){
|
||||
callBackFunction = 'showResultsDragRoute';
|
||||
instructions = '&instructions=false';
|
||||
instructions = '&geomformat=cmp&instructions=false';
|
||||
document.getElementById('information').innerHTML = '<p class="infoHL">Release mouse button to get Route Information!</p>(If no Route Summary is diplayed, press the Route!-button)';
|
||||
}
|
||||
else{
|
||||
document.getElementById('information').innerHTML = '<p class="infoHL">One moment please ...</p>';
|
||||
}
|
||||
|
||||
script.src = HOST_ROUTING_URL + "&"+from.lat + '&' + from.lon + '&' + to.lat + '&' + to.lon +
|
||||
'&z='+this.map.getZoom()+'&output=json&jsonp='+callBackFunction+instructions+'&geomformat=cmp';//+'&simplified=yes';
|
||||
script.src = HOST_ROUTING_URL + "&start="+from.lat + ',' + from.lon + '&dest=' + to.lat + ',' + to.lon;
|
||||
for(var i = 0; i < viaPointsVector.length; i++) {
|
||||
script.src += ('&via=' + viaPointsVector[i][0] + ',' + viaPointsVector[i][1]);
|
||||
}
|
||||
script.src +='&z='+this.map.getZoom()+'&output=json&jsonp='+callBackFunction+instructions;
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
|
||||
@ -107,7 +109,8 @@ function showResultsDragRoute(response) {
|
||||
* showResultsRoute()-Function to show route result
|
||||
*/
|
||||
function showResultsRoute(response) {
|
||||
if (response) {
//Display Route
|
||||
if (response) {
|
||||
//Display Route
|
||||
if(document.getElementById("cbNoNames").checked == true){
|
||||
showNoNameStreets(response);
|
||||
}
|
||||
@ -115,61 +118,109 @@ function showResultsRoute(response) {
|
||||
showRouteGeometry(response);
|
||||
}
|
||||
|
||||
//Create Link of the route
|
||||
//Save Via Points that come with route
|
||||
var lengthOfArray = response.via_points.length;
|
||||
var i = 0;
|
||||
viaPointsVector.length = 0;
|
||||
viaPointsVector = response.via_points.slice(0);
|
||||
paintViaPoints();
|
||||
|
||||
//Create Link of the route
|
||||
var startFeat = getMarkerByName('start');
|
||||
var endFeat = getMarkerByName('end');
|
||||
var from = new OpenLayers.LonLat(startFeat.geometry.x,startFeat.geometry.y).transform(EPSG_900913,EPSG_4326);
|
||||
var to = new OpenLayers.LonLat(endFeat.geometry.x,endFeat.geometry.y).transform(EPSG_900913,EPSG_4326);
|
||||
var routelink = '<div id="routelink"><input name="routelink" type="submit" title="Get Link" onClick="createShortLink(\''+HOST_WEBSITE+'?fr='+from.lat.toFixed(6)+','+from.lon.toFixed(6)+'&to='+to.lat.toFixed(6)+','+to.lon.toFixed(6)+'\');" value="Get Link"></div>';
|
||||
//Link for the GPX Download
|
||||
var gpxLink = '(<a href="'+HOST_ROUTING_URL+'&'+from.lat.toFixed(6)+'&'+from.lon.toFixed(6)+'&'+to.lat.toFixed(6)+'&'+to.lon.toFixed(6)+'&z='+this.map.getZoom()+'&output=gpx">Get GPX File</a>)';
|
||||
|
||||
var routelink = '<div id="routelink"><input name="routelink" type="submit" title="Get Link" onClick="createShortLink(\''+HOST_WEBSITE+'?fr='+from.lat.toFixed(6)+','+from.lon.toFixed(6)+'&to='+to.lat.toFixed(6)+','+to.lon.toFixed(6);
|
||||
for(i = 0; i < viaPointsVector.length; i++) {
|
||||
routelink += "&via=" + viaPointsVector[i][0] + "," + viaPointsVector[i][1];
|
||||
}
|
||||
routelink += '\');" value="Get Link"></div>';
|
||||
|
||||
//Link for the GPX Download
|
||||
var gpxLink = '(<a href="'+HOST_ROUTING_URL+'&start='+from.lat.toFixed(6)+','+from.lon.toFixed(6)+'&dest='+to.lat.toFixed(6)+','+to.lon.toFixed(6)+'&z='+this.map.getZoom();
|
||||
for(i = 0; i < viaPointsVector.length; i++) {
|
||||
gpxLink += "&via=" + viaPointsVector[i][0] + "," + viaPointsVector[i][1];
|
||||
}
|
||||
gpxLink += '&output=gpx">Get GPX File</a>)';;
|
||||
|
||||
//Show Route Summary
|
||||
var output = '<p class="routeSummaryHL">Some information about your Way <br> from \'<span class="routeSummaryHLlight">'+response.route_summary.start_point+'</span>\' to \'<span class="routeSummaryHLlight">'+response.route_summary.end_point+'</span>\'</p>';
|
||||
output += '<p class="routeSummary">Distance: <span class="routeSummarybold">'+response.route_summary.total_distance/1000+' km</span> - Duration: <span class="routeSummarybold">'+secondsToTime(response.route_summary.total_time)+'</span></p><p>'+routelink+'</p><p><span class="routeInstructionsHL">The Route-Instructions:</span> '+gpxLink+'</p>';
|
||||
//Show Route Instructions
|
||||
output += '<table>';
|
||||
var lengthOfArray = response.route_instructions.length;
|
||||
var geometry = decodeRouteGeometry(response.route_geometry, 5);
|
||||
for (var i = 0; i < lengthOfArray; i++) {
|
||||
output += '<table>';
|
||||
lengthOfArray = response.route_instructions.length;
|
||||
for (i = 0; i < lengthOfArray; i++) {
|
||||
//console.log(response.route_instructions[i]);
|
||||
//odd or even ?
|
||||
var rowstyle='routeInstructionsOdd';
|
||||
if(i%2==0){ rowstyle='routeInstructionsEven'; }
|
||||
|
||||
|
||||
var indexPos = response.route_instructions[i][3];
|
||||
var point = new OpenLayers.Geometry.Point(geometry[indexPos][1], geometry[indexPos][0]);
|
||||
//console.log('setting : ' + response.route_instructions[i] + ' at ' + allRoutePoints[indexPos]);
|
||||
var point = allRoutePoints[indexPos];
|
||||
output += '<tr class="'+rowstyle+'"><td align="right" valign="top"><span class="routeSummarybold">'+(i+1)+'.</span></td><td class="'+rowstyle+'"><a href="#" class="nolinkStyle" onclick="setMapCenter(new OpenLayers.LonLat('+point.x+','+point.y+'));">'+response.route_instructions[i][0]+' on '+response.route_instructions[i][1]+' for '+getDistanceWithUnit(response.route_instructions[i][2])+'</a></td></tr>';
}
|
||||
output += '</table>';
|
||||
var rowstyle='routeInstructionsOdd';
|
||||
if(i%2==0){ rowstyle='routeInstructionsEven'; }
|
||||
if( lengthOfArray > 0) {
|
||||
var point = allRoutePoints[allRoutePoints.length-1];
|
||||
output += '<tr class="'+rowstyle+'"><td align="right" valign="top"><span class="routeSummarybold">'+(i+1)+'.</span></td><td class="'+rowstyle+'"><a href="#" class="nolinkStyle" onclick="setMapCenter(new OpenLayers.LonLat('+point.x+','+point.y+'));">You have reached your destination</a></td></tr>';
|
||||
}
|
||||
output += '</table>';
|
||||
//alert(vectorLayerRoute.features[0].geometry.getVertices());
|
||||
|
||||
document.getElementById('information').innerHTML = output;
}
|
||||
ISCALCULATING = false;
|
||||
document.getElementById('information').innerHTML = output;
ISCALCULATING = false;
|
||||
ISCALCULATINGVIA = false;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* showResultsRoute()-Function to show route result
|
||||
* showRouteGeometry()-Function to show route result
|
||||
*/
|
||||
function showRouteGeometry(response) {
|
||||
if (response) {
vectorLayerRoute.removeFeatures(vectorLayerRoute.features);
|
||||
|
||||
if (response) {
|
||||
allRoutePoints.length = 0;
|
||||
// now with compression of the route geometry
|
||||
var geometry = decodeRouteGeometry(response.route_geometry, 5);
|
||||
var lengthOfArray = geometry.length;
|
||||
var points = [];
|
||||
points.length = lengthOfArray;
|
||||
|
||||
//Create Route Layer for Display
for (var i = 0; i < lengthOfArray; i++) {
var point = new OpenLayers.Geometry.Point(geometry[i][1], geometry[i][0]).transform(EPSG_4326, EPSG_900913);
points.push(point);
|
||||
var points = [];
|
||||
//delete any previously displayed via route
|
||||
vectorLayerViaRoute.removeFeatures(vectorLayerViaRoute.features);
|
||||
vectorLayerRoute.removeAllFeatures();
|
||||
|
||||
//Create Route Layer for Display
|
||||
for (var i = 0; i < lengthOfArray; i++) {
|
||||
var point = new OpenLayers.Geometry.Point(geometry[i][1], geometry[i][0]).transform(EPSG_4326, EPSG_900913);
|
||||
allRoutePoints.push(point);
|
||||
points.push(point);
|
||||
|
||||
if(i % 1024 == 0 && i>0 || i==lengthOfArray-1){
|
||||
var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), null, {
|
||||
/* var feature2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), null, {
|
||||
strokeColor: "#000066",
|
||||
strokeOpacity: 1,
|
||||
strokeWidth: 9
|
||||
});
|
||||
|
||||
var feature1 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), null, {
|
||||
strokeColor: "#ffffff",
|
||||
strokeOpacity: 0.75,
|
||||
strokeWidth: 7
|
||||
});
|
||||
*/
|
||||
|
||||
var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), null, {
|
||||
strokeColor: "#0033ff",
|
||||
strokeOpacity: 0.7,
|
||||
strokeWidth: 5
|
||||
});
|
||||
vectorLayerRoute.addFeatures([feature]);
|
||||
points = [];
|
||||
points.push(point);
|
||||
}
}
|
||||
});
|
||||
// vectorLayerRoute.addFeatures([feature2]);
|
||||
// vectorLayerRoute.addFeatures([feature1]);
|
||||
vectorLayerRoute.addFeatures([feature]);
|
||||
points = [];
|
||||
points.push(point);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -177,12 +228,12 @@ function showRouteGeometry(response) {
|
||||
* showNoNameStreets()-Function to show route result
|
||||
*/
|
||||
function showNoNameStreets(response) {
|
||||
if (response) {
vectorLayerRoute.removeFeatures(vectorLayerRoute.features);
|
||||
|
||||
// now with compression of the route geometry
|
||||
if (response) {
allRoutePoints.length = 0;
|
||||
vectorLayerRoute.removeFeatures(vectorLayerRoute.features);
// now with compression of the route geometry
|
||||
var geometry = decodeRouteGeometry(response.route_geometry, 5);
|
||||
var lengthOfArray = geometry.length;
|
||||
var points = [];
points.length = lengthOfArray;
|
||||
var points = [];
|
||||
points.length = lengthOfArray;
|
||||
|
||||
//Check if a instruction has no name !
|
||||
var colors = [];
|
||||
@ -194,11 +245,16 @@ function showNoNameStreets(response) {
|
||||
if(streetName == ''){ colors[indexPos] = "#FF00FF"; }
|
||||
else{ colors[indexPos] = "#0033ff"; }
}
|
||||
}
|
||||
|
||||
//delete any previously displayed via route
|
||||
vectorLayerViaRoute.removeFeatures(vectorLayerViaRoute.features);
|
||||
vectorLayerRoute.removeAllFeatures();
|
||||
|
||||
//Create Route Layer for Display
|
||||
var color = "#0033ff";
|
||||
var changeColor = false;
for (var i = 0; i < lengthOfArray; i++) {
var point = new OpenLayers.Geometry.Point(geometry[i][1], geometry[i][0]).transform(EPSG_4326, EPSG_900913);
points.push(point);
|
||||
|
||||
allRoutePoints.push(point);
|
||||
|
||||
if(colors[i] != undefined){ changeColor=true;}
|
||||
|
||||
if(i % 1024 == 0 && i>0 || i==lengthOfArray-1 || changeColor){
|
||||
@ -248,8 +304,9 @@ function getDistanceWithUnit(distance){
|
||||
* setMapCenter()-Function to add a marker and center the map
|
||||
*/
|
||||
function setMapCenter(lonlat){
|
||||
lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
|
||||
|
||||
//lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
|
||||
//console.log('zooming to :' + lonlat);
|
||||
|
||||
//Add Marker
|
||||
markersLayer.clearMarkers();
|
||||
var size = new OpenLayers.Size(21,25);
|
||||
|
||||
@ -13,8 +13,10 @@
|
||||
<script src="ol/OpenStreetMap.js"></script>
|
||||
<script src="Slides.js"></script>
|
||||
<script src="Map.js"></script>
|
||||
<script src="Route.js"></script>
|
||||
<script src="Route.js"></script>
|
||||
<script src="ViaRoute.js"></script>
|
||||
<script src="Geocode.js"></script>
|
||||
<script src="MouseClick.js"></script>
|
||||
<!-- <script src="osrm.js"></script> -->
|
||||
|
||||
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
|
||||
@ -32,7 +34,7 @@
|
||||
<table width="100%">
|
||||
<tr id="StartPoint">
|
||||
<td><div class="textLabel"><img src="img/arrow-start.png" class="radioIcons" width="12" height="16" alt=""><span class="text"></span></div></td>
|
||||
<td><input name="tfStartSearch" style="width:220px" type="text" id="tfStartSearch" class="tfPoints" value="Berlin, Unter den Eichen" title="Search your start point!" onKeyPress="checkReturn('start',event);" >
|
||||
<td><input name="tfStartSearch" style="width:220px" type="text" id="tfStartSearch" class="tfPoints" value="Berlin Alexanderplatz" title="Search your start point!" onKeyPress="checkReturn('start',event);" >
|
||||
<button name="enterStart" onclick="setStatus('start'); geocodeAddress('start');">Search</button></td>
|
||||
<td rowspan="2" valign="middle">
|
||||
<!-- <button name="switchStartEnd" disabled="true" id="switchStartEnd" type="button"
|
||||
@ -43,7 +45,7 @@
|
||||
<div class="textLabel"><img src="img/arrow-finish.png" class="radioIcons" width="12" height="16" alt=""><span class="text"></span></div>
|
||||
</td>
|
||||
<td id="tdEnd">
|
||||
<input name="tfEndSearch" style="width:220px" type="text" id="tfEndSearch" class="tfPoints" value="München, Altstadt" title="Search your end point!" onKeyPress="checkReturn('end',event);">
|
||||
<input name="tfEndSearch" style="width:220px" type="text" id="tfEndSearch" class="tfPoints" value="Hamburg" title="Search your end point!" onKeyPress="checkReturn('end',event);">
|
||||
<button name="enterEnd" onclick="setStatus('end'); geocodeAddress('end');">Search</button>
|
||||
</td>
|
||||
</tr>
|
||||
@ -56,7 +58,7 @@
|
||||
|
||||
<div id="options" class="options_div" style="display:none"><input class="checkbox" type="checkbox" name="cbNoNames" id="cbNoNames" value="checkbox">Highlight No Name Streets in my Route</div>
|
||||
<div id="information" class="information"> <p class="infoHL">Demo Website for the <br><a target="_blank" href="http://project-osrm.org/">Open Source Routing Machine Project</a></p> </div>
|
||||
<div id="thx" class="thx">GUIv0.2-110701 - OSRM hosting by <a target="_blank" href="http://www.geofabrik.de/">Geofabrik</a> - Geocoder by <a target="_blank" href="http://developer.mapquest.com/web/products/open/nominatim/">MapQuest</a></div>
|
||||
<div id="thx" class="thx">GUI v0.3beta-11/July/11 - OSRM hosting by <a target="_blank" href="http://www.geofabrik.de/">Geofabrik</a> - Geocoder by <a target="_blank" href="http://developer.mapquest.com/web/products/open/nominatim/">MapQuest</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -65,4 +67,4 @@
|
||||
<div class="copyright">© 2011 <a target="_blank" href="http://project-osrm.org/">Project OSRM</a> - Map data <a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/">CC-By-SA</a> <a target="_blank" href="http://www.openstreetmap.org">by OpenStreetMap</a></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user