×

Discussion Board

Results 1 to 7 of 7
  1. #1
    Registered User
    Join Date
    Apr 2013
    Posts
    4

    Complete Rooting system using two input with autocomplete

    Hi nokia Community,
    I am trying desperatly to make a form with two input where the user will have to enter the first two letters of a city and the Places API will return propositions by autocompleting. Then the user click on the city/adress for both input, click on a button for valid the request, and finally the maps display a rooting between the start City and the arrival City.
    For now I succeed to make a simple search request with one input and displaying the result on the map but not for keeping in an array the location of this result for use it after in the rooting definition.

    Is there a tutorial existing about this because I watch the doc, the wiki but I began to be completly lost even if I know that I'm close! :)

    Thank you for any responses.

    Best Regards.

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

    Re: Complete Rooting system using two input with autocomplete

    I would suggest having the form to include a two values, which are starting & ending locations (for which you have geo coordinates as well). Then implement other screen in which user types in the stuff, and in which you use autocomleting. Then also in it, when you have the location, use Geocoding service to get the location.

    This way user needs to do some navigations, but you could manage the code & requests easier way. Then once user has gotten both end & start points, then use the routing service to get the route

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

    Re: Complete Rooting system using two input with autocomplete

    Ok thanks for your reply!
    I am not totally free with the final display as I have guidelines from the client, so I'm not sure if I can do what you suggest to me. :(
    Concretly I have to render mostly the same result as this exemple : http://api.maps.ovi.com/playground2/...ompleterouting .

    For now I try to get back the latitude and longitude for a search result. I have an idea and I think that if I can get this position coordinate I will be able to d what I want, well I hope so :).
    From this code, how to stock the coordinate of the result? Do I have to see on the hand of pixelToGeo?
    HTML Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="style/bootstrap2.css" type="text/css" rel="stylesheet" />
        <title>Ovi Maps API Example</title>
        <script type="text/javascript"
        src="http://api.maps.nokia.com/2.2.4/jsl.js" charset="utf-8">
    </script>
        <!--<script type="text/javascript" src="jsl.js?with=places"></script>-->
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
            <script type="text/javascript" src="jquery-ui/jquery.ui.autocomplete.js"></script>
      </head>
      <body>
     
        <div>
            <input id="recherche" value="" />
            <button id="search" onclick="recherche()">Chercher</button>
        </div>
        <div id="map" style="width:600px; height:400px;"></div>
        <script type="text/javascript">
        // Authentication set up is the first thing that you must do with the API 
        nokia.Settings.set("appId", "XXXXXXXX"); 
        nokia.Settings.set("authenticationToken", "XXXXXXXX");
        //ovi.mapsapi.util.ApplicationContext.set({"appId": "XXXXXXXX", "authenticationToken": "XXXXXXXXXXXXXXXX"});
        //ovi.mapsapi.util.ApplicationContext.set("defaultLanguage", "fr-FR");
    
            var mapContainer = document.getElementById("map");
     
            var map = new nokia.maps.map.Display(mapContainer, {    
                center: [48.8567, 2.3508],
                zoomLevel: 10,
                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.PublicTransport(),
                    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()]
            });
              
            map.addListener("click", function(evt) { 
                if (( evt.target.$href === undefined) == false){
                    window.location = evt.target.$href;   
                }   else if (( evt.target.$click === undefined) == false){ 
                        var onClickDo = new Function(evt.target.$click);        onClickDo();   
                    }
            });
    
              // Partie recherche
                    var searchManager = nokia.places.search.manager,
                        resultSet;
    
                    
                    
                    // Function for receiving search results from places search and process them
                    var processResults = function (data, requestStatus, requestId) {
                        var i, len, locations, marker;
                     
                        if (requestStatus == "OK") {
                            locations = data.results ? data.results.items : [data.location];
                            if (locations.length > 0) {
                                resultSet = new nokia.maps.map.Container();
                                for (i = 0, len = locations.length; i < len; i++) {
                                    marker = new nokia.maps.map.StandardMarker(
                                        locations[i].position, { text: i+1 },
                                        //{$click  : 'alert("Hello World");'};
                                    );
                                    resultSet.objects.add(marker);
                                    /*coordonne = new nokia.maps.geo.ICoordinate(marker) ;
    
                                    alert(coordonne);*/
                                    //alert("Dijon est à la longitude : "+marker.location[longitude]+" et à la lontitude : "+marker.coordinate);
                                    
                                }
                                map.objects.add(resultSet);
                                map.zoomTo(resultSet.getBoundingBox(), false);
                            }
                        } else {
                            alert("The search request failed");
                        }
                    };
    
                    /*var  clicked_location = map.pixelToGeo(event.displayX, event.displayY);
                        nokia.places.search.manager.reverseGeoCode({
                        latitude: clicked_location.latitude,
                        longitude: clicked_location.longitude,
                        onComplete: processResults
                    });*/
    
    
    
                    function recherche() { 
                        var depart = document.getElementById("recherche");
                        searchManager.geoCode({
                        searchTerm: depart.value,
                        onComplete: processResults,
                        });
                    }
                    
          </script>
    </body>
    </html>

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

    Re: Complete Rooting system using two input with autocomplete

    Quote Originally Posted by Gaius Baltar View Post
    Hi nokia Community,
    I am trying desperatly to make a form with two input where the user will have to enter the first two letters of a city and the Places API will return propositions by autocompleting..
    This is the precise use case for the SearchBox widget - the code can be found in the JavaScript API Explorer.

    When you receive the onResults event, you'll need to extract the geocoordinate of the place - it is held in data.results.items[0].position

    Code:
    onResults: function (data) {			
    				// Results of yourch search
    				var result,
    					resultsElt = document.getElementById("basicSearchBoxResults"),
    					i, len;
    					resultsElt.innerHTML = "";
    					for (var i = 0, len = data.results.items.length; i < len ; i++) {
    						var coord =  data.results.items[i].position;
    						alert("Longitude is" + coord.longitude);
                                                    alert("Latitude is" + coord.latitude);
    					}
    			}
    		});
    Once you have lat/longs for both a start and end point, you can call the standard A-to-B routing example, or give the end user directions as in the wiki example

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

    Re: Complete Rooting system using two input with autocomplete

    Thanks a lot Jason, it works great!
    I only have now to implement the searchbox comportment directly into my input.
    Thank to you both I can go ahead ;).

  6. #6
    Registered User
    Join Date
    Apr 2013
    Posts
    4

    Re: Complete Rooting system using two input with autocomplete

    Hi guys,

    Thanks you by the way it works fine, I have now 2 searchBox who I get back the position and implement for a routing plan. However, is there a way to customize the searchBox Widget? Like not displaying the search button, just keeping the input suggestion, and displaying only Citys in suggestion, not adresses?

    If not, I am trying to implement a suggestion to an input like this (more or less) http://stackoverflow.com/questions/9...mplete-feature but the guy isn't in the same way than I, they expect to get coordinate psition and split them instead I just would City name search, have you some example on your hand with JQUERY autocompletion using the places API?

    Best regards.
    Gaius.

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

    Re: Complete Rooting system using two input with autocomplete

    Quote Originally Posted by Gaius Baltar View Post
    ... is there a way to customize the searchBox Widget? Like not displaying the search button, just keeping the input suggestion, and displaying only Citys in suggestion, not adresses?
    If not, I am trying to implement a suggestion to an input like this (more or less)...
    • For styling you could try altering the CSS for the searchBox element to hide the search button if you wish.
    • The searchBox widget and suggestions it returns are very much tied up with the "What do you want to find around here ?" sort of use case. Hence suggestions returns a mixture of suggested categories, streets, landmarks and cities. From the way you are describing it, your use case is different, you want a fuzzy search directly on a list of cities which may or may not be nearby. I wouldn't use the Places API as it stands to implement this particular use case.


    From the sound of it, it looks like you may be after an advanced geocoder to accomplish this - I know that one of the use cases covered by Nokia's Enterprise Geocoder is the ability to find areas such as cities, states and so on. To access this service you would need to pay for it however. You could request access through "Request a custom package with more features" at the bottom of the plans page. It all depends on how comprehensive a list of cities you need, and what you mean by a "city" of course . If you don't need too much detail- you could use your own criteria for this and create your list of acceptable base data from scratch. There are several free listings of cities with longitude and latitude available on line (e.g. GeoDataSource, worlddb or Maxmind) - you could place this data into a SQL server and use JQuery to make an asynchronous call to obtain near matches and return your list of cities.

Similar Threads

  1. SDK for browsing complete file system on PC
    By swapnil_mahajan in forum Symbian Tools & SDKs
    Replies: 6
    Last Post: 2009-10-13, 10:10
  2. autocomplete, file system and very basic question on J2ME, Newbie
    By raxitsheth in forum Mobile Java General
    Replies: 8
    Last Post: 2008-07-18, 18:58
  3. autocomplete search box
    By hp3 in forum Symbian
    Replies: 2
    Last Post: 2008-05-04, 12:57
  4. How to clear content of native input-system
    By gemilib in forum Mobile Java General
    Replies: 2
    Last Post: 2008-04-24, 10:14
  5. How to get the system default input method?
    By bellshine in forum Symbian
    Replies: 6
    Last Post: 2007-08-23, 09:38

Posting Permissions

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