This file contains additional information, probably added from the digital camera or scanner used to create or digitize it. If the file has been modified from its. With your TomTom device plugged in or your sdcard in your sdreader and an active internet connection 2. Click on the.exe file Choose TomTom path or sd path and click on the Install button.
Overview of the tutorial
This tutorial shows the basic use of the SearchBox plugin to display it in a web page.
To start using the latest version of the SearchBox plugin, you need the following:
- The SearchBox plugin can be used in three ways.
- With a CDN: https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/<version>/SearchBox-web.js - Note: Include the latest version in the URL.
- Download it from this page: Downloads.
In this tutorial we are using a CDN as an example.
- API Key - If you don't have an API Key visit the How to get a TomTom API Key site and create one.
We recommend that you have npm and Node.js already installed on your computer to quickly spin up a HTTP server to display the page we will create.
There are two ways to include the SearchBox into your page.
- Using the SearchBox as an independent element.
- Using the SearchBox as a control in the map.
Using the SearchBox as an independent element
Now, let's create a basic HTML file to display the SearchBox plugin. For this example we created a file named index.html.
Next, copy the following script to your index.html file.
Let's go over the important lines
First, we import all the necessary assets. In this case there are SearchBox styles, the plugin, and the Services library.
- SearchBox styles - these provide the styles for SearchBox.
- SearchBox plugin - this provides the search box and its functionality to your page.
- Services library - This provides the necessary tools to integrate Tomtom services with your application.
Then we define the basic options configuration. See the following code example.
- searchOptions - this is for the Fuzzy Search service. For a full list of options please refer to the Fuzzy Search service documentation.
- autocompleteOptions - this is for the Autocomplete service. For a full list of options please refer to the Autocomplete service documentation.
If you pass this option, the results list will be extended by the results returned by the Autocomplete service. They are used as filters for the fuzzy search.
Remember to replace the placeholders with your real data.
| <your-tomtom-API-Key> | Your TomTom API Key generated earlier. |
For more details on how to use the configuration options, please refer to the documentation.
Then, we can create our new SearchBox instance
and append it to our application. In our example it's the body of the document.
Using the SearchBox as a control in the map
The workflow of adding the SearchBox as a control is almost the same. You need to include a Map in your page and add there created instance of SearchBox with subscribed event handlers.
To check how to add the Map, please refer to the Display a vector map tutorial.
SearchBox options was described above.
Remember to replace the placeholders with your real data.
| <your-tomtom-API-Key> | Your TomTom API Key generated earlier. |
For more map configuration options please refer to the Map documentation.
Then we define event handlers.
- handleResultsFound - executes when the search results are found. The event handler clears previously founded results and draws new. After that, it will try to fit drawn results on a vewport by executing fitToViewport method.
- handleResultSelection - executes in two cases:
- results were found and a user presses arrow up/down;
- results were found and a user chooses one by clicking on it; - handleResultClearing - executes when a user clicks on 'X' button of the SearchBox. As a result, all founded results will be cleared from the map.
After all these predefined steps we can create SearchMarkersManager, which will be responsible for manipulation with a marker.
In our example it has draw and clear methods
and SearchMarker, which will be responsible for appearance of the marker and providing possibility add/remove it from the map
For more advanced example of using the described code above please refer to the code tab of Search with autocomplete example.
Handling events
The SearchBox emits 7 different events:
- tomtom.searchbox.inputrestored - fired when the input is restored. This happens when the user uses the arrows to navigate through the suggestions list and navigates back to the input.
- tomtom.searchbox.loadingstarted - fired when a request in the background is started.
- tomtom.searchbox.loadingfinished - fired when a request in the background is finished.
- tomtom.searchbox.resultfocused - fired when the result is focused.
- tomtom.searchbox.resultscleared - fired when the search results are cleared.
- tomtom.searchbox.resultselected - fired when the user selects an element on the results list.
- tomtom.searchbox.resultsfound - fired when the search results are found.
Tomtom Meta File Download
If you want to subscribe for an event, use the following example code:
Option updating
If you have initialized the SearchBox and you want to change it's options later, you can do the following:
The query method triggers the search with updated options. This is necessary if you want to update results for the user with new options.
For more details on how to use the configuration options, please refer to the documentation.
Run a HTTP server
Using a terminal, navigate to the directory containing our example.
For example:
Install a lightweight HTTP server (you might need to run this command with admin/root privileges).
Then just simply run the following command.
Note that npm comes bundled with Node.js, so please make sure you have it installed on your machine.
So now it is time to see the results!
Open a browser and type this URL in the address bar: http://localhost:8080/index.html. You should be able to see the SearchBox!
Summary
From this tutorial you learned:
- How to prepare a basic HTML page to use the SearchBox.
- How to show the SearchBox on your map.
Original file (4,320 × 2,628 pixels, file size: 1.08 MB, MIME type: image/jpeg)
Captions
Captions
Summary[edit]
| Description | English: TomTom office, Amsterdam; De Ruijterkade 154. |
| Date | |
| Source | Own work |
| Author | Gerd Fahrenhorst |
Licensing[edit]
| Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled GNU Free Documentation License. |
| This file is licensed under the Creative CommonsAttribution 3.0 Unported license. | |
|
File history
Click on a date/time to view the file as it appeared at that time.
| Date/Time | Thumbnail | Dimensions | User | Comment |
|---|---|---|---|---|
| current | 14:34, 30 August 2012 | 4,320 × 2,628 (1.08 MB) | Gerd Fahrenhorst(talk | contribs) | {{Information |Description ={{en|1=TomTom office, Amsterdam.}} {{de|1=TomTom Bürogebäude, Amsterdam.}} |Source ={{own}} |Author =Gerd Fahrenhorst |Date =2012-08-28 |Permission = |other_versio... |
File usage on Commons
Tomtom Meta File App
The following page uses this file:
- File:TomTom headquarter Wikimedia.jpg (file redirect)
File usage on other wikis
The following other wikis use this file:
- Usage on de.wikipedia.org
- Usage on en.wikipedia.org
- Usage on eo.wikipedia.org
- Usage on fa.wikipedia.org
- Usage on no.wikipedia.org
- Usage on th.wikipedia.org
Metadata
Structured data
'}},'text/plain':{'en':{':'creator'}}},'{'value':{'entity-type':'property','numeric-id':3831,'id':'P3831'},'type':'wikibase-entityid'}':{'text/html':{'en':{':'object has role</a>'}},'text/plain':{'en':{':'object has role'}}},'{'value':{'entity-type':'item','numeric-id':33231,'id':'Q33231'},'type':'wikibase-entityid'}':{'text/html':{'en':{'P3831':'photographer</a>'}},'text/plain':{'en':{'P3831':'photographer'}}},'{'value':{'entity-type':'property','numeric-id':2093,'id':'P2093'},'type':'wikibase-entityid'}':{'text/html':{'en':{':'author name string</a>'}},'text/plain':{'en':{':'author name string'}}},'{'value':'Gerd Fahrenhorst','type':'string'}':{'text/html':{'en':{'P2093':'Gerd Fahrenhorst','P4174':'Gerd Fahrenhorst</a>'}},'text/plain':{'en':{'P2093':'Gerd Fahrenhorst','P4174':'Gerd Fahrenhorst'}}},'{'value':{'entity-type':'property','numeric-id':4174,'id':'P4174'},'type':'wikibase-entityid'}':{'text/html':{'en':{':'Wikimedia username</a>'}},'text/plain':{'en':{':'Wikimedia username'}}},'{'value':{'entity-type':'property','numeric-id':2699,'id':'P2699'},'type':'wikibase-entityid'}':{'text/html':{'en':{':'URL</a>'}},'text/plain':{'en':{':'URL'}}},'{'value':'http://commons.wikimedia.org/wiki/User:Gerd_Fahrenhorst','type':'string'}':{'text/html':{'en':{'P2699':'http://commons.wikimedia.org/wiki/User:Gerd_Fahrenhorst</a>'}},'text/plain':{'en':{'P2699':'http://commons.wikimedia.org/wiki/User:Gerd_Fahrenhorst'}}}}'>