×

Discussion Board

Results 1 to 5 of 5
  1. #1
    Nokia Developer Expert
    Join Date
    Jul 2013
    Posts
    4

    How to display a already driven route

    Hi,
    I am working on a script that can display the already driven route of our vehicles using the JavaScript API.
    The vehicles have locators that send the Lat/Long to a database at least every 30 seconds but additionally when the direction changes.
    I have this working now for already some weeks, using standard Markers for each point, but it isn't a nice view and all these markers give the route an ugly shadow.
    What I want to do is to use the Lat/Longs to display a route as a line in the map without making each point visible.
    Can someone please guide me to how to get this working?

    Thanks,

    Micha

  2. #2
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: How to display a already driven route

    I think your use case requires Polylines rather than using Markers - just create an array of latitude/longitude points and pass it into the constructor of the Polyline

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    		<title>Polyline</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
    
    <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js"></script>
    </head>
    <body >
    <div id="mapContainer" style="width:600px; height:600px;" >&nbsp;</div><br/>
    <script type="text/javascript">
    // <![CDATA[
    
    
    
    /////////////////////////////////////////////////////////////////////////////////////
    // Don't forget to set your API credentials
    //
    // Replace with your appId and token which you can obtain when you 
    // register on http://api.developer.nokia.com/ 
    //
    			nokia.Settings.set( "appId", "YOUR APP ID"); 
    			nokia.Settings.set( "authenticationToken", "YOUR TOKEN");
    //			
    /////////////////////////////////////////////////////////////////////////////////////
    var mapContainer = document.getElementById("mapContainer");
    
    var map = new nokia.maps.map.Display(mapContainer, {
    	 'components': [ 
            // Behavior collection
            new nokia.maps.map.component.Behavior(),
            new nokia.maps.map.component.ZoomBar(),
            new nokia.maps.map.component.Overview(),
            new nokia.maps.map.component.TypeSelector(),
            new nokia.maps.map.component.ScaleBar() ],
        'zoomLevel': 6, // Zoom level for the map
        'center': [53.4,-2] // Center coordinates
    });
    // Remove zoom.MouseWheel behavior for better page scrolling experience
    map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    
    
    
    var points =[ 
    {latitude: 51.5319077565243, longitude:0.0393962860107422},
    {latitude: 51.5550345889745, longitude:-0.108500719070435},
    {latitude: 52.5091331805643, longitude: -1.88484460115433},
    {latitude: 53.5476866063421, longitude:-2.65415579080582},
    {latitude: 53.7285724665396, longitude:-2.48921602964401},
    {latitude: 53.463043359365, longitude:-2.29132533073425},
    {latitude: 53.4393381986981,longitude: -2.2211828827858},
    {latitude: 54.9755509420124, longitude:-1.62162870168686}];
    
    // Transparent purple polyline
    map.objects.add(new nokia.maps.map.Polyline(
    	points,
    	{	
    		pen: {
    			strokeColor: "#22CA", 
    			lineWidth: 5
    		}
    	}
    ));
    // ]]>
    </script>
    </body>
    </html>
    I'm not sure of the specifics of your use case (i.e. "already driven" ), but please bear in mind that fleet management/asset tracking applications are subject to the following restriction as stated in the terms and conditions

    When using the Location Platform Services, unless otherwise agreed in writing with NAVTEQ, You hereby agree that You will not:
    • Use or incorporate the Location Platform Services or any part thereof outside of Your Application;
    • Use, without NAVTEQ's prior written permission, the Location Platform Services, in connection with any internal business Application the purpose of which is directly related to the operation of Your core business or the core business of Your End Users and where the users of such Application are Your employees or contractors (e.g. fleet management, dispatch or asset tracking);

  3. #3
    Nokia Developer Expert
    Join Date
    Jul 2013
    Posts
    4

    Re: How to display a already driven route

    Hi Jason,

    This works much better, thanks for the tip.

    The only thing I am now facing is that I can't get my map.zoomTo(xxx.getBoundingBox() working.
    In the old method I created a container holding all the markers and used that for the getBoundingBox function, but obviously this doesn't work anymore as I don't have markers.
    I tried to do points.getBoundingBox but that doesn't work.

    Thanks.

    BTW regarding the license, I am HERE.

    Thanks

    Micha

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

    Re: How to display a already driven route

    The Polyline inherits a method - getBoundingBox() which describes the minimum area required to display all of the points on the Polyline. Rather than add the Polyline directly, create as a separate variable first, and then call the zoomTo() method on its BoundingBox

    Code:
    var points =[ 
    {latitude: 51.5319077565243, longitude:0.0393962860107422},
    {latitude: 51.5550345889745, longitude:-0.108500719070435},
    {latitude: 52.5091331805643, longitude: -1.88484460115433},
    {latitude: 53.5476866063421, longitude:-2.65415579080582},
    {latitude: 53.7285724665396, longitude:-2.48921602964401},
    {latitude: 53.463043359365, longitude:-2.29132533073425},
    {latitude: 53.4393381986981,longitude: -2.2211828827858},
    {latitude: 54.9755509420124, longitude:-1.62162870168686}];
    
    var poly = new nokia.maps.map.Polyline(
    	points,
    	{	
    		pen: {
    			strokeColor: "#22CA", 
    			lineWidth: 5
    		}
    	});
    // Transparent purple polyline
    map.objects.add(poly);
    map.zoomTo(poly.getBoundingBox(), false);

    You could of course place the Polyline in a Container itself, but it isn't necessary in this case.

  5. #5
    Nokia Developer Expert
    Join Date
    Jul 2013
    Posts
    4

    Re: How to display a already driven route

    Hi Jason,

    This did the trick :-)
    Many thanks,

    Micha

Similar Threads

  1. [split] AI-driven S60 Application
    By SoulBlade in forum General Development Questions
    Replies: 5
    Last Post: 2008-12-28, 22:23
  2. route and record route on 3rd edition
    By jcaradec in forum Symbian Networking & Messaging (Closed)
    Replies: 3
    Last Post: 2007-04-16, 19:07
  3. Record-Route and Route at SIP
    By mhappenhofer in forum Mobile Java Networking & Messaging & Security
    Replies: 0
    Last Post: 2005-11-30, 09:22
  4. Smart Messaging for Menu Driven
    By iwansp in forum General Messaging
    Replies: 4
    Last Post: 2004-02-06, 09:31
  5. Smart Messaging for Menu Driven
    By iwansp in forum Smart Messaging
    Replies: 0
    Last Post: 2004-02-05, 16:33

Posting Permissions

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