Using TomTom Maps with React Routing

Tutorial Overview

Prerequisites

  • A basic understanding of React. To get a basic understanding of integrating a map in React, check out this article. You must have Node.js installed on your system since you use the Node package manager to install different tools. If you’re familiar with Yarn, you can use it, but we won’t cover it in this tutorial.
  • A TomTom developer account. After signing up for this account, you’ll get an API key that you use for your app.Getting Started We start by creating and running a React app. Do this by executing the following command in your terminal:
1 npx create-react-app tomtom-map2 cd tomtom-map3 npm start
1.mapDiv{2  height: 100vh;3}

Installing and Adding the Dependencies

1import './App.css';23function App() {4  return (5    <div className="App">6    </div>7  );8}910export default App;
npm i @tomtom-international/web-sdk-maps @tomtom-international/web-sdk-servicesreact-router-dom
1import './App.css';2import '@tomtom-international/web-sdk-maps/dist/maps.css'3import mapSDK from '@tomtom-international/web-sdk-maps';4import mapServices from '@tomtom-international/web-sdk-services';5import { React, useState, useEffect, useRef } from 'react'6import {7  BrowserRouter as Router,8  Routes,9  Route,10  useParams11} from 'react-router-dom';

Setting the Map

1/*This maps a country name URL parameter in the search bar*/2export default function CountryNameHelper() {3  return (4    <Router>5      <div>6789        <Routes>10          <Route exact path="/:countryName" element={<App />} />11121314        </Routes>15161718      </div>19    </Router>20  );21}
1  //your API key2  const API_KEY = ''3  //getting the country's name from the URL4  let { countryName } = useParams();5  const mapContainer = useRef();6  //default coordinates7  const [countryLongitude, setCountryLongitude] = useState(-121.91599);8  const [countryLatitude, setCountryLatitude] = useState(37.36765);9  //use this to change the zoom level of the map10  const [zoomLevel, setZoomLevel] = useState(3);11  const [ourMap, setMap] = useState({});
1//fetching the coordinates for the typed country's administrative capital city2  mapServices.services.fuzzySearch({3    key: API_KEY,4    query: countryName5  }).then(getCoordinates);67  function getCoordinates(response) {8    console.log(response.results)9    let latitude = response.results[0]["position"]["lat"];1011    let longitude = response.results[0]["position"]["lng"];1213    setCountryLatitude(latitude)1415    setCountryLongitude(longitude)16  }
1useEffect(() => {23    let ourMap = mapSDK.map({4      key: API_KEY,5      container: mapContainer.current,6      center: [countryLongitude, countryLatitude],7      zoom: zoomLevel8    });9    setMap(ourMap);10    /*values to listen to*/11  }, [countryLongitude, countryLatitude]);
1let locationMarker = new mapSDK.Marker({2      draggable: false3    }).setLngLat([countryLongitude, countryLatitude]).addTo(ourMap);
return () => ourMap.remove();
1  useEffect(() => {23    let ourMap = mapSDK.map({4      key: API_KEY,5      container: mapContainer.current,6      center: [countryLongitude, countryLatitude],7      zoom: zoomLevel8    });9    setMap(ourMap);10    //setting the location marker to help easily identify the target*/11    let locationMarker = new mapSDK.Marker({12      draggable: false13    }).setLngLat([countryLongitude, countryLatitude]).addTo(ourMap);14151617    return () => ourMap.remove();18    /*values to listen to*/19  }, [countryLongitude, countryLatitude]);

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store