Discussion Board

Results 1 to 6 of 6
  1. #1
    Registered User
    Join Date
    Apr 2013
    Posts
    3

    Creating a route after User input

    Hi all.

    I been searching for a couple hours now for a solution or suggestion to my problem but really cant find something. I also worked with the tutorials and examples.

    What i want to achieve is to show a route where the destination is known but the starting location is dependent on user input.
    So i have an input field where the user can enter his address (city, street etc) and a submit button. I want to calculate a route based
    on the starting location the user entered to a fixed address.

    Any help would be greatly appreciated!

  2. #2
    Nokia Developer Moderator
    Join Date
    Mar 2003
    Location
    Lempäälä/Finland
    Posts
    29,185

    Re: Creating a route after User input

    As the routing API takes geocoordinate as waypoints, You would need to sue geocoding services first to find geocoordinate location matching the address, anyway, once you do that its then strait forward routing query with two waypoints.

  3. #3
    Registered User
    Join Date
    Apr 2013
    Posts
    3

    Re: Creating a route after User input

    Yeah i figured that but i just have issues converting the user adress to a geocode...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=EmulateIE10;"/>
    		<base href="http://developer.here.com/apiexplorer/examples/api-for-js/getting-started/basic-map-with-components.html" />
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    		<title>Nokia Maps API for JavaScript Example: Basic map with components</title>
    		<meta name="description" content="How to get a basic map with all UI components enabled"/>
    		<meta name="keywords" content="basiccomponents, getting started, basic map, components"/>
    		<!-- For scaling content for mobile devices, setting the viewport to the width of the device-->
    		<meta name=viewport content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<!-- Styling for example container (NoteContainer & Logger)  -->
    		<link rel="stylesheet" type="text/css" href="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.css"/>
    		<!-- By default we add ?with=all to load every package available, it's better to change this parameter to your use case. Options ?with=maps|positioning|places|placesdata|directions|datarendering|all -->
    		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js?with=all"></script>
    		<!-- JavaScript for example container (NoteContainer & Logger)  -->
    		<script type="text/javascript" charset="UTF-8" src="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.js"></script>
    		<style type="text/css">
    			html {
    				overflow:hidden;
    			}
    			
    			body {
    				margin: 0;
    				padding: 0;
    				overflow: hidden;
    				width: 100%;
    				height: 100%;
    				position: absolute;
    			}
    			
    			#mapContainer {
    				width: 600px;
    				height: 500px;
    				left: 0;
    				top: 0;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="mapContainer"></div>
    		<div id="uiContainer"></div><br><br>
    		<label for="geo_text_box"> Ihre Adresse </label><br/>              
    		<input type="text" id="geo_text_box" value="Frankfurt"/>
    		<input type="button" value="Route berechnen" onclick="splitQueryString()"/>
    		
    		<script type="text/javascript" id="exampleJsSource">
    nokia.Settings.set("appId", "WLFvRpNhqMZaNGc5L3fe"); 
    nokia.Settings.set("authenticationToken", "TbD7mpA-5Wog_ypxTRA_tQ");
    nokia.Settings.set("defaultLanguage", "de-DE");
    // Get the DOM node to which we will append the map
    var mapContainer = document.getElementById("mapContainer");
    // Create a map inside the map container DOM node
    var map = new nokia.maps.map.Display(mapContainer, {
    		// Initial center and zoom level of the map
    		center: [50.550815410689836, 9.68044102191925],
    		zoomLevel: 8,
    		// We add the behavior component to allow panning / zooming of the map
    		components: [
    		new nokia.maps.map.component.ZoomBar(), 
    		new nokia.maps.map.component.Behavior(),
    		new nokia.maps.map.component.TypeSelector(),
    		new nokia.maps.map.component.Traffic(),
    		new nokia.maps.map.component.DistanceMeasurement(),
    		new nokia.maps.map.component.Overview(),
    		new nokia.maps.map.component.ScaleBar(),
    		new nokia.maps.positioning.component.Positioning(),
    		new nokia.maps.map.component.ContextMenu()
    	]
    	}),
    	router = new nokia.maps.routing.Manager(); // create a route manager;
    	
    function splitQueryString() {
    	var param = new Array();
    	param[0] = 'Fulda, Peterstor 23';
    	param[1] = document.getElementById("geo_text_box").value;
           return param;
    }
    var param = splitQueryString();
    
    var addresses = new Array();
    var geoCodedWaypoints = new Array(); 
    var expectedWaypoints = 0;
     
    for (var i = 0; i < 10; i++){
    	if ((param[i] === undefined) == false){
    			addresses.push(param[i]); 
    			expectedWaypoints++;
    	}
    }
    
    var i = addresses.length;
    while(i--) {
            nokia.places.search.manager.geoCode({
                     searchTerm :addresses[i],
    		onComplete:  new searchManager(i).onSearchComplete
    	});  
    }
    
    function searchManager($index) {
    		this.$index = $index;
        this.onSearchComplete = function (data, requestStatus) {
            // If the search  has finished we can process the results
     
        if (requestStatus == "OK") {
     
    			geoCodedWaypoints [$index] =  data.location.position;  
    			addressContainer.objects.add(new nokia.maps.map.StandardMarker
                                                    ( geoCodedWaypoints [$index],{text: ($index + 1)}));
    		  //increment the counter to notify another manager has finished
    		  managersFinished++;
    		} else if(requestStatus === "ERROR") {
    		  // we'll also increment in case of an error
    		  managersFinished++;
    		}
     
        // if all managers are finished, we call the final function         
        if(managersFinished === addresses.length) { 
            // We can now continue with known Geolocations
    		    setUpTheMap();
    		    // It does no harm in focusing on the appropriate area prior to making the
    		    // routing calculation.
     
    		    // hence we get the bounding box of the container
    		    var bbox = addressContainer.getBoundingBox();
     
    		    // if the bounding box is null then there are no objects inside
    		    // meaning no markers have been added to it
    		    if (bbox != null) {
    		        // we have at least one address mapped so we zoomTo it
    		        display.zoomTo(bbox);
    		  	}
            calculateRouteFromKnownWaypoints(); 
        }
    }};
    
    var route;
    var router = new nokia.maps.routing.Manager(); // create a route manager;
    router.addObserver("state", onRouteCalculated);
    var modes = [{ 
    		type: "shortest", 
    		transportModes: ["car"],
    		options: "",
    		trafficMode: "default"
    }];
    router.calculateRoute(waypoints, modes);
    
    var onRouteCalculated = function (observedRouter, key, value) {
    		if (value == "finished") {
    				var routes = observedRouter.getRoutes();
    				var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
    				display.objects.add(mapRoute);			
    				route = routes[0];
     
    				display.zoomTo(mapRoute.getBoundingBox(), false, "default");
     
    				// Build human readable instructions for each maneuver.
    				var instructions = "";
    				var details = "<ol>";
    				for (var i = 0;  i < route.legs.length; i++){
    						for (var j = 0;  j < route.legs[i].maneuvers.length; j++){
    								details = details + "<li>";
    								maneuver = route.legs[i].maneuvers[j];
    								instructions =  route.legs[i].maneuvers[j].instruction;
    								addMarker( maneuver, 0, instructions);
    								details = details +  zoomTolink(maneuver.position)  + instructions;
    								details = details + "</li>";
    						}
    				}
    				details =  details + "</ol>";				
    				document.getElementById("details").innerHTML = details;
     
    		} else if (value == "failed") {
    				// Something has gone horribly wrong  e.g. route too long.
    				alert("The routing request failed.");
    		}
    };
    
    		</script>
    	</body>
    </html>
    Last edited by jasfox; 2013-07-18 at 12:15.

  4. #4
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    289

    Re: Creating a route after User input

    Quote Originally Posted by cfleck1980 View Post
    Hi all.
    What i want to achieve is to show a route where the destination is known but the starting location is dependent on user input.
    So i have an input field where the user can enter his address (city, street etc) and a submit button. I want to calculate a route based
    on the starting location the user entered to a fixed address.!
    This should be a simplified working example.
    • On the button click geocode() the address.
    • In the callback function, start to routing request. calculateRouteTo() will find routes to Berlin
    • In the observer of the routing.Manager, check for success and display the route and instructions as necessary.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=EmulateIE10;"/>
    		<base href="http://developer.here.com/apiexplorer/examples/api-for-js/getting-started/basic-map-with-components.html" />
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    		<title>Nokia Maps API for JavaScript Example: Basic map with components</title>
    		<meta name="description" content="How to get a basic map with all UI components enabled"/>
    		<meta name="keywords" content="basiccomponents, getting started, basic map, components"/>
    		<!-- For scaling content for mobile devices, setting the viewport to the width of the device-->
    		<meta name=viewport content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<!-- Styling for example container (NoteContainer & Logger)  -->
    		<link rel="stylesheet" type="text/css" href="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.css"/>
    		<!-- By default we add ?with=all to load every package available, it's better to change this parameter to your use case. Options ?with=maps|positioning|places|placesdata|directions|datarendering|all -->
    		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js?with=all"></script>
    		<!-- JavaScript for example container (NoteContainer & Logger)  -->
    		<script type="text/javascript" charset="UTF-8" src="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.js"></script>
    		<style type="text/css">
    			html {
    				overflow:hidden;
    			}
    			
    			body {
    				margin: 0;
    				padding: 0;
    				overflow: hidden;
    				width: 100%;
    				height: 100%;
    				position: absolute;
    			}
    			
    			#mapContainer {
    				width: 600px;
    				height: 500px;
    				left: 0;
    				top: 0;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="mapContainer"></div>
    		<div id="uiContainer"></div><br><br>
    		<label for="geo_text_box"> Ihre Adresse </label><br/>              
    		<input type="text" id="geo_text_box" value="Frankfurt"/>
    		<input type="button" value="Route berechnen" onclick="geocode(document.getElementById('geo_text_box').value)"/>
    		<div id="details"></div>
    		<script type="text/javascript" id="exampleJsSource">
    nokia.Settings.set("appId", "WLFvRpNhqMZaNGc5L3fe"); 
    nokia.Settings.set("authenticationToken", "TbD7mpA-5Wog_ypxTRA_tQ");
    nokia.Settings.set("defaultLanguage", "de-DE");
    // Get the DOM node to which we will append the map
    var mapContainer = document.getElementById("mapContainer");
    // Create a map inside the map container DOM node
    var map = new nokia.maps.map.Display(mapContainer, {
    		// Initial center and zoom level of the map
    		center: [50.550815410689836, 9.68044102191925],
    		zoomLevel: 8,
    		// We add the behavior component to allow panning / zooming of the map
    		components: [
    		new nokia.maps.map.component.ZoomBar(), 
    		new nokia.maps.map.component.Behavior()
    	]
    	}),
    	router = new nokia.maps.routing.Manager(); // create a route manager;
    	
    function geocode(freetext) {
            nokia.places.search.manager.geoCode({
                     searchTerm : freetext,
    		onComplete:  function (data, requestStatus) {
    			if (requestStatus == "OK") {
    				calculateRouteTo(data.location.position); 		
    			} else if(requestStatus === "ERROR") {
    				alert("error");				
    			}
    		}
    	});  
    }
    function calculateRouteTo(position){
    	
    	
    	var waypoints = 
    	new nokia.maps.routing.WaypointParameterList();
    	waypoints.addCoordinate(
    		new nokia.maps.geo.Coordinate(52.5162, 13.3889));
    	waypoints.addCoordinate( position);
    
    	var modes = [{ 
    		type: "shortest", 
    		transportModes: ["car"],
    		options: "",
    		trafficMode: "default"
    	}];
    	
    	router.calculateRoute(waypoints, modes);
    
    }
    
    
    
    var route;
    var router = new nokia.maps.routing.Manager(); // create a route manager;
    router.addObserver("state", 
    function (observedRouter, key, value) {
    	if (value == "finished") {
    			var routes = observedRouter.getRoutes();
    			var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
    			map.objects.add(mapRoute);			
    			route = routes[0];
    
    			map.zoomTo(mapRoute.getBoundingBox(), false, "default");
    
    			// Build human readable instructions for each maneuver.
    			var instructions = "";
    			var details = "<ol>";
    			for (var i = 0;  i < route.legs.length; i++){
    					for (var j = 0;  j < route.legs[i].maneuvers.length; j++){
    							details = details + "<li>";
    							maneuver = route.legs[i].maneuvers[j];
    							instructions =  route.legs[i].maneuvers[j].instruction;
    					
    							details = details +   instructions;
    							details = details + "</li>";
    					}
    			}
    			details =  details + "</ol>";				
    			document.getElementById("details").innerHTML = details;
    
    	} else if (value == "failed") {
    			// Something has gone horribly wrong  e.g. route too long.
    			alert("The routing request failed.");
    	}
    }
    
    
    );
    
    
    		</script>
    	</body>
    </html>

  5. #5
    Registered User
    Join Date
    Apr 2013
    Posts
    3

    Re: Creating a route after User input

    Thanks alot!

  6. #6
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    289

    Re: Creating a route after User input

    Dependent upon your use case, you may also want to consider using the SearchBox widget rather than a plain text box.
    The difference in experience is the same as the difference between places and geocoding

    • With the geocoding + plain text box example, you enter a complete address to get the location you want.
    • With the places SearchBox example, you use the center of the map as a hint location, and the suggestions box will use a fuzzy search to give you hints as you type.


    The latter involves less typing for the user, but may not be appropriate if you are looking for exact addresses from further afield.
    An example has been added to the Advanced Routing examples to show how to do this.

Similar Threads

  1. getting input from user thru GUI
    By vijayannair in forum Carbide.c++ IDE and plug-ins (Closed)
    Replies: 1
    Last Post: 2010-06-09, 07:41
  2. want to get user input
    By lokesh_kumar_s in forum Symbian
    Replies: 2
    Last Post: 2009-12-07, 09:37
  3. route and record route on 3rd edition
    By jcaradec in forum Symbian Networking & Messaging (Closed)
    Replies: 3
    Last Post: 2007-04-16, 19:07
  4. Creating a Input form interface for the user on MIDP2.0
    By rahuldev79n in forum Mobile Java General
    Replies: 3
    Last Post: 2006-03-30, 11:19
  5. user input
    By moelgaard75 in forum Mobile Java General
    Replies: 1
    Last Post: 2004-08-23, 04:49

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×