{"id":2987,"date":"2020-01-21T17:19:00","date_gmt":"2020-01-21T17:19:00","guid":{"rendered":"https:\/\/contentlab.com\/displaying-density-heatmap-layers-with-the-tomtom-web-sdk\/"},"modified":"2022-02-24T19:03:33","modified_gmt":"2022-02-24T19:03:33","slug":"displaying-density-heatmap-layers-with-the-tomtom-web-sdk","status":"publish","type":"post","link":"https:\/\/contentlab.com\/displaying-density-heatmap-layers-with-the-tomtom-web-sdk\/","title":{"rendered":"Displaying Density Heatmap Layers with the TomTom Web SDK"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2987\" class=\"elementor elementor-2987\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1cee27ca elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"1cee27ca\" 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-7d072fb5\" data-id=\"7d072fb5\" 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-2fb0279 elementor-widget elementor-widget-text-editor\" data-id=\"2fb0279\" 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 Maps SDK for Web offers the easiest way to access the TomTom APIs for displaying maps and geo information, and is easy to interact with regardless of your coding experience level. The SDK is completely framework-agnostic and can be used to leverage not only the TomTom APIs, but also data coming from any other API.<\/p><p>In this article we explore a potential use case for showing multiple layers with the TomTom Maps SDK: We&#8217;ll build a map that displays the population density of the USA in the form of a heatmap. A heatmap enables map viewers to perceive the population density of points independently of the zoom factor. It\u2019s the least constrained of all display styles, because it doesn\u2019t correspond to geographic boundaries. Other options for display styles include dot density, choropleth, and hexagonal binning.<\/p><h2>Project Preparation<\/h2><p>Here\u2019s what we need to build our custom map view:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">An API key for accessing the TomTom API<\/li><li style=\"font-size: 16px;\">The TomTom Maps SDK<\/li><li style=\"font-size: 16px;\">Some population density data<br \/><br \/><\/li><\/ul><p>To obtain an API key, start by registering as a developer on the TomTom developer portal. This will give you a sample API key you can use later to access all other TomTom APIs in the future..<\/p><p>After registering successfully, you can also download the latest version of the TomTom\u00a0<a href=\"https:\/\/developer.tomtom.com\/maps-sdk-web-js\">Maps SDK for Web<\/a>. For this article, we\u2019ll actually just reference the necessary files from an online location, so that is all you will need to download!<\/p><p>The population density data can be retrieved from the U.S. Census Bureau, but we\u2019ll use a premade GeoJSON file that contains the density values from this\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/List_of_U.S._states_by_population_density\">Wikipedia article<\/a>. The data was prepared by\u00a0<a href=\"http:\/\/bost.ocks.org\/mike\">Mike Bostock<\/a>.<\/p><h2>Building the Map Display<\/h2><div>Let&#8217;s start by displaying a simple map. For this we need three things:<br \/><br \/><\/div><div>\u00a0<\/div><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">An HTML file where we put everything together.<\/li><li style=\"font-size: 16px;\">References to the TomTom SDK files (CSS and JavaScript).<\/li><li style=\"font-size: 16px;\">Some code to initialize the map on the HTML document.<br \/><br \/><\/li><\/ul><p>To get going, open your text editor and start a simple HTML file. Since we can take the TomTom Web SDK files from the available content delivery network (CDN), we don&#8217;t have to download anything.<\/p><p>All in all, the boilerplate to display a map is minimal. We\u2019ll just introduce some custom CSS to obtain a full-screen map display, only for convenience.<\/p><p>The code in action looks like this:<\/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-6252afe elementor-widget elementor-widget-code-highlight\" data-id=\"6252afe\" 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-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp><link rel=\"stylesheet\" href=\"https:\/\/api.tomtom.com\/maps-sdk-for-web\/cdn\/5.x\/5.36.1\/maps\/maps.css\">\r\n<style>\r\nhtml, body {\r\n  padding: 0;\r\n  margin: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\nbody {\r\n  display: flex;\r\n  flex-direction: row;\r\n}\r\n#map {\r\n  flex: 1;\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n<\/style>\r\n<div id=\"map\"><\/div>\r\n<script src=\"https:\/\/api.tomtom.com\/maps-sdk-for-web\/cdn\/5.x\/5.36.1\/maps\/maps-web.min.js\"><\/script>\r\n<script>\r\ntt.map({\r\n  container: document.querySelector('#map'),\r\n  key: 'your-api-key',\r\n  language: 'en-GB',\r\n  center: [-96.7098725, 39.0640021],\r\n  zoom: 4,\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-83e48ac elementor-widget elementor-widget-text-editor\" data-id=\"83e48ac\" 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>Notably, we set the language explicitly to British English. The map should be centered at some location in the United States, with the zoom being configured such that most parts of North America are visible on desktop resolutions.<\/p><h2>Obtaining the Heatmap Data<\/h2><p>With the map correctly displayed, we can go on to display the desired heatmap layer. First, however, we need to obtain the required data. Since the data is already available in a JSON file, we only need to fetch the file&#8217;s content from the server. Ideally, this can be done using the fetch API. For older browsers, we might need to support different ways of obtaining the contents of a JSON file.<\/p><p>Assuming that the file is called us-states.json, we can retrieve it with the following code:<\/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-a1ad5af elementor-widget elementor-widget-code-highlight\" data-id=\"a1ad5af\" 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>fetch('.\/us-states.json')\r\n  .then(res => res.json())\r\n  .then(data => {\r\n\t\/\/ ...\r\n  })\r\n  .catch(err => {\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-dbfe5df elementor-widget elementor-widget-text-editor\" data-id=\"dbfe5df\" 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>Fetching a resource from the network is an asynchronous process. Thus, we get back a Promise, which we can use to inspect the response. For production-ready code we should also take care of the catch clause. In the simple example above, we perform the same error handling in any case, as a simple &#8220;catch&#8217;em all&#8221; construct is sufficient.<\/p><p>Once we interpret the body of the raw response as JSON, we obtain another Promise, which leads to the callback where we use the data argument. We already know that the data argument will be a correctly formatted GeoJSON object. We can use this information to build a new layer for our map.<\/p><h2>Density Heatmap Layer<\/h2><p>With the data in place, we need to look at how to actually integrate a map layer. Luckily, a functional example already exists. Still, in addition to the information from that example and the official documentation, it&#8217;s nice to know what&#8217;s really going on under the hood.<\/p><p>The TomTom Maps SDK for Web is not a completely new product but rather a combination of successful open-source libraries with a commercial map-display engine to access TomTom&#8217;s proprietary API. While the map-related information is all coming from the API, the view completely relies on these libraries. In addition, the TomTom Maps SDK has a small facade on top to make working with all these layers seamless and efficient. Furthermore, it provides the right access point to the\u00a0<a href=\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\">TomTom<\/a>\u00a0API\u2014all we need to do is to supply our API key as shown in the first code snippet.<\/p><p>Now, for adding layers, we\u2019ll use the addLayer API, which will interact with a portion of the SDK supported by the open source Mapbox GL JS.<\/p><p>Basically, all we need to do is call addLayer once the map has finished loading. There are three options that are of interest to us:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">id \u2014 remove or update the layer<\/li><li style=\"font-size: 16px;\">source \u2014 configure the layer&#8217;s data source<\/li><li style=\"font-size: 16px;\">type \u2014 set to heatmap to display the population density in the form of a heatmap<br \/><br \/><\/li><\/ul><p>And here they are in action:<\/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-79ec3b4 elementor-widget elementor-widget-code-highlight\" data-id=\"79ec3b4\" 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.addLayer({\r\n  id: 'density',\r\n  source: {\r\n\ttype: 'geojson',\r\n\tdata,\r\n  },\r\n  type: 'heatmap',\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-2014720 elementor-widget elementor-widget-text-editor\" data-id=\"2014720\" 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 heatmap layer can also be configured using additional paint options, which include the colors to use, the kind of heatmap, and its shape. The most important setting for painting the density is heatmap-weight. This option helps to define the value for drawing the heatmap. While a linear scale may be a good beginning, we\u2019ll soon find out that it\u2019s not ideal for displaying the relevant information.<\/p><p>Another issue is that the US states are actually defined as multi-polygons, that is, multiple groups of points. While some states (such as Texas) can be well described by a single polygon with points at all corners, other states (like Hawaii) require multiple polygons. Usually, these groups represent different islands.<\/p><p>The issue with using multiple points is that each point is used to display the heatmap, which means we need to define the geometry as a whole. Let&#8217;s try to bring it all together!<\/p><h2>Bringing Everything Together<\/h2><p>With the given data, there are obvious choices we won\u2019t follow. One possibility could be to reduce the states to a single point (in the center of the state), such that each density point reflects just one state. Another idea might be to use a different type of layer, such as a choropleth, to illustrate the states with a given color. What we are after, however, is a heatmap.<\/p><p>Let&#8217;s play around with the properties, most notably the radius and weight of the heatmap. Obviously, the weight of the heatmap points is quite important and should be adjusted to the density given in the GeoJSON. Using an exponential weight also seems natural; we only need to determine the scale.<\/p><p>The following snippet sets the heatmap weight according to the density property in the GeoJSON data. It also uses an exponential scale that puts values from 1 to 10000 into the 0 to 1 range.<\/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-3919f90 elementor-widget elementor-widget-code-highlight\" data-id=\"3919f90\" 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>{\r\n  \"type\": \"exponential\",\r\n  \"property\": \"density\",\r\n  \"stops\": [\r\n\t[1, 0],\r\n\t[10000, 1]\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-6bb04fe elementor-widget elementor-widget-text-editor\" data-id=\"6bb04fe\" 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>For the radius we can go wild. We can adjust the radius with the zoom level or keep it constant. We&#8217;ll start with a constant of 50. Let&#8217;s see how it looks:<\/p><p><img decoding=\"async\" class=\"b-lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/live.staticflickr.com\/65535\/49072743722_e86ce0927b_o.png\" \/><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-4933\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072743722_e86ce0927b_o.png\" alt=\"\" width=\"974\" height=\"504\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072743722_e86ce0927b_o.png 974w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072743722_e86ce0927b_o-300x155.png 300w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072743722_e86ce0927b_o-768x397.png 768w\" sizes=\"(max-width: 974px) 100vw, 974px\" \/><\/p><p>This looks decent at the given zoom level, but becomes inaccurate very quickly. Luckily, we can use a zoom-specific version that counters such problems:<\/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-b0df18b elementor-widget elementor-widget-code-highlight\" data-id=\"b0df18b\" 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>[\r\n  \"interpolate\",\r\n  [\"linear\"],\r\n  [\"zoom\"],\r\n  0, 10,\r\n  9, 80,\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-2782f25 elementor-widget elementor-widget-text-editor\" data-id=\"2782f25\" 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>As a result, even with maximum zoom out, we can identity the increasing population density on the coasts, especially the East Coast.<\/p><p><img decoding=\"async\" class=\"b-lazy\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"heatmap3\" data-src=\"https:\/\/live.staticflickr.com\/65535\/49072536456_365ee4c24a_o.png\" \/><img decoding=\"async\" class=\"alignnone size-full wp-image-4934\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072536456_365ee4c24a_o.png\" alt=\"\" width=\"974\" height=\"472\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072536456_365ee4c24a_o.png 974w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072536456_365ee4c24a_o-300x145.png 300w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/49072536456_365ee4c24a_o-768x372.png 768w\" sizes=\"(max-width: 974px) 100vw, 974px\" \/><\/p><p>Finally, the full\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0code to get this working remains quite minimal:<\/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-bb4a9cd elementor-widget elementor-widget-code-highlight\" data-id=\"bb4a9cd\" 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>const container = document.querySelector('#map');\r\nconst map = tt.map({\r\n  container,\r\n  key: 'your-api-key',\r\n  language: 'en-GB',\r\n  center: [-96.7098725, 39.0640021],\r\n  zoom: 4,\r\n});\r\n\r\nfetch('.\/us-states.json')\r\n  .then(res => res.json())\r\n  .then(data => {\r\n\tmap.addLayer({\r\n  \tid: 'density',\r\n  \tsource: {\r\n    \ttype: 'geojson',\r\n    \tdata,\r\n  \t},\r\n  \ttype: 'heatmap',\r\n  \tpaint: {\r\n    \t'heatmap-radius': [\r\n      \t\"interpolate\",\r\n      \t[\"linear\"],\r\n      \t[\"zoom\"],\r\n      \t0, 20,\r\n      \t9, 80,\r\n    \t],\r\n    \t'heatmap-weight': {\r\n      \ttype: 'exponential',\r\n      \tproperty: 'density',\r\n      \tstops: [\r\n        \t[1, 0],\r\n        \t[10000, 1],\r\n      \t],\r\n    \t},\r\n  \t},\r\n\t});\r\n  })\r\n  .catch(err => {\r\n\tconsole.error(err);\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-6c942f54 elementor-widget elementor-widget-text-editor\" data-id=\"6c942f54\" 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: rgb(0, 178, 169); font-family: Sailec, sans-serif; font-size: 2rem;\">Conclusion<\/span><br><\/pre>\n<p>Using the TomTom Maps SDK for Web with custom map information is straightforward and approachable for developers of any level. Multiple options and countless examples provide enough help to let us get started efficiently. In this article, we showed how to present population density data in the form of a heatmap layer. What will you build?<\/p>\n<p><em>This post was originally posted on <a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk\">TomTom&#8217;s blog<\/a><\/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>\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 explore a potential use case for showing multiple layers with the TomTom Maps SDK<\/p>\n","protected":false},"author":3,"featured_media":6795,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[272,284,270],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Displaying Density Heatmap Layers with the TomTom Web SDK &#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\/displaying-density-heatmap-layers-tomtom-web-sdk\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Displaying Density Heatmap Layers with the TomTom Web SDK &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"In this article we explore a potential use case for showing multiple layers with the TomTom Maps SDK\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-21T17:19:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-24T19:03:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/Untitled-design.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=\"8 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\/displaying-density-heatmap-layers-tomtom-web-sdk#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/displaying-density-heatmap-layers-with-the-tomtom-web-sdk\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Displaying Density Heatmap Layers with the TomTom Web SDK\",\"datePublished\":\"2020-01-21T17:19:00+00:00\",\"dateModified\":\"2022-02-24T19:03:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/displaying-density-heatmap-layers-with-the-tomtom-web-sdk\/\"},\"wordCount\":1369,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/Untitled-design.png\",\"keywords\":[\"JavaScript\",\"JSON\",\"Mapping\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/displaying-density-heatmap-layers-with-the-tomtom-web-sdk\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk\",\"name\":\"Displaying Density Heatmap Layers with the TomTom Web SDK &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/Untitled-design.png\",\"datePublished\":\"2020-01-21T17:19:00+00:00\",\"dateModified\":\"2022-02-24T19:03:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/Untitled-design.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/Untitled-design.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Displaying Density Heatmap Layers with the TomTom Web SDK\"}]},{\"@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":"Displaying Density Heatmap Layers with the TomTom Web SDK &#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\/displaying-density-heatmap-layers-tomtom-web-sdk","og_locale":"en_US","og_type":"article","og_title":"Displaying Density Heatmap Layers with the TomTom Web SDK &#183; Technical Content Marketing | ContentLab","og_description":"In this article we explore a potential use case for showing multiple layers with the TomTom Maps SDK","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2020-01-21T17:19:00+00:00","article_modified_time":"2022-02-24T19:03:33+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/Untitled-design.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":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#article","isPartOf":{"@id":"https:\/\/contentlab.com\/displaying-density-heatmap-layers-with-the-tomtom-web-sdk\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Displaying Density Heatmap Layers with the TomTom Web SDK","datePublished":"2020-01-21T17:19:00+00:00","dateModified":"2022-02-24T19:03:33+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/displaying-density-heatmap-layers-with-the-tomtom-web-sdk\/"},"wordCount":1369,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/Untitled-design.png","keywords":["JavaScript","JSON","Mapping"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/displaying-density-heatmap-layers-with-the-tomtom-web-sdk\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk","name":"Displaying Density Heatmap Layers with the TomTom Web SDK &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/Untitled-design.png","datePublished":"2020-01-21T17:19:00+00:00","dateModified":"2022-02-24T19:03:33+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/Untitled-design.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/Untitled-design.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/displaying-density-heatmap-layers-tomtom-web-sdk#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Displaying Density Heatmap Layers with the TomTom Web SDK"}]},{"@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\/Untitled-design.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2987"}],"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=2987"}],"version-history":[{"count":5,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2987\/revisions"}],"predecessor-version":[{"id":5856,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2987\/revisions\/5856"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/6795"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2987"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}