Sorry, you need to enable JavaScript to visit this website.

Migrating between raster and vector

Overview of the tutorial

In this tutorial you will learn how to migrate from raster maps to vector maps. You can also use this tutorial if you are migrating to a different version of the sdk as the steps are the same.

 

Prerequesites

  • Completed the Display raster map tutorial or have you your own web page using our sdk
  • API key
  • Npm and Node.js

 

Step 1. Download Maps Web SDK for Web with vector maps

Download the Maps SDK for Web with vector maps version you want to migrate to from https://developer.tomtom.com/maps-sdk/maps-sdk-downloads:

 

We always recommend using the latest version of our library.

If you are migrating to a different version of vector or raster please download the version you wish.

 

Step 2. Replace the SDK

Go to your project folder and remove all the content of the folder where you have the SDK files.

Extract the SDK version that you downloaded above to your sdk folder.

 

Step 3. Update your website

If you are migrating from raster to a different version of raster or  from vector to a different version of vector you don't need to do anything else.

 

3.1 Migrating from raster to vector maps

The main difference in the usage of vector maps are the additional properties passed to the map:

  • source - defines the base layer of the map
  • basePath - sdk base path, this is required for the additonal elements used on vector maps, like styles for example

 

This is how your html file should look like:

<!DOCTYPE html>
<html>
    <head>
        <title>My map</title>
        <link rel='stylesheet' type='text/css' href='sdk/map.css'/>
        <script src='sdk/tomtom.min.js'></script>
    </head>
    <body>
        <div id='map' style='height:500px;width:500px'></div>
        <script>
	    tomtom.setProductInfo('<your-product-name>', '<your-product-version>');
            tomtom.L.map('map', {
		    key: <your-api-key>,
                    source: 'vector',
                    basePath: '<your-tomtom-sdk-base-path>'
	    });
        </script>
    </body>
</html>

Now replace <your-api-key> with your api key and <your-tomtom-sdk-base-path> with the sdk base path in your project, in our case it would be /sdk (if you followed one of our Display raster map or Display vector map tutorials). 

For more information on the properties above please refer to the Maps Web SDK Documentation.

 

3.2 Downgrading to raster maps

If you are using vector maps and want to change to raster maps, in your html file change the source to raster and remove basePath

This is how your html file should look like:

<!DOCTYPE html>
<html>
    <head>
        <title>My map</title>
        <link rel='stylesheet' type='text/css' href='sdk/map.css'/>
        <script src='sdk/tomtom.min.js'></script>
    </head>
    <body>
        <div id='map' style='height:500px;width:500px'></div>
        <script>
	    tomtom.setProductInfo('<your-product-name>', '<your-product-version>');
            tomtom.L.map('map', {
		    key: <your-api-key>,
                    source: 'raster'
	    });
        </script>
    </body>
</html>

 

And that's it!

If you want to see more examples please refer to our Functional Examples page to see the code above in action!

 

You are here