{"id":2985,"date":"2020-01-16T14:54:40","date_gmt":"2020-01-16T14:54:40","guid":{"rendered":"https:\/\/contentlab.com\/using-geojson-geometry-data-to-draw-borders-with-tomtom-maps\/"},"modified":"2022-02-24T19:00:07","modified_gmt":"2022-02-24T19:00:07","slug":"using-geojson-geometry-data-to-draw-borders-with-tomtom-maps","status":"publish","type":"post","link":"https:\/\/contentlab.com\/using-geojson-geometry-data-to-draw-borders-with-tomtom-maps\/","title":{"rendered":"Using GeoJSON Geometry Data to Draw Borders with TomTom Maps"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2985\" class=\"elementor elementor-2985\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2cccac29 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"2cccac29\" 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-d4900bd\" data-id=\"d4900bd\" 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-aaaadad elementor-widget elementor-widget-text-editor\" data-id=\"aaaadad\" 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>Geographic Information System (GIS) data can come in a lot of forms, which can lead to confusion in how to represent data. For example, what would you call the borders of a certain county? Would you call it border, coordinates, or outline? Would you use longitude and latitude, or some other coordinate system, like distance from a given user? Mix that with the fact that there are multiple map APIs and other applications that will want to deal with geographical data, and you\u2019re likely to end up with a lot of unnecessary format-parsing code.<\/p><p>Fortunately, to solve this problem, a standard has emerged. Specifically, the standard we will be talking about today is<a href=\"https:\/\/geojson.org\/\">\u00a0GeoJSON<\/a>. GeoJSON is a standard that was initially created in 2008 by the Internet Engineering Task Force, which is a volunteer-staffed, non-profit, open standards operation, with the most recent version,<a href=\"https:\/\/tools.ietf.org\/html\/rfc7946\">\u00a0RFC 7946<\/a>, being made in 2016.<\/p><p>In this article we\u2019ll look at the GeoJSON format, then use a GeoJSON data set to draw regional borders on a map with TomTom JavaScript Maps SDK for Web.<\/p><h2>Project Setup<\/h2><p>Today, we\u2019ll be learning how to leverage GeoJSON to display new boundaries on a map. Specifically, we\u2019ll be using the<a href=\"https:\/\/developer.tomtom.com\/maps-sdk-web-js\">TomTom JavaScript Map SDK for Web<\/a>\u00a0to create a map and draw layers on it to highlight county regions, which are defined by a GeoJSON dataset.<\/p><p>To do this, we\u2019ll need:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Some GeoJSON coordinates to draw on a map<\/li><li style=\"font-size: 16px;\">TomTom API, to display the map<\/li><li style=\"font-size: 16px;\">HTTP-Server, to host the web app<br \/><br \/><\/li><\/ul><p>For the GeoJSON, we\u2019ll just grab some coordinates from GitHub. This file on\u00a0<a href=\"https:\/\/gist.githubusercontent.com\/pdbartsch\/4a4ad6c68ab75d597610\/raw\/4adc6d41320d06e42a43e4075106932ca7b44cd5\/ca_counties.geojson\">GitHub<\/a>\u00a0provides the raw GeoJSON data from Paul Bartsch&#8217;s\u00a0<a href=\"https:\/\/gist.github.com\/pdbartsch\/4a4ad6c68ab75d597610\">ca_counties.geojson<\/a>\u00a0gist. These coordinates point to the counties of California. There\u2019s also other data in the dataset to follow the GeoJSON standards, but all we need are the coordinates of the counties. Download and save the data as script.js. We will convert the GeoJSON to\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0we can use later.<\/p><p>To get started, you need the latest version of\u00a0<a href=\"https:\/\/developer.tomtom.com\/maps-sdk-web-js\/downloads\">TomTom JavaScript Map SDK for Web<\/a>. Extract the SDK to a folder called sdk in the same directory as where you\u2019ll keep a simple index.html.<\/p><p>Once you have TomTom SDK, make sure you have a valid TomTom API Key, which requires you to register an account\u00a0<a href=\"https:\/\/developer.tomtom.com\/user\/register\">here<\/a>.<\/p><p>Finally, you need an HTTP-Server to run your web app, which can be obtained via\u00a0<a href=\"https:\/\/nodejs.org\/en\/download\/\">Node and NPM<\/a>. (As of the time of writing, there is a bug with using the most recent version of HTTP-Server to host a web app, if you\u2019re getting corrupt connection error, try running the following command to install an older version.)<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f06fd2 elementor-widget elementor-widget-code-highlight\" data-id=\"8f06fd2\" 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>npm install -g http-server@0.9.0<\/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<div class=\"elementor-element elementor-element-184403b elementor-widget elementor-widget-text-editor\" data-id=\"184403b\" 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<h2>Project Details<\/h2><p>Now that we\u2019ve got all the requirements set up, we can start building our app!<\/p><p>First, we need to create an index.html page. We need to import our TomTom SDK. To do that you need to import maps-web.min.js:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d42385b elementor-widget elementor-widget-code-highlight\" data-id=\"d42385b\" 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-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><head>\r\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\" \/>\r\n\t<meta charset='UTF-8'>\r\n\t<title>TomTom Examples<\/title>\r\n\t<meta name='viewport'     content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'\/>\r\n\t<link rel='stylesheet' type='text\/css' href='sdk\/maps.css' \/>\r\n\t<script src='sdk\/maps-web.min.js'><\/script>\r\n\t<script src='script.js'><\/script>\r\n<\/head><\/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<div class=\"elementor-element elementor-element-ba67074 elementor-widget elementor-widget-text-editor\" data-id=\"ba67074\" 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>Next, we need to create a DIV for our map. This is all we need for the body for the purposes of this article.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a83a61 elementor-widget elementor-widget-code-highlight\" data-id=\"2a83a61\" 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-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><body>\r\n  <div id='map' class='use-all-space' style=\"height: 300px; width: 300px\"><\/div>\r\n<\/body><\/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<div class=\"elementor-element elementor-element-7f34c17 elementor-widget elementor-widget-text-editor\" data-id=\"7f34c17\" 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>Now that we\u2019ve made it through the HTML, we can get to the main meat of this article: implementing the map and drawing the layers, via JavaScript. The first thing to do in JavaScript is to import the GeoJSON data.<\/p><p>There are a few ways to do this:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">you can download the file via an HTTP Request<\/li><li style=\"font-size: 16px;\">you can just manually paste the GeoJSON in a script, which will be represented as a JavaScript object we would then store in a global variable that other scripts can access it.<br \/><br \/><\/li><\/ul><p>In this tutorial, you\u2019ll be assigning the GeoJSON directly in our JavaScript file. Specifically, in parameter \u201cgeoJson\u201d, for simplicity\u2019s sake.<\/p><p>Here\u2019s what our map.js looks like:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-986b783 elementor-widget elementor-widget-code-highlight\" data-id=\"986b783\" 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>var geoJson = {\r\n  \"type\": \"FeatureCollection\",\r\n \r\n  \"features\": [\r\n    { \"type\": \"Feature\", \"properties\": { \"STATEFP\": \"06\", \"COUNTYFP\": \"107\", \"COUNTYNS\": \"00277318\", \"GEOID\": \"06107\", \"NAME\": \"Tulare\", \"NAMELSAD\": \"Tulare County\", \"LSAD\": \"06\", \"CLASSFP\": \"H1\", \"MTFCC\": \"G4020\", \"CSAFP\": null, \"CBSAFP\": \"47300\", \"METDIVFP\": null, \"FUNCSTAT\": \"A\", \"ALAND\": -2147483648.000000, \"AWATER\": 37391604.000000, \"INTPTLAT\": \"+36.2288317\", \"INTPTLON\": \"-118.7810618\" }, \"geometry\": { \"type\": \"Polygon\", \"coordinates\": [ [ [ -119.475, 36.39 ], [ -119.475, 36.401 ], [ -119.529, 36.401 ], [ -119.527, 36.489 ], [ -119.573, 36.489 ], [ -119.466, 36.575 ], [ -119.305, 36.574 ], [ -119.305, 36.661 ], [ -118.985, 36.657 ], [ -118.982, 36.742 ], [ -118.351, 36.741 ], [ -118.335, 36.705 ], [ -118.366, 36.69 ], [ -118.331, 36.669 ], [ -118.338, 36.655 ], [ -118.321, 36.627 ], [ -118.275, 36.597 ], [ -118.292, 36.562 ], [ -118.239, 36.524 ], [ -118.235, 36.494 ], [ -118.25, 36.482 ], [ -118.216, 36.457 ], [ -118.21, 36.43 ], [ -118.157, 36.433 ], [ -118.139, 36.419 ], [ -118.163, 36.389 ], [ -118.1, 36.346 ], [ -118.128, 36.28 ], [ -118.106, 36.213 ], [ -118.059, 36.17 ], [ -118.074, 36.14 ], [ -118.067, 36.093 ], [ -118.052, 36.084 ], [ -118.034, 36.009 ], [ -118.004, 35.984 ], [ -118.017, 35.955 ], [ -117.983, 35.927 ], [ -117.981, 35.868 ], [ -118.007, 35.858 ], [ -118.008, 35.789 ], [ -119.538, 35.79 ], [ -119.529, 36.27 ], [ -119.475, 36.269 ], [ -119.475, 36.39 ] ] ] } }, { . . . } \r\n\/\/The rest of the coordinates are omitted<\/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<div class=\"elementor-element elementor-element-10b587f elementor-widget elementor-widget-text-editor\" data-id=\"10b587f\" 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>GeoJSON is provided in the form of an object, which means we can set it to a variable and be able to access it anywhere in the JavaScript.<\/p><p>Another setup step is setting the product information. This can be done with tt.setProductInfo, which keeps track of the application\u2019s name and version. TomTom\u2019s new namespace is tt, be aware that this is a new change that came with\u00a0<a href=\"https:\/\/api.tomtom.com\/maps-sdk-for-web\/5.x\/5.22.0\/documentation\/modules\/Maps.html\">TomTom JavaScript Map SDK Version 5<\/a>.<\/p><p>With that out of the way, we can now implement TomTom\u2019s map properly in JavaScript. The code is straightforward:\u00a0<a href=\"https:\/\/api.tomtom.com\/maps-sdk-for-web\/5.x\/5.22.0\/documentation\/classes\/Maps.tt.html#property_map\">tt.map<\/a>\u00a0expects an object to configure the map\u2019s options.<\/p><p>Add this code below your body tag in index.html.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0219646 elementor-widget elementor-widget-code-highlight\" data-id=\"0219646\" 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-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><script>\r\n  tt.setProductInfo('My First App', '1.0');\r\n  var map = tt.map({\r\n    container: 'map', \/\/ Id of the div to insert the map into\r\n    key: '<API Key>',\r\n    source: 'vector',\r\n    basePath: '\/sdk' \/\/ Location of the SDK folder\r\n  });\r\n<\/script><\/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<div class=\"elementor-element elementor-element-b845b62 elementor-widget elementor-widget-text-editor\" data-id=\"b845b62\" 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>Now for one last bit of setup, before we can start working with the GeoJSON: we need to create a map load function. This is important, otherwise, the code we\u2019ll write will be executed before our map is. We\u2019re going to just place it inside the script tag, below the setting up the map.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c93bd6 elementor-widget elementor-widget-code-highlight\" data-id=\"6c93bd6\" 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-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><script>\r\n  tt.setProductInfo('My First App', '1.0');\r\n  var map = tt.map({\r\n    container: 'map', \/\/ Id of the div to insert the map into\r\n    key: '<API Key>',\r\n    source: 'vector',\r\n    basePath: '\/sdk' \/\/ Location of the SDK folder\r\n  });\r\n  map.on('load',function(){\r\n\r\n  }\r\n<\/script><\/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<div class=\"elementor-element elementor-element-7db247e elementor-widget elementor-widget-text-editor\" data-id=\"7db247e\" 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>Alright, it\u2019s finally time to use that GeoJSON!<\/p><p>We\u2019re going to use map.addLayer to draw on the map. The addLayer function expects an object, with specific inputs, as seen below.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f63c694 elementor-widget elementor-widget-code-highlight\" data-id=\"f63c694\" 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>map.on('load',function(){\r\n  map.addLayer({\r\n    'id': geoJson[\"features\"][0][\"properties\"][\"NAME\"],\r\n    'type': 'fill',\r\n    'source': {\r\n      'type': 'geojson',\r\n      'data': {\r\n        'type': 'Feature',\r\n        'geometry': geoJson[\"features\"][0][\"geometry\"]\r\n      }\r\n    },\r\n    'layout': {},\r\n    'paint': {\r\n      'fill-color': '#088',\r\n      'fill-opacity': 0.8\r\n    }\r\n  })\r\n}<\/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<div class=\"elementor-element elementor-element-ee70e38 elementor-widget elementor-widget-text-editor\" data-id=\"ee70e38\" 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>The most important parts to note are the parts that aren\u2019t hardcoded. IDs need to be unique. You can solve this by using the name of the county you\u2019re in!<\/p><p>The Geometry parameter is a bit more complicated, but still straightforward. It contains some data about the coordinates, then it contains every coordinate needed for the county border. Our GeoJSON data is formatted perfectly for what the\u00a0<a href=\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\">TomTom<\/a>\u00a0SDK requires, so we pass it in.<\/p><p>You can now launch the map by running\u00a0<span style=\"font-weight: bolder;\">http-server\u00a0<\/span>in your folder using Node and using any web browser to connect to one of the provided addresses.<\/p><p><img decoding=\"async\" class=\"b-lazy\" style=\"width: unset;\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Geo1\" data-src=\"https:\/\/live.staticflickr.com\/65535\/49072642746_10987c7e5e_o.png\" \/><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-4941\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642746_10987c7e5e_o.png\" alt=\"\" width=\"974\" height=\"504\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642746_10987c7e5e_o.png 974w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642746_10987c7e5e_o-300x155.png 300w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642746_10987c7e5e_o-768x397.png 768w\" sizes=\"(max-width: 974px) 100vw, 974px\" \/><\/p><p>You should see something like this when you access either of the IP addresses with any browser:<\/p><p><img decoding=\"async\" class=\"b-lazy\" style=\"width: unset;\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"geo2\" data-src=\"https:\/\/live.staticflickr.com\/65535\/49072642706_7afaf2c323_o.png\" \/><img decoding=\"async\" class=\"alignnone size-full wp-image-4942\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642706_7afaf2c323_o.png\" alt=\"\" width=\"462\" height=\"464\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642706_7afaf2c323_o.png 462w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642706_7afaf2c323_o-300x300.png 300w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642706_7afaf2c323_o-150x150.png 150w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642706_7afaf2c323_o-120x120.png 120w\" sizes=\"(max-width: 462px) 100vw, 462px\" \/><\/p><p>That\u2019s all well and good, but that\u2019s only one object! What if we want more? There\u2019s dozens in the provided GeoJSON file! Fortunately, there\u2019s an easy way to do that. All you need to do is create a for-loop to iterate through the value of \u201cfeatures\u201d from our GeoJSON!<\/p><p>Here\u2019s the updated script.js:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a35f2cd elementor-widget elementor-widget-code-highlight\" data-id=\"a35f2cd\" 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>map.on('load',function(){\r\n  for(var i=0;i<geoJson[\"features\"].length;i++){\r\n    \/\/Limit it, because too many breaks the map.\r\n    \/\/Most of this code was copied from another provided tutorial.\r\n    console.log(i);\r\n    map.addLayer({\r\n      'id': geoJson[\"features\"][i][\"properties\"][\"NAME\"],\r\n      'type': 'fill',\r\n              'source': {\r\n                'type': 'geojson',\r\n                'data': {\r\n                  'type': 'Feature',\r\n                  'geometry': geoJson[\"features\"][i][\"geometry\"]\r\n                }\r\n              },\r\n      'layout': {},\r\n      'paint': {\r\n        'fill-color': '#088',\r\n        'fill-opacity': 0.8\r\n      }\r\n    })\r\n  }\r\n});<\/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<div class=\"elementor-element elementor-element-4c56b63 elementor-widget elementor-widget-text-editor\" data-id=\"4c56b63\" 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>If you\u2019ve run it, you\u2019ll probably find one slight problem. The entire map is missing, but if you try to look around the map, you can see your layers.<\/p><p><img decoding=\"async\" class=\"b-lazy\" style=\"width: unset;\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"eo3\" data-src=\"https:\/\/live.staticflickr.com\/65535\/49072642761_8aaf885b0a_o.png\" \/><img decoding=\"async\" class=\"alignnone size-full wp-image-4946\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642761_8aaf885b0a_o.png\" alt=\"\" width=\"474\" height=\"462\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642761_8aaf885b0a_o.png 474w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072642761_8aaf885b0a_o-300x292.png 300w\" sizes=\"(max-width: 474px) 100vw, 474px\" \/><\/p><p>There\u2019s an upper limit to how many coordinates you can have before the map doesn\u2019t load properly. In this case, the total number of layers doesn&#8217;t seem that large. However, if you look back at the source data, you&#8217;ll notice that each county outline can contain dozens of coordinates. The more complicated outlines contain 90 or more coordinates each.<\/p><p>So, you want to be aware of the complexity of your underlying coordinate and layer data to make sure it renders correctly. You also want to keep this in mind to make sure users have a good experience in terms of being able to download your data set efficiently, even in low throughput mobile or wifi situations, and your data can be processed quickly, even on low-powered devices.<\/p><p>To address this situation for my sample, I simply decreased the number of layouts to draw.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d5e56d elementor-widget elementor-widget-code-highlight\" data-id=\"9d5e56d\" 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>map.on('load',function(){\r\n  for(var i=0;i<a[\"features\"].length\/4;i++){\r\n    \/\/Limit it, because too many breaks the map.\r\n    \/\/Most of this code was copied from another provided tutorial.\r\n    console.log(i);\r\n    map.addLayer({\r\n      'id': geoJson[\"features\"][i][\"properties\"][\"NAME\"],\r\n      'type': 'fill',\r\n      'source': {\r\n        'type': 'geojson',\r\n        'data': {\r\n          'type': 'Feature',\r\n          'geometry': geoJson[\"features\"][i][\"geometry\"]\r\n        }\r\n      },\r\n      'layout': {},\r\n      'paint': {\r\n      'fill-color': '#088',\r\n      'fill-opacity': 0.8\r\n      }\r\n    })\r\n  }\r\n});<\/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<div class=\"elementor-element elementor-element-76e51d6e elementor-widget elementor-widget-text-editor\" data-id=\"76e51d6e\" 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><\/p>\n<pre><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;\">A more complete app might prioritize certain nearby counties, or smooth out boundary details not crucial to a zoomed-out view.<\/span><br><\/pre>\n<h2>Next Steps<\/h2>\n<p>In this article, we went through implementing TomTom\u2019s map, and drawing layers that were provided by a JSON object that was created in the GeoJSON standard.<\/p>\n<p>You\u2019ve set up everything needed to create the map, then you looped through our GeoJSON variable, and finally, you created layers to draw on top of a map.<\/p>\n<p>Now that you know how to work with GeoJSON and TomTom\u2019s Map API, you can start creating all sorts of apps! Maybe you want to highlight certain tourist attractions on a map, or mark certain countries that can match some trivia location, like \u201cwhat states are the Appalachian mountains contained in?\u201d The possibilities are endless!<\/p>\n<p>If you\u2019d like to learn more about GeoJSON, you can read more about it from the <a href=\"https:\/\/tools.ietf.org\/html\/rfc7946\">RFC document itself<\/a>, or, if you\u2019re interested in learning more or participate in GeoJSON\u2019s development, you can check out their <a href=\"http:\/\/lists.geojson.org\/listinfo.cgi\/geojson-geojson.org\">work group<\/a>.<\/p>\n<p><em>This article was originally posted on <a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps\">TomTom&#8217;s blog<\/a>.<br><\/em><\/p>\n<p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\n<p><em>&nbsp;<\/em><\/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>In this article we\u2019ll look at the GeoJSON format, then use a GeoJSON data set to draw regional borders on a map with TomTom JavaScript Maps SDK for Web.<\/p>\n","protected":false},"author":3,"featured_media":6792,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[273,272,270],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using GeoJSON Geometry Data to Draw Borders with 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\/using-geojson-geometry-data-draw-borders-tomtom-maps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using GeoJSON Geometry Data to Draw Borders with TomTom Maps &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"In this article we\u2019ll look at the GeoJSON format, then use a GeoJSON data set to draw regional borders on a map with TomTom JavaScript Maps SDK for Web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-16T14:54:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-24T19:00:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/69.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=\"10 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\/using-geojson-geometry-data-draw-borders-tomtom-maps#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/using-geojson-geometry-data-to-draw-borders-with-tomtom-maps\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Using GeoJSON Geometry Data to Draw Borders with TomTom Maps\",\"datePublished\":\"2020-01-16T14:54:40+00:00\",\"dateModified\":\"2022-02-24T19:00:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/using-geojson-geometry-data-to-draw-borders-with-tomtom-maps\/\"},\"wordCount\":1388,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/69.png\",\"keywords\":[\"HTML\",\"JavaScript\",\"Mapping\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/using-geojson-geometry-data-to-draw-borders-with-tomtom-maps\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps\",\"name\":\"Using GeoJSON Geometry Data to Draw Borders with TomTom Maps &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/69.png\",\"datePublished\":\"2020-01-16T14:54:40+00:00\",\"dateModified\":\"2022-02-24T19:00:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/69.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/69.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using GeoJSON Geometry Data to Draw Borders with 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":"Using GeoJSON Geometry Data to Draw Borders with 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\/using-geojson-geometry-data-draw-borders-tomtom-maps","og_locale":"en_US","og_type":"article","og_title":"Using GeoJSON Geometry Data to Draw Borders with TomTom Maps &#183; Technical Content Marketing | ContentLab","og_description":"In this article we\u2019ll look at the GeoJSON format, then use a GeoJSON data set to draw regional borders on a map with TomTom JavaScript Maps SDK for Web.","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2020-01-16T14:54:40+00:00","article_modified_time":"2022-02-24T19:00:07+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/69.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":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#article","isPartOf":{"@id":"https:\/\/contentlab.com\/using-geojson-geometry-data-to-draw-borders-with-tomtom-maps\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Using GeoJSON Geometry Data to Draw Borders with TomTom Maps","datePublished":"2020-01-16T14:54:40+00:00","dateModified":"2022-02-24T19:00:07+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/using-geojson-geometry-data-to-draw-borders-with-tomtom-maps\/"},"wordCount":1388,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/69.png","keywords":["HTML","JavaScript","Mapping"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/using-geojson-geometry-data-to-draw-borders-with-tomtom-maps\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps","name":"Using GeoJSON Geometry Data to Draw Borders with TomTom Maps &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/69.png","datePublished":"2020-01-16T14:54:40+00:00","dateModified":"2022-02-24T19:00:07+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/69.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/69.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-geojson-geometry-data-draw-borders-tomtom-maps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Using GeoJSON Geometry Data to Draw Borders with 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\/2020\/01\/69.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2985"}],"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=2985"}],"version-history":[{"count":5,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2985\/revisions"}],"predecessor-version":[{"id":5860,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2985\/revisions\/5860"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/6792"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2985"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}