Displaying TomTom Maps with DevExpress

You may have heard of or used user interface (UI) component libraries if you work with client-side frameworks like React, Vue, or Angular. DevExpress offers a suite of JavaScript UI components for frameworks like React, Vue, and Angular, called DevExtreme, for use in web and mobile applications. DevExtreme gives developers pre-built components, widgets, and controls that we can use to add new features to our applications.
This tutorial looks at how to include a TomTom map in a React app built using the DevExtreme UI Components library.
So, what do you need to continue with this tutorial? You should be familiar with React to get the most out of what we cover in this tutorial.
Getting Started
We can add DevExtreme to an existing React application project, or we can use it to create a new React application using the DevExtreme CLI. To install the DevExtreme CLI, open your terminal and run the following command:
npm i -g devextreme-cli
Run the code below to create a new DevExtreme React app once you have installed DevExtreme globally:
devextreme new react-app app-name --layout=side-nav-inner-toolbar
Once you have created your app and installed all dependencies, make app-name your current directory:
cd app-name
Finally, use the following command to start the development server:
npm start
If everything goes well, you should have a simple app like the one below:
Creating the Map
We need our API key to add TomTom’s map to our application. If you don’t already have an account with TomTom, register one.
Once you have an account, log in to it. Copy the API key on the dashboard. We’ll come back to it later.
Now we must install the TomTom web SDK to use TomTom’s map with React.
In the application’s src directory, you find a directory named Components, and as the name indicates, that’s where we’ll add our components. Create a new file called Map.js in that directory.
To create the map, we’ll import the TomTom Maps SDK we previously installed and add the following code to the Map.js file that we just created.
import tt from "@tomtom-international/web-sdk-maps";import @tomtom-international/web-sdk-maps/dist/maps.css;
Above, we imported the basic Maps SDK and the cascading style sheet (CSS) used to style our map. Let’s add our API key next.
1...2import { useEffect, useState, useRef } from "react";34function Map() {5 const mapElement = useRef();6 const [map, setMap] = useState(null);7 const api_key = "xxxxxxxxxxxxxxxxxxxxxxxxx";8 const center = [-118.196271, 33.8388368];910 useEffect(() => {11 let map = tt.map({12 key: api_key,13 container: mapElement.current,14 center: center, //4600 N Virginia Rd15 zoom: 11,16 });17 map.addControl(new tt.FullscreenControl());18 map.addControl(new tt.NavigationControl());192021 setMap(map);22 return () => map.remove();23 }, []);2425 return <div ref={mapElement} className="mapDiv" />;26}2728export default Map;
We replaced the API key with the TomTom API key. We also selected a div element on the page using React’s useRef hook. This element is where we attach our map. We also added the JavaScript necessary to create the map. The complete code is now as follows:
1import "@tomtom-international/web-sdk-maps/dist/maps.css";2import tt from "@tomtom-international/web-sdk-maps";3import { useEffect, useState, useRef } from "react";45function Map() {6 const mapElement = useRef();7 const api_key = "xxxxxxxxxxxxxxxxxxxxxxx";8 const [map, setMap] = useState({});91011 const center = [-118.196271, 33.8388368];121314 useEffect(() => {15 let map = tt.map({16 key: api_key,17 container: mapElement.current,18 center: center, //4600 N Virginia Rd19 zoom: 11,20 });21 map.addControl(new tt.FullscreenControl());22 map.addControl(new tt.NavigationControl());2324 setMap(map);25 return () => map.remove();26 }, []);272829 return <div ref={mapElement} className="mapDiv" />;30}3132export default Map;
With the help of the TomTom Maps SDK we previously installed, the code above creates a map. However, we must still show this map on a page, which brings us to our next topic.
Creating the Contact Page
Looking at the React application we built using DevExtreme, you will see four pages created for us: an index page, a home page, a profile page, and a task page. To add a new page, we can use the DevExtreme CLI.
Run the following code in your terminal:
devextreme add view contact-page
Now, if you open the src/pages directory, you should see the newly created page. Let’s add the contact form by opening the contact-page.js file and adding the following code:
1import React from "react";2import "./contact-page.scss";3// import Form, Button from devextreme UI library4import { Form, ButtonItem, Item } from "devextreme-react/form";56export default () => (7 <React.Fragment>8 <h2 className={"content-block"}>Contact Us</h2>9 <div className={"content-block"}>10 <div className={"dx-card responsive-paddings"}>11 <address>12 <strong>Address</strong>13 <p>14 <cite>4600 N Virginia Rd.</cite>15 </p>16 </address>17 </div>18 </div>19 <div className={"content-block"}>20 <div className={"dx-card responsive-paddings flex"}>21// add the Form Component to the page22 <Form id="form">23// Input type text24 <Item25 editorType="dxTextBox"26 editorOptions={{ placeholder: "Enter your full name" }}27 label={{ location: "top", text: "Full Name" }}28 />29// Input type text30 <Item31 editorType="dxTextBox"32 editorOptions={{ placeholder: "Example@email.com" }}33 label={{ location: "top", text: "Email" }}34 isRequired35 />36// Input type number37 <Item38 editorType="dxNumberBox"39 editorOptions={{ placeholder: "Phone Number" }}40 label={{ location: "top", text: "Number" }}41 isRequired42 />43// Input type textarea44 <Item45 colSpan={2}46 editorType="dxTextArea"47 editorOptions={{ placeholder: "Add notes...", height: 140 }}48 />49// Input type button50 <ButtonItem51 horizontalAlignment="left"52 buttonOptions={{53 text: "Contact Me",54 type: "success",55 useSubmitBehavior: true,56 }}57 />58 </Form>59 </div>60 </div>61 </React.Fragment>62);
We updated our contact page with a simple contact form by using the DevExtreme Form UI component, and it now looks like the one below:
Adding the Map to Our Page
After we have created our contact form, we can now add our map so that users can easily find our company’s location. To do this, open the contact-page.js file and add the following code to import the map component we made previously.
1import React from "react";2import "./contact-page.scss";3import { Form, ButtonItem, Item } from "devextreme-react/form";4// import the map component5import Map from "../../components/Map";6789export default () => (10 <React.Fragment>11 ...12 </React.Fragment>13);
After we’ve imported our map, we can add it to the page right next to the contact form:
1import React from "react";2import "./contact-page.scss";3import { Form, ButtonItem, Item } from "devextreme-react/form";4// import the map component5import Map from "../../components/Map";67export default () => (8 <React.Fragment>9 <h2 className={"content-block"}>Contact Us</h2>10 <div className={"content-block"}>11 <div className={"dx-card responsive-paddings"}>12...13 </div>14 </div>15 <div className={"content-block"}>16 <div className={"dx-card responsive-paddings flex"}>17 <Form id="form">...18 </Form>19 <Map /> // Map Component20 </div>21 </div>22 </React.Fragment>23);
After we’ve included the map, the final preview of our contact page should look something like this:
Adding a Marker to Our Map
Finally, let’s add a marker to the map to indicate where our company is. To accomplish this, open the Map.js file and add the following code:
1import "@tomtom-international/web-sdk-maps/dist/maps.css";2import tt from "@tomtom-international/web-sdk-maps";3import { useEffect, useState, useRef } from "react";45function Map() {6 const mapElement = useRef();7 const api_key = "xxxxxxxxxxxxxxxxxxxxxxx";8 const [map, setMap] = useState({});910 ...11 useEffect(() => {12 if (map) {13 map.on("load", () => {14 const popup = new tt.Popup({ offset: 50 }).setText(15 "4600 N Virginia Rd."16 );1718 new tt.Marker({ anchor: "bottom" })19 .setLngLat(center)20 .setPopup(popup)21 .addTo(map);22 });23 }24 }, [map]);2526 return <div ref={mapElement} className="mapDiv" />;27}2829export default Map;
Let’s break this down a little bit. First, we created another useEffect, but this time we passed a dependency, initialized, which means our useEffect runs every time initialized is updated. And if initialized is set to true and our map is loaded using map.on("load", function()), we can add a new Marker with the following code:
1const popup = new tt.Popup({ offset: 50 }).setText(2 "4600 N Virginia Rd."3 );45 new tt.Marker({ anchor: "bottom" })6 .setLngLat(center)7 .setPopup(popup)8 .addTo(map);9 });
We can now see the exact position of our company on the map thanks to the addition of our marker.
Customizing the Map Component
Now that our Map component is ready, we can make some modifications, one of which is altering the Map style. TomTom Maps feature a variety of styles, including:
- basic_main
- basic_night
- hybrid_main
- labels_main
Please see TomTom’s Map Display API documentation for other map styles.
To apply this style to our map, open the Map.js file and make the following changes:
1useEffect(() => {2 let map = tt.map({3 key: api_key,4 container: mapElement.current,5 center: center, //4600 N Virginia Rd6 style: { map: "basic_night" }, // add the map style, set to night7 zoom: 11,8 });9 map.addControl(new tt.FullscreenControl());10 map.addControl(new tt.NavigationControl());111213 setMap(map);14 return () => map.remove();15 }, []);
Now that we have added the style, our map should resemble the one below, which has a dark theme and represents the “basic night” style that we have chosen.
Since the entire map is now dark, it would be a great idea to change the color of the black marker — let’s make it green. In the same Map.js file, make the following changes:
12 useEffect(() => {3 if (map) {4 map.on("load", () => {5 const popup = new tt.Popup({ offset: 50 }).setText(6 "4600 N Virginia Rd."7 );8910 new tt.Marker({11 anchor: "bottom",12 color: "#00bb00", // green color13 width: "50px", // specify new height of Marker14 height: "50px", // specify new width of Marker15 })16 .setLngLat(center)17 .setPopup(popup)18 .addTo(map);19 });20 }21 }, [map]);
Our marker now resembles the one below with the addition of the new color.
There are many other methods to customize TomTom Maps. To learn more, please refer to TomTom’s Map documentation.
Conclusion
In this article, we created a web application with React and the DevExpress UI library that displays a map using TomTom’s Maps Web SDK.
TomTom’s Map Display API works well with a variety of UI libraries. See the TomTom Map API documentation for more information on the TomTom Map Display API and how to incorporate it into your applications.