{"id":3453,"date":"2021-10-05T00:50:33","date_gmt":"2021-10-05T00:50:33","guid":{"rendered":"https:\/\/contentlab.com\/fitness-mapping-with-the-strava-api-and-tomtom-maps\/"},"modified":"2022-06-14T19:52:46","modified_gmt":"2022-06-14T19:52:46","slug":"fitness-mapping-with-the-strava-api-and-tomtom-maps","status":"publish","type":"post","link":"https:\/\/contentlab.com\/fitness-mapping-with-the-strava-api-and-tomtom-maps\/","title":{"rendered":"Fitness Mapping with the Strava API and TomTom Maps"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3453\" class=\"elementor elementor-3453\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5f5abcbd elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"5f5abcbd\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6c11dd70\" data-id=\"6c11dd70\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-37c1730e elementor-widget elementor-widget-text-editor\" data-id=\"37c1730e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>The TomTom location APIs and Maps SDKs make it easy to incorporate location and routing information using a sophisticated map, where we can layer more information if we\u2019d like. This information can be incorporated into almost any app. When you combine the flexibility and ease of integration of TomTom technology with other data sources, you can do some interesting things.<\/p>\n<p>Strava is a popular service used by athletes to track running, biking, and other exercise. And the cool thing is, Strava provides an API that lets you use that workout information in your own apps.<\/p>\n<p>In this article, we\u2019re going to combine the TomTom Maps SDK for Web with the data provided by the Strava APIs. You\u2019ll need a (free) <a href=\"https:\/\/developer.tomtom.com\/user\/register\" target=\"_blank\" rel=\"noopener\">TomTom developer account<\/a> and a (free) <a href=\"https:\/\/www.strava.com\/register\/free\" target=\"_blank\" rel=\"noopener\">Strava account<\/a>.<\/p>\n<p>Additionally, you should download the Strava app for your phone and go for a walk or a bike ride so you have at least one activity to work with. Using this activity, we\u2019ll take route data and plot it using the TomTom SDK for Web. This will allow us to potentially use this activity information for even more purposes \u2013 giving a runner the ability to create a totally custom map visualization of their runs and include any information they would like, using advanced routing.<\/p>\n<h2>Setting Up the App<\/h2>\n<p>In this article, you\u2019re mainly going to use JavaScript. I\u2019m developing this on Windows, so some commands may vary for Mac and Linux systems, but overall shouldn\u2019t be too different.<\/p>\n<p>For starters, let\u2019s create a small Node.js back end. If you don\u2019t have it yet, <a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">install Node.js<\/a> and include npm (which is done by default).<\/p>\n<p>Create a folder somewhere on your computer, name it tomtomapp, and use the command prompt to browse to the folder.<\/p>\n<p>Now, use the npm init command to initialize npm, and keep all the defaults.<\/p>\n<p>Next, install Express by using the command:<\/p>\n<pre>npm install express -s<\/pre>\n<p>In your folder, create a file and name it index.js. Add the following code to it:<\/p>\n<pre>var express = require('express'); \nvar app = express(); \napp.get('\/map', function(req, res) { \n    res.send('This is the map page!'); \n}); \nvar server = app.listen(80, '127.0.0.1');<\/pre>\n<p>Next, go back to your command prompt and install nodemon using the command:<\/p>\n<pre>npm install nodemon -g<\/pre>\n<p>Once it\u2019s installed, run it by typing nodemon. This will start your Node.js app. Nodemon will watch your files and automatically restart when you change them. Now, browse to localhost\/map to see if your app works. If it does, you should see \u201cThis is the homepage!\u201d<\/p>\n<h2>Add the TomTom Maps SDK<\/h2>\n<p>Now, create a map.html page. You can copy-paste your first version from the TomTom tutorials, but I\u2019ll repeat it here:<\/p>\n<style> \n       #map { \n           width: 100vw; \n           height: 100vh; \n       } \n    <\/style>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d77564 elementor-widget elementor-widget-code-highlight\" data-id=\"8d77564\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><!DOCTYPE html> \n\n<html class='use-all-space'> \n\n<head> \n\n    <meta http-equiv='X-UA-Compatible' content='IE=Edge' \/> \n\n    <meta charset='UTF-8'> \n\n    <title>My Map<\/title> \n\n    <meta name='viewport' \n\n           content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'\/> \n\n    <link rel='stylesheet' type='text\/css' href='https:\/\/api.tomtom.com\/maps-sdk-for-web\/cdn\/5.x\/5.49.1\/maps\/maps.css'\/> \n\n    <style> \n\n       #map { \n\n           width: 100vw; \n\n           height: 100vh; \n\n       } \n\n    <\/style> \n\n<\/head> \n\n<body> \n\n    <div id='map' class='map'><\/div> \n\n    <script src='https:\/\/api.tomtom.com\/maps-sdk-for-web\/cdn\/5.x\/5.49.1\/maps\/maps-web.min.js'><\/script> \n\n    <script> \n\n        const tomtomKey = '<YOUR KEY>'; \n\n \n\n        \/\/ Initialize the map. \n\n        tt.setProductInfo('TomTom App', '1.0.0.0'); \n\n        const map = tt.map({ \n\n            key: tomtomKey, \n\n            container: 'map', \n\n            style: 'tomtom:\/\/vector\/1\/basic-main' \n\n        }); \n\n    <\/script> \n\n<\/body> \n\n<\/html> <\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a20492a elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"a20492a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f29febe\" data-id=\"f29febe\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3a7330d elementor-widget elementor-widget-text-editor\" data-id=\"3a7330d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">There are a few things to note here. You can find the different versions of the API on the <\/span><a style=\"font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); background-color: #ffffff; font-size: 1rem;\" href=\"https:\/\/developer.tomtom.com\/maps-sdk-web-js\/downloads\" target=\"_blank\" rel=\"noreferrer noopener\">TomTom Maps SDK for Web downloads<\/a><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\"> page. TomTom recommends linking to the CDN hosted version, as we&#8217;re doing here. The example uses version 5.49.1.<\/span><\/p>\n<p>You should replace with, well, your key. If you created an account on TomTom, you should find your key on your dashboard where you get an initial key, named My First API Key.<\/p>\n<p>While I\u2019m using the TomTom CDN to load the JavaScript and CSS files, you can also use npm to load them locally (<a href=\"https:\/\/www.npmjs.com\/package\/@tomtom-international\/web-sdk-maps\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.npmjs.com\/package\/@tomtom-international\/web-sdk-maps<\/a>).<\/p>\n<p>In your index.js file, require the path package and change the res.send line file to the following:<\/p>\n<pre>var path = require('path'); \napp.get('\/map', function(req, res) { \n    res.sendFile(path.join(__dirname, 'map.html')); \n});<\/pre>\n<p>If you now browse to localhost\/map again, you should see a map of the world.<\/p>\n<h2>Connecting to Strava<\/h2>\n<p>I\u2019m assuming you already have a Strava account. If you haven\u2019t already, go make a route. For this demo, I\u2019ve created a private route through the dunes near my house.<\/p>\n<p>Next, you should go into your Strava account and create an API Application. You need to give it the following information:<\/p>\n<ul>\n<li>A name (TomTom App)<\/li>\n<li>A website (https:\/\/localhost.com)<\/li>\n<li>An authorization callback domain (localhost)<\/li>\n<li>A logo (cook up something beautiful in Paint)<\/li>\n<li>The Strava API gives access to a user\u2019s profile, activities, routes, and other data.<\/li>\n<\/ul>\n<h2>Implementing OAuth2 Authentication for Strava<\/h2>\n<p>Strava works with OAuth2 for authentication with their API service. This works as follows:<\/p>\n<ul>\n<li>Your website asks users to log in at Strava, providing a redirect URI.<\/li>\n<li>Strava logs you in and redirects to the redirect URI with a code.<\/li>\n<li>The code can be used once to get an access token and a refresh token.<\/li>\n<li>The access token can be used to access the Strava API for several hours.<\/li>\n<li>Once the access token expires, you can use the refresh token to get a new one.<\/li>\n<\/ul>\n<p>Because I\u2019m keeping everything front-end, we don\u2019t have a session, cache, or database to store access and refresh tokens. The result is that you\u2019ll have to log into Strava every time to get a new code and do the OAuth2 thing again. For more information on Strava\u2019s OAuth2 process, see <a href=\"https:\/\/developers.strava.com\/docs\/authentication\/\" target=\"_blank\" rel=\"noreferrer noopener\">Authentication<\/a> in the Strava Developers documentation.<\/p>\n<p>First, you need a login page for your website. This is very easy. All you need is to get people to log in with Strava, so create an index.html and put the following code in it:<\/p>\n<pre><a href=\"https:\/\/www.strava.com\/oauth\/authorize?client_id=<YOUR CLIENT ID>&amp;response_type=code&amp;redirect_uri=http:\/\/localhost\/map&amp;approval_prompt=auto&amp;scope=read_all\">Login<\/a><\/pre>\n<p>Replace with your client ID, which can be found on your Strava API Application page.<\/p>\n<p>Furthermore, see the redirect_uri, which is set to localhost\/map, the page you just created. The scope is set to read_all, meaning you need permission to read all your data, including private data (that\u2019s because the route is set to private).<\/p>\n<p>The approval_prompt can be set to auto or forced, meaning Strava can redirect you automatically if you already gave permission. That last part doesn\u2019t seem to work for scope read_all and localhost though, so you\u2019re always getting the login prompt.<\/p>\n<p>In your index.js, add another route to the index page:<\/p>\n<pre>app.get(['\/', '\/index'], function(req, res) { \n    res.sendFile(path.join(__dirname, 'index.html')); \n});<\/pre>\n<p>If you now browse to localhost, you should see the Login link, which takes you to the Strava login and authorization page, which then returns you to your map page with a code in the URL.<\/p>\n<h2>Accessing the Strava API<\/h2>\n<p>You can now use the code in your JavaScript on the map.html page. You need to:<\/p>\n<ul>\n<li>Request the access code<\/li>\n<li>Request the route information<\/li>\n<li>Make some calls to the TomTom API<\/li>\n<\/ul>\n<p>This can result in some JavaScript callback confusion, so the first thing you should do is create a helper method to wrap the XMLHttpRequest in a Promise object so you can use it instead:<\/p>\n<pre>function makeRequest(url, options) { \n    options = options || {}; \n    const request = new XMLHttpRequest(); \n    return new Promise(function (resolve, reject) { \n        request.onreadystatechange = function () { \n            if (request.readyState !== 4) { \n                return; \n            }  \n            if (request.status &gt;= 200 &amp;&amp; request.status &lt; 300) { \n                resolve(request.response, request); \n            } else { \n                reject({ \n                    status: request.status, \n                    statusText: request.statusText \n                }); \n            } \n        }; \n        request.open(options.method || 'GET', url, true); \n        const headers = options.headers; \n        if (headers) { \n            for (var header in headers) { \n                if (Object.prototype.hasOwnProperty.call(headers, header)) { \n                    request.setRequestHeader(header, headers[header]); \n                } \n            } \n        } \n        if (options.data) { \n            request.setRequestHeader('Content-Type', 'application\/json'); \n            request.send(JSON.stringify(options.data)); \n        } else { \n            request.send(); \n        } \n    }); \n}<\/pre>\n<p>Usage is straightforward. You\u2019re first going to request the access token:<\/p>\n<pre>makeRequest(\"https:\/\/www.strava.com\/oauth\/token\", { \n        method: 'POST', \n        data: { \n            client_id: '', \n            client_secret: '', \n            code: code, \n            grant_type: 'authorization_code' \n        } \n    }) \n    .then(function (response) { \n        \/\/ Use our access token to get the logged in users routes. \n    }) \n    .then(function (response) { \n        \/\/ Process the GPX data. \n    }); \n    .catch(function (error) { \n        console.error(error); \n    });<\/pre>\n<p>Again, replace and with your API details. can be found on the Strava API Application page.<\/p>\n<p>The makeRequest helper method converts the data to JSON for you. Because you can chain with it and catch your code, you won&#8217;t have problems with callbacks and it&#8217;s more readable.<\/p>\n<h2>Requesting Route Info<\/h2>\n<p>The next step is to get route information. The oauth\/token request returns the access token as well as athlete information. To get the logged-in users\u2019 routes, you need a call to athletes\/{id}\/routes. For this demo, take the first route and request the GPX (GPs eXchange format) data, which is a common GPS data format:<\/p>\n<pre>\/\/ Use our access token to get the logged in users routes. \nconst data = JSON.parse(response); \nconsole.log(data); \nreturn makeRequest(`https:\/\/www.strava.com\/api\/v3\/athletes\/${data.athlete.id}\/routes`, { \n    headers: { \n        'Authorization': Bearer ${data.access_token} \n    } \n}) \n.then(function (response) { \n    \/\/ Get the details of the first route. \n    const firstRoute = JSON.parse(response)[0]; \n    return makeRequest(`https:\/\/www.strava.com\/api\/v3\/routes\/${firstRoute.id}\/export_gpx`, { \n        headers: { \n            'Authorization': Bearer ${data.access_token} \n        } \n    }); \n});<\/pre>\n<p>GPX is an XML format. JavaScript really doesn\u2019t handle XML very well \u2014 JSON is the native data format for JavaScript \u2014 so you need to somehow parse the XML to plain JavaScript objects.<\/p>\n<p>For more information on the Strava API, see the API and SDK reference at <a href=\"http:\/\/developers.strava.com\/docs\/reference\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/developers.strava.com\/docs\/reference\/<\/a>.<\/p>\n<p>Here\u2019s a small, naive helper method that parses the XML to a JavaScript object:<\/p>\n<pre>function parseDom (dom) { \n    return parseNode(dom.documentElement, {}); \n} \nfunction parseNode(node, obj) { \n    if (node.children.length === 0) { \n        obj[node.nodeName] = node.textContent; \n    } else if (node.nodeName !== 'trkseg') { \n        let count = 0; \n        const len = node.children.length; \n        const newObj = {}; \n        for (count; count &lt; len; count += 1) { \n            obj[node.nodeName] = parseNode(node.children[count], newObj); \n        } \n    } else { \n        \/\/ trkseg node. \n        let count = 0; \n        const len = node.children.length; \n        let arr = []; \n        for (count; count &lt; len; count += 1) { \n            const trkptNode = node.children[count]; \n            const trkpt = {}; \n            let attrCount = 0; \n            const attrLen = trkptNode.attributes.length; \n            for (attrCount; attrCount &lt; attrLen; attrCount += 1) { \n                trkpt[trkptNode.attributes[attrCount].nodeName] = trkptNode.attributes[attrCount].textContent; \n            } \n            arr.push(parseNode(trkptNode.children[0], trkpt)); \n        } \n        obj[node.nodeName] = arr; \n    } \n    return obj; \n}<\/pre>\n<p>This works for the specific GPX request. All XML elements have child elements with either other child elements or text values. The trkseg element is an exception. It has child elements, but it\u2019s a collection. Furthermore, the trkpt elements inside the trkseg element have lon and lat attributes instead of elements. This whole exercise is basically to get those lon and lat (longitude and latitude) attributes.<\/p>\n<h2>Working with the TomTom Maps SDK<\/h2>\n<p>Now that you can convert the GPX data to objects, you can put them on the map.<\/p>\n<p>First, here\u2019s a little helper function that returns the style of the route you\u2019re going to draw:<\/p>\n<pre>function buildStyle(id, data, color, width) { \n    return { \n        id: id, \n        type: 'line', \n        source: { \n            type: 'geojson', \n            data: data \n        }, \n        paint: { \n            'line-color': color, \n            'line-width': width \n        }, \n        layout: { \n            'line-cap': 'round', \n            'line-join': 'round' \n        } \n    }; \n}<\/pre>\n<p>You can now parse the GPX data and use it to create an array of longitude and latitude values, [[lon, lat], [lon, lat]\u2026]. Using this, you can create a GeoJSON object, which is another standard for representing simple geographical features. It&#8217;s basically a JSON object optimized for geographical data.<\/p>\n<p>Then, using the map.addLayer function and the buildStyle function, you draw a line on your map. You call it twice to draw a border around your route. Finally, you zoom and set the center of the map to the first coordinate so your route is visible.<\/p>\n<pre>\/\/ Process the GPX data.                 \nconst dom = new DOMParser().parseFromString(response, \"application\/xml\"); \nconst jsResponse = parseDom(dom); \nconst lngLats = jsResponse.gpx.trk.trkseg.map(seg =&gt; { \n    return [+seg.lon, +seg.lat]; \n}); \nconst routeGeoJson = { \n    \"type\": \"Feature\", \n    \"geometry\": { \n        \"type\": \"LineString\", \n        \"coordinates\": lngLats \n    } \n}; \nmap.addLayer(buildStyle('1', routeGeoJson, 'black', 6)) \n   .addLayer(buildStyle('2', routeGeoJson, 'blue', 4)); \nmap.setZoom(15); \nmap.setCenter(lngLats[0]);<\/pre>\n<p>For me, this draws a nice line in the dunes.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/index-300x145.png\" alt=\"\" width=\"300\" height=\"145\"><\/p>\n<p>This looks good, but there\u2019s more you can do.<\/p>\n<h2>Drawing Markers<\/h2>\n<p>Since my route finishes where it starts, it\u2019s a closed circle and I can\u2019t see where it starts and ends. So let\u2019s place a marker at the start. This is easy with the TomTom Maps SDK:<\/p>\n<pre>new tt.Marker().setLngLat(lngLats[0]).addTo(map);<\/pre>\n<p>And the result is an arrow marker at the start.<\/p>\n<p>Let\u2019s customize the marker so that it shows a walking figure instead. For this, use Font Awesome in your HTML:<\/p>\n<pre><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;\">&lt;link <\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-position: left bottom; background-image: var(--urlSpellingErrorV2,); border-bottom: 1px solid transparent;\">rel<\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;\">=\"stylesheet\" <\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-position: left bottom; background-image: var(--urlSpellingErrorV2,); border-bottom: 1px solid transparent;\">href<\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;\">=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.13.0\/<\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-position: left bottom; background-image: var(--urlSpellingErrorV2,); border-bottom: 1px solid transparent;\">css<\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;\">\/all.min.css\" integrity=\"sha256-h20CPZ0QyXlBuAw7A+KluUYx\/3pK+c7lYEpqLTlxjYQ=\" <\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-position: left bottom; background-image: var(--urlSpellingErrorV2,); border-bottom: 1px solid transparent;\">crossorigin<\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;\">=\"anonymous\" \/&gt;<\/span><span style=\"background-color: transparent; font-weight: var( --e-global-typography-text-font-weight ); margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; font-size: 11.5pt; line-height: 28.8px; font-family: 'Courier New', 'Courier New_EmbeddedFont', 'Courier New_MSFontService', monospace; color: #2b2b2b;\" data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:360,&quot;335559740&quot;:384}\">&nbsp;<\/span><\/pre>\n<div style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; overflow: visible; cursor: text; clear: both; position: relative; direction: ltr; color: #000000; font-family: 'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif; font-size: 12px;\">\n<p style=\"margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; white-space: pre-wrap; vertical-align: baseline; font-kerning: none; background-color: transparent; color: windowtext;\"><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; font-size: 11.5pt; line-height: 20.7px; font-family: 'Courier New', 'Courier New_EmbeddedFont', 'Courier New_MSFontService', monospace; color: #2b2b2b;\" data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559740&quot;:276}\">&nbsp;<\/span><\/p>\n<\/div>\n<div style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; overflow: visible; cursor: text; clear: both; position: relative; direction: ltr; color: #000000; font-family: 'Segoe UI', 'Segoe UI Web', Arial, Verdana, sans-serif; font-size: 12px;\">\n<p style=\"margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; white-space: pre-wrap; vertical-align: baseline; font-kerning: none; background-color: transparent; color: windowtext;\"><span lang=\"EN\" style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; font-variant-ligatures: none !important; color: #2b2b2b; font-size: 11.5pt; line-height: 28.8px; font-family: 'Courier New', 'Courier New_EmbeddedFont', 'Courier New_MSFontService', monospace;\" xml:lang=\"EN\" data-contrast=\"none\"><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;\">&lt;script <\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-position: left bottom; background-image: var(--urlSpellingErrorV2,); border-bottom: 1px solid transparent;\">src<\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;\">=&#8221;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.13.0\/<\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-position: left bottom; background-image: var(--urlSpellingErrorV2,); border-bottom: 1px solid transparent;\">js<\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;\">\/all.min.js&#8221; integrity=&#8221;sha256-KzZiKy0DWYsnwMF+X1DvQngQ2\/FxF7MF3Ff72XcpuPs=&#8221; <\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-position: left bottom; background-image: var(--urlSpellingErrorV2,); border-bottom: 1px solid transparent;\">crossorigin<\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;\">=&#8221;anonymous&#8221;&gt;&lt;\/script&gt;<\/span><\/span><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; font-size: 11.5pt; line-height: 28.8px; font-family: 'Courier New', 'Courier New_EmbeddedFont', 'Courier New_MSFontService', monospace; color: #2b2b2b;\" data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:360,&quot;335559740&quot;:384}\">&nbsp;<\/span><\/p>\n<p style=\"margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; white-space: pre-wrap; vertical-align: baseline; font-kerning: none; background-color: transparent; color: windowtext;\"><span style=\"margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; font-size: 11.5pt; line-height: 28.8px; font-family: 'Courier New', 'Courier New_EmbeddedFont', 'Courier New_MSFontService', monospace; color: #2b2b2b;\" data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:360,&quot;335559740&quot;:384}\">&nbsp;<\/span><\/p>\n<\/div>\n<p>Next, you need to create an HTMLElement that you can pass to the markers constructor:<\/p>\n<pre>const divElem = document.createElement('div'); \nconst divClassAttr = document.createAttribute('class'); \ndivClassAttr.value = 'fa-3x'; \ndivElem.setAttributeNode(divClassAttr); \nconst iconElem = document.createElement('i'); \nconst iconClassAttr = document.createAttribute('class'); \niconClassAttr.value = 'fas fa-walking'; \niconElem.setAttributeNode(iconClassAttr); \ndivElem.appendChild(iconElem);                 \nnew tt.Marker(divElem).setLngLat(lngLats[0]).addTo(map); \n<\/pre>\n<p>Last, you need to associate a popup with your marker:<\/p>\n<pre>var marker = new tt.Marker(divElem).setLngLat(lngLats[0]).addTo(map); \nvar popupOffsets = { \n    bottom: [0, -50], \n}; \nvar popupHtml = '<\/pre>\n<div><i><\/i>GO!<\/div>\n<p>&#8216;; var popup = new tt.Popup({offset: popupOffsets}) .setHTML(popupHtml); marker.setPopup(popup).togglePopup();<\/p>\n<p>The marker looks pretty awesome now.<\/p>\n<h2>Next Steps (or Runs, or Bikes\u2026)<\/h2>\n<p>In just a short time, you were able to get your Strava data and display it in TomTom Maps with relative ease.<\/p>\n<p>There\u2019s lots more you can do with the TomTom Maps SDK and the individual TomTom APIs. For a complete reference on the TomTom Maps SDK, see the reference guide at <a href=\"https:\/\/developer.tomtom.com\/maps-sdk-web-js\/documentation\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.tomtom.com\/maps-sdk-web-js\/documentation<\/a>. The SDKs are also available for Android and iOS, so whether you\u2019re building a web or mobile app, you can start integrating TomTom maps today.<\/p>\n<p><em>This article was originally published on <a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps\">TomTom&#8217;s blog<\/a><\/em>.<\/p>\n<p><style>\n       #map {<br \/>           width: 100vw;<br \/>           height: 100vh;<br \/>       }<br \/>    <\/style>\n<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The TomTom location APIs and Maps SDKs make it easy to incorporate location and routing information using a sophisticated map, where we can layer more information if we\u2019d like. This information can be incorporated into almost any app. When you combine the flexibility and ease of integration of TomTom technology with other data sources, you [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":4913,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[18,279,240],"tags":[273,272,270,271],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Fitness Mapping with the Strava API and TomTom Maps &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fitness Mapping with the Strava API and TomTom Maps &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"The TomTom location APIs and Maps SDKs make it easy to incorporate location and routing information using a sophisticated map, where we can layer more information if we\u2019d like. This information can be incorporated into almost any app. When you combine the flexibility and ease of integration of TomTom technology with other data sources, you [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-05T00:50:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-14T19:52:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/Untitled-design-46.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/fitness-mapping-with-the-strava-api-and-tomtom-maps\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Fitness Mapping with the Strava API and TomTom Maps\",\"datePublished\":\"2021-10-05T00:50:33+00:00\",\"dateModified\":\"2022-06-14T19:52:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/fitness-mapping-with-the-strava-api-and-tomtom-maps\/\"},\"wordCount\":1745,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/Untitled-design-46.png\",\"keywords\":[\"HTML\",\"JavaScript\",\"Mapping\",\"Node.js\"],\"articleSection\":[\"Portfolio\",\"Technical Overview\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/fitness-mapping-with-the-strava-api-and-tomtom-maps\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps\",\"name\":\"Fitness Mapping with the Strava API and TomTom Maps &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/Untitled-design-46.png\",\"datePublished\":\"2021-10-05T00:50:33+00:00\",\"dateModified\":\"2022-06-14T19:52:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/Untitled-design-46.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/Untitled-design-46.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fitness Mapping with the Strava API and TomTom Maps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fitness Mapping with the Strava API and TomTom Maps &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps","og_locale":"en_US","og_type":"article","og_title":"Fitness Mapping with the Strava API and TomTom Maps &#183; Technical Content Marketing | ContentLab","og_description":"The TomTom location APIs and Maps SDKs make it easy to incorporate location and routing information using a sophisticated map, where we can layer more information if we\u2019d like. This information can be incorporated into almost any app. When you combine the flexibility and ease of integration of TomTom technology with other data sources, you [&hellip;]","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2021-10-05T00:50:33+00:00","article_modified_time":"2022-06-14T19:52:46+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/Untitled-design-46.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#article","isPartOf":{"@id":"https:\/\/contentlab.com\/fitness-mapping-with-the-strava-api-and-tomtom-maps\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Fitness Mapping with the Strava API and TomTom Maps","datePublished":"2021-10-05T00:50:33+00:00","dateModified":"2022-06-14T19:52:46+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/fitness-mapping-with-the-strava-api-and-tomtom-maps\/"},"wordCount":1745,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/Untitled-design-46.png","keywords":["HTML","JavaScript","Mapping","Node.js"],"articleSection":["Portfolio","Technical Overview","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/fitness-mapping-with-the-strava-api-and-tomtom-maps\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps","name":"Fitness Mapping with the Strava API and TomTom Maps &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/Untitled-design-46.png","datePublished":"2021-10-05T00:50:33+00:00","dateModified":"2022-06-14T19:52:46+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/Untitled-design-46.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/Untitled-design-46.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/fitness-mapping-strava-api-and-tomtom-maps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Fitness Mapping with the Strava API and TomTom Maps"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/Untitled-design-46.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3453"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=3453"}],"version-history":[{"count":25,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3453\/revisions"}],"predecessor-version":[{"id":10161,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3453\/revisions\/10161"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/4913"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=3453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=3453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=3453"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=3453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}