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

Turf.js integration

Purpose

This tutorial shows you how to integrate TomTom Maps SDK for Web with Turf.js and use some of its features. Turf.js. is an open source library for geospatial analysis. With this tutorial you can:

  • Learn how to display a well-defined and limited area (in our example: Amsterdam) on the map.
  • Learn how to calculate polygon’s area in square kilometers with Turf.js.
  • Find out how to check if some points are located within or outside of the area (polygon) with Turf.js.

1. Prerequisites

To start using the TomTom Maps SDK for Web, you need the following:

  • API key

    Create your API key now

    To create a new API key you need to first register on the portal. Once you are logged in there are only two steps remaining:

    Create a new application in your Dashboard:

    Choose all the APIs:

    All set up. You can now click on your newly created app and copy your API key:

  • Coordinates

    How to find your company location coordinates?

    The simplest way for obtaining these coordinates is to go to api_explorer. First, click on Fuzzy Search and then on a Try it out button. Let's assume your company address is: '100 Century Center Ct 210, San Jose, CA 95112, USA'. You have to place it in a query field and clear other pre-populated fields, then scroll down and press the Execute button. Please take into account that you should not use special HTML characters (like '$','?',&','#') in address. In the response you can find section and there you can see that the very first item from the list of items matched your query. Look at the property below address fields. There you can see the data you need:

    <position>
        <lat>37.36729</lat>
        <lon>-121.91595</lon>
    </position>
  • Turf.js

    Add Turf.js to your project

    You can follow the Turf.js Getting started instructions. There are a few different ways to add the library to your project. In this tutorial, Turf.js is loaded via a script tag.

    1. Add the following script tag to the
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script> 
    

2. Displaying the map

To display a map, use the following HTML5 code:

  
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>TomTom Web SDK plus TURF</title>
      <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/maps/maps.css'>
      <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/maps/maps-web.min.js"></script>
      <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/services/services-web.min.js"></script>
      <link rel='stylesheet' type='text/css' href='style.css' />
      <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
    </head>
    
    <body>
      <div id='map'></div>
      <script src='app.js'></script>
    </body>
    
    </html>
  
  

Create file app.js with following code:

  
    var apiKey = 'YOUR_API_KEY';
    var map = tt.map({
      key: apiKey,
      container: 'map',
      center: [4.899431, 52.379189],
      style: 'tomtom://vector/1/basic-main',
      zoom: 10
    });
  
  

All javascript code should be added to this file.

Create style.css file with following code:

  
    body {
      margin: 0;
    }
    #map {
      height: 100vh;
      width: 100vw;
    }
  
  

3. Displaying a polygon on the map

Let's assume you offer your service only in the city area, in this example in Amsterdam. The application displays city area and its borders.

To display city boundaries, you need to retrieve a polygon from Additional Data Service. Before that you need to get geometry.id of that city by querying Fuzzy Search endpoint.

To implement this, perform the following steps:

You can find more information about the fuzzySearch method and indexes values at: Fuzzy Search.
  
    var SEARCH_QUERY = 'Amsterdam';
  
    function findGeometry() {
      tt.services.fuzzySearch({
          key: apiKey,
          query: SEARCH_QUERY
        })
        .go()
        .then(getAdditionalData);
    }
  
  

Here is the code which executes findGeometry function:

findGeometry();
  1. Create a function called findGeometry and declare a SEARCH_QUERY variable.
  2. Use the tt.services.fuzzySearch method to get the geometry.id.

    To limit indexes utilized for the search to Geographies, set the idxSet parameter to Geo.

  3. Create the getAdditionalData function. Inside call the additionalData method and obtain requested geometries. Pass them for further processing to another function called processAditionalDataResponse.
          
            function getAdditionalData(fuzzySearchResults) {
              var geometryId = fuzzySearchResults.results[0].dataSources.geometry.id;
              tt.services.additionalData({
                key: apiKey,
                geometries: [geometryId],
                  geometriesZoom: 12
                })
                .go()
                .then(processAdditionalDataResponse);
            }
          
          
  4. To display a polygon on the map, create a new GeoJSON layer using previously obtained geometryData and add it to the map. See the following code:
          
            function buildLayer(id, data) {
              return {
                'id': id,
                'type': 'fill',
                'source': {
                    'type': 'geojson',
                    'data': {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Polygon',
                            'coordinates': data
                        }
                    }
                },
                'layout': {},
                'paint': {
                    'fill-color': '#2FAAFF',
                    'fill-opacity': 0.8,
                    'fill-outline-color': 'black'
                }
              }
            }
    
            function displayPolygonOnTheMap(additionalDataResult) {
              var geometryData = additionalDataResult.geometryData.features[0].geometry.coordinates[0];
              map.addLayer(buildLayer('fill_shape_id', geometryData));	
              return geometryData;
            }
          
          
  5. Create the processAditionalDataResponse function and execute displayPolygonOnTheMap function inside.
    
      function processAdditionalDataResponse(additionalDataResponse) {
        if (additionalDataResponse.additionalData && additionalDataResponse.additionalData.length) {
          var geometryData = displayPolygonOnTheMap(additionalDataResponse.additionalData[0]);
        }
      }
    
    

4. Calculate and display the polygon area with Turf.js

To calculate the area of your polygon, use the Turf.js area method.

  1. Create the function called calculateTurfArea.
    • Pass geometryData as an argument, as previously defined in the getGeometry function.
    • According to Turf.js, this method returns the area of the polygon in square meters.
    • Convert it to square kilometers to make it more readable. See the following code:
      
        function calculateTurfArea(geometryData) {
          var turfPolygon = turf.polygon(geometryData);
          var areaInMeters = turf.area(turfPolygon);
          var areaInKilometers = turf.round(turf.convertArea(areaInMeters, 'meters', 'kilometers'),2); 
        }
      
      
  2. To display the polygon area information, create a polygon-info-box HTML element inside the  div with 'id' map.
          
            <div id="polygon-info-box">
            <label>Area of the polygon:</label>
            <div>
              <span id="area-info"> - </span><span>km<sup>2</sup></span>
            </div>
          
          
  3. In the calculateTurfArea function created before, set the content of areaInfo element to areaInKilometers value by using an innerText property.
          
            function calculateTurfArea(geometryData) {
              var turfPolygon = turf.polygon(geometryData);
              var areaInMeters = turf.area(turfPolygon);
              var areaInKilometers = turf.round(turf.convertArea(areaInMeters, 'meters', 'kilometers'),2); 
              var areaInfo = document.getElementById('area-info');
              areaInfo.innerText = areaInKilometers;
            }
          
          
  4. Add styling to your polygon-info-box element in style.css file:
          
            #polygon-info-box {
              font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
              position: fixed;
              top: 10px;
              right: 10px;
              padding: 10px;
              margin: 10px;
              z-index: 1100;
              background-color: white;
              box-shadow: rgba(0, 0, 0, 0.45) 2px 2px 2px 0px;
            }
            
            #polygon-info-box label {
              font-size: 1.3em;
              font-weight: bold;
              line-height: 2;
            }
            
            #polygon-info-box span {
              font-size: 1.2em;
            }
            
            #polygon-info-box {
              text-align: right;
            }
          
          
  5. Add the calculateTurfArea function execution inside of the processAdditionalDataResponse function:
          
            function processAdditionalDataResponse(additionalDataResponse) {
              if (additionalDataResponse.additionalData && additionalDataResponse.additionalData.length) {
                var geometryData = displayPolygonOnTheMap(additionalDataResponse.additionalData[0]);
                calculateTurfArea(geometryData);
              }
            }
          
          

5. Finding points located within a polygon using Turf.js

  1. Define the markerCoordinates array with points, some of them from the inside and some from the outside of the polygon:
          
            var markerCoordinates = [
            [4.899431, 52.379189],
            [4.8255823, 52.3734312],
            [4.7483138, 52.4022803],
            [4.797049, 52.435065],
            [4.885911, 52.320235]
          ];
          
          
  2. Now, create a drawPointsInsideAndOutsideOfPolygon function and use a pointsWithinPolygon method from the turf library:
          
            function drawPointsInsideAndOutsideOfPolygon(geometryData) {
              var customInsidePolygonMarkerIcon = 'img/inside_marker.png';
              var customOutsideMarkerIcon = 'img/outside_marker.png';
              var turfPolygon = turf.polygon(geometryData);
              var points = turf.points(markerCoordinates);
              var pointsWithinPolygon = turf.pointsWithinPolygon(points, turfPolygon);
              markerCoordinates.forEach(function (markerCoordinate) {
                const markerElement = document.createElement('div');
                markerElement.innerHTML = createMarkerElementInnerHTML(customOutsideMarkerIcon);
                pointsWithinPolygon.features.forEach(function (pointWithinPolygon) {
                  if (markerCoordinate[0] === pointWithinPolygon.geometry.coordinates[0] &&
                    markerCoordinate[1] === pointWithinPolygon.geometry.coordinates[1]) {
                      markerElement.innerHTML = createMarkerElementInnerHTML(customInsidePolygonMarkerIcon);
                  }
                });
                var marker = new tt.Marker({ element: markerElement}).setLngLat(markerCoordinate);
                marker.addTo(map);
              });
            }
          
          
  3. Execute the drawPointsInsideAndOutsideOfPolygon function inside of the processAdditionalDataResponse function:
          
            function processAdditionalDataResponse(additionalDataResponse) {
              if (additionalDataResponse.additionalData && additionalDataResponse.additionalData.length) {
                var geometryData = displayPolygonOnTheMap(additionalDataResponse.additionalData[0]);
                calculateTurfArea(geometryData);
                drawPointsInsideAndOutsideOfPolygon(geometryData);
              }
            }
          
          

See the result!

Summary

From this tutorial you learned:

  • How to show a polygon on a map.
  • How to calculate and show its area using Turf.js.
  • How to show points located within and outside of a polygon using Turf.js.

You can find source code here: GitHub.

You are here