#Tomtom home site how to
#Tomtom home site install
#Tomtom home site generator
#Tomtom home site update

However, the site would be a bit bleak if it were viewed right now. Note how all it takes to initialize a TomTom map is calling a function!ДЇinally, the return statement returns the HTML for the browser to display.ДЄt this stage, weвЂ™ve now successfully added a TomTom map to our Gatsby site. These configurations include our API key, the container parameter that takes the ID of the HTML element the map is to be embedded in, and the center parameter that centers the map around Amsterdam. The useEffect hook initiates a TomTom map on page load by calling the tt.map function with the necessary configurations.

#Tomtom home site update

Since we donвЂ™t want to lose this data, we wrap them in refs so that their value persists between component re-renders and you can update their values without a re-render. These variables are defined as refs and not regular JavaScript variables because in React the entire component is re-rendered whenever a variable is updated, leading to data loss in the component. We canвЂ™t render a TomTom map to a piece of ReactвЂ™s virtual DOM - we have to work with actual DOM elements, which can only be accessed through refs. This is necessary because React works with something called the virtual DOM, which is a virtual representation of the real DOM. The useRef hook defines the variables map and mapContainer, which stores references to our map and the DOM element itвЂ™s embedded within.

Remember to replace YOUR_API_KEY with the API key from your TomTom developer account. It also includes the longitude and latitude coordinates of Amsterdam in the Netherlands, our sample location, so the map can be centered around it. ThereвЂ™s quite a lot going on in the code above, so letвЂ™s break it down.ДЇirst, the variables API_KEY and AMSTERDAM store the value of the TomTom API key, which youвЂ™ll need to use the service. Inside the directory for your site, run this command (replacing name-of-your-project-here with your project name):

In this tutorial, weвЂ™ll use GatsbyвЂ™s official hello world starter. This premade template enables us to get started with development quickly. To create the Gatsby site, weвЂ™ll use a Gatsby starter template. Next, use the cd command to navigate to where you want to create your Gatsby site. It installs the CLI globally or updates your version to the most recent release.

#Tomtom home site install

To install the CLI, open up a terminal on your machine and run the following command. This will enable you to run the commands for developing Gatsby sites. To create a new Gatsby app, we need the Gatsby command-line interface (CLI) installed on your computer.

A developer account with TomTom and an API key to authorize your request to use the service.

To follow this tutorial, youвЂ™ll need to have:

#Tomtom home site how to

Finally, weвЂ™ll explore how to build routes to and from specific destinations that can be altered based on the type of goods being transported. WeвЂ™ll also see how to display data from an external source on the map. In this tutorial, weвЂ™ll demonstrate how to integrate TomTom maps into a Gatsby site using modern React practices like refs. Pairing the TomTom Maps SDK with Gatsby enables you to create optimized, interactive maps with ease.

#Tomtom home site generator

The TomTom Maps SDK integrates capably with many popular front-end frameworks - including Gatsby, an open-source static website generator that you can use to build progressive web apps that are secure and optimized for speed. TomTom enables you to integrate location-based features into your web applications through its software development kits (SDKs) and APIs with just a few lines of code and minimal development time. More platforms are starting to offer services that use location technology. These days, maps are an essential feature of many web applications.