{"id":2976,"date":"2020-01-09T15:31:00","date_gmt":"2020-01-09T15:31:00","guid":{"rendered":"https:\/\/contentlab.com\/visualizing-filming-locations-with-the-tomtom-maps-sdk-for-web\/"},"modified":"2022-02-24T18:59:30","modified_gmt":"2022-02-24T18:59:30","slug":"visualizing-filming-locations-with-the-tomtom-maps-sdk-for-web","status":"publish","type":"post","link":"https:\/\/contentlab.com\/visualizing-filming-locations-with-the-tomtom-maps-sdk-for-web\/","title":{"rendered":"Visualizing Filming Locations with the TomTom Maps SDK for Web"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2976\" class=\"elementor elementor-2976\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-29f11e0f elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"29f11e0f\" 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-50828c10\" data-id=\"50828c10\" 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-fc4f228 elementor-widget elementor-widget-text-editor\" data-id=\"fc4f228\" 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>Converting a data set with location information into a visual representation of the data used to be a task for specialized software. TomTom location services and the TomTom Maps SDK for Web make it easy for programmers to create location-aware visualizations.<\/p><p>In this tutorial we\u2019ll walk through an application that uses a public data set of film locations in New York City to display these locations and information about them on a map. The same technique could be used to display data from a variety of public or proprietary data sets. In this tutorial you will do the following:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Read information and location data from a public or proprietary data set.<\/li><li style=\"font-size: 16px;\">Create a map marker and popup to display information for each valid data point.<\/li><li style=\"font-size: 16px;\">Use\u00a0<a href=\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\">TomTom<\/a>\u00a0location services to geocode locations that are missing lat\/long coordinates.<\/li><\/ul><h2>Creating your map<\/h2><p>To get started, you&#8217;ll need the following:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">The latest TomTom Maps for SDK\u00a0<a href=\"https:\/\/developer.tomtom.com\/maps-sdk-web-js\/downloads\">Web Standalone functional example<\/a><\/li><li style=\"font-size: 16px;\">Your own TomTom Developer\u00a0<a href=\"https:\/\/developer.tomtom.com\/user\/register\">API Key<\/a><\/li><li style=\"font-size: 16px;\">NPM and\u00a0<a href=\"https:\/\/nodejs.org\/en\/download\/\">Node.js<\/a><\/li><li style=\"font-size: 16px;\">A suitable data set; we\u2019ll use public data Filming Locations (Scenes from the City) from\u00a0<a href=\"https:\/\/opendata.cityofnewyork.us\/\">NYC Open Data<\/a><br \/><br \/><\/li><\/ul><p>Download and unzip the TomTom Maps for SDK Web<a href=\"https:\/\/developer.tomtom.com\/maps-sdk-web-js\/downloads\">\u00a0Standalone functional example.<\/a><\/p><p>Next, download the XML file from Filming Locations (Scenes from the City), then save this XML file into a new directory called\u00a0<span style=\"font-weight: bolder;\">data<\/span>\u00a0in the root directory of your unzipped Standalone function example files.<\/p><p>Create a new file called\u00a0<span style=\"font-weight: bolder;\">nyc-movie-locations.html<\/span>\u00a0that contains the following web page markup, then save this new file beside the existing\u00a0<span style=\"font-weight: bolder;\">index.html<\/span>\u00a0file into the root directory of your unzipped Standalone function example files.<\/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-4295cfb elementor-widget elementor-widget-code-highlight\" data-id=\"4295cfb\" 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><!DOCTYPE html>\r\n\t<html class='use-all-space'>\r\n\t<head>\r\n    \t<meta http-equiv='X-UA-Compatible' content='IE=Edge' \/>\r\n    \t<meta charset='UTF-8'>\r\n    \t<title>My Map<\/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<link rel=\"shortcut icon\" href=\"\/favicon.png\">\r\n    \t<link rel=\"apple-touch-icon\" href=\"\/favicon.png\">\r\n    \t<script src='.\/sdk\/maps-web.min.js'><\/script>\r\n    \t<script src='.\/sdk\/services-web.min.js'><\/script>\r\n    \t<script src='https:\/\/code.jquery.com\/jquery-3.4.1.min.js'><\/script>\r\n    \t<style>\r\n    \t#map {\r\n        \twidth: 100vw;\r\n        \theight: 100vh;\r\n    \t}\r\n    \t<\/style>\r\n\t<\/head>\r\n\t<body>\r\n    \t<div id='map' class='map'><\/div>\r\n    \t<script>\r\n        \t\/\/ Coordinates of New York City - offset a little to centre the map\r\n        \tvar startPoint = [[-74.0060 - 0.01, 40.7128 + 0.01]];\r\n        \t\r\n        \t\/\/ enter your own API key here\r\n        \tvar yourKey = '<your-tomtom-API-Key>';\r\n \r\n        \t\/\/ create a map, centered and zoomed\r\n        \ttt.setProductInfo('<your-product-name>', '<your-product-version>');\r\n        \tvar map= tt.map({\r\n                            \tkey: yourKey,\r\n                            \tcontainer: 'map',\r\n                            \tzoom: 10.7,\r\n                            \tcenter: startPoint[0],\r\n                            \tstyle: 'tomtom:\/\/vector\/1\/basic-main'\r\n                        \t});\r\n \r\n\t        \/\/ add some controls\r\n        \tmap.addControl(new tt.FullscreenControl());\r\n        \tmap.addControl(new tt.NavigationControl());\r\n \r\n        \t\/\/ setup popup boundaries\r\n        \tvar markerHeight = 50, markerRadius = 10, linearOffset = 25;\r\n        \tvar popupOffsets = {\r\n            \t'top': [0, 0],\r\n            \t'top-left': [0,0],\r\n            \t'top-right': [0,0],\r\n            \t'bottom': [0, -markerHeight],\r\n            \t'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],\r\n            \t'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],\r\n            \t'left': [markerRadius, (markerHeight - markerRadius) * -1],\r\n            \t'right': [-markerRadius, (markerHeight - markerRadius) * -1]\r\n        \t};\r\n \r\n        \t\/\/ extract data from a given row and column of data source\r\n        \tfunction extractData(source, row, column, tab){\r\n            \t\/\/ alter location to extract data depending on tab of spreadsheet\r\n            \tvar result = (tab==1) ? source.querySelector(\"Workbook > Worksheet:nth-child(5) > Table > Row:nth-child(\" + row + \") > Cell:nth-child(\"+column+\") > Data\")\r\n                                \t: source.querySelector(\"Workbook > Worksheet:nth-child(7) > Table > Row:nth-child(\" + row + \") > Cell:nth-child(\"+column+\") > Data\");\r\n            \t\/\/ get innerHTML if a valid result, if valid, clean up data here.\r\n            \treturn result == null ? \"\" : result.innerHTML.trim().replace('n\/a','').replace('N\/A','');\r\n        \t}\r\n \r\n        \tfunction createMarkerAndPopup(source, row, tab){\r\n            \t\/\/ cater for two different formats for tab 1 vs tab 3\r\n            \tvar col = (tab==1)? [1,2, 6,7,8,9,10,11,12,13,14,15,16]  \/\/ tab 1\r\n                            \t: [1,2,21,5,6,7, 8, 9,10,11,12,13,14]; \/\/ tab 3\r\n \r\n            \tvar Film = extractData(source,row,col[0],tab);\r\n            \tvar Year = extractData(source,row,col[1],tab);\r\n            \tvar Artist_Credit = extractData(source,row,col[2],tab);\r\n            \tvar Director_Filmmaker_Name = extractData(source,row,col[3],tab);\r\n            \tvar Director_Filmmaker_IMDB_Link = extractData(source,row,col[4],tab);\r\n            \tvar Location_Display_Text = extractData(source,row,col[5],tab);\r\n            \tvar LATITUDE = extractData(source,row,col[6],tab);\r\n            \tvar LONGITUDE = extractData(source,row,col[7],tab);\r\n            \tvar Borough = extractData(source,row,col[8],tab);\r\n            \tvar Neighborhood = extractData(source,row,col[9],tab);\r\n            \tvar Scene_Type = extractData(source,row,col[10],tab);\r\n            \tvar Media = extractData(source,row,col[11],tab);\r\n            \tvar IMDB_LINK = extractData(source,row,col[12],tab);\r\n \r\n            \tif (tab==3){\r\n                \t\/\/ build a location to geocode\r\n                \tvar loc = (Location_Display_Text + ' ' + Borough + ' ' + Neighborhood).trim();\r\n                \t\/\/ don't try to geocode blank entries\r\n                \tif(loc!='') {\r\n                    \t$.get( \"https:\/\/api.tomtom.com\/search\/2\/geocode\/\"+\r\n                                \tloc.trim()+\r\n                                \t\".xml?typeahead=false&limit=1&countrySet=US&lat=40.7128&lon=-74.0060&radius=10000&topLeft=41%2C-174&btmRight=40%2C-73.5&key=\"+\r\n                                \tyourKey, function(data,status){\r\n                        \t\/\/ only grab results when successful\r\n                        \tif(status=='success'){\r\n                            \tvar results = data.querySelector(\"response > summary > numResults\");\r\n                            \tif (results != null && results.innerHTML == '1'){\r\n                                \tLATITUDE = data.querySelector(\"response > results > item > position > lat\").innerHTML;\r\n                                \tLONGITUDE = data.querySelector(\"response > results > item > position > lon\").innerHTML;\r\n                                \tconsole.log(loc+' Geocoded result: '+LATITUDE+ ','+LONGITUDE);\r\n                            \t}\r\n                        \t}\r\n                    \t});\r\n                \t}\r\n            \t}\r\n \r\n            \t\/\/ only show data\r\n            \tif (!isNaN(LATITUDE) && !isNaN(LONGITUDE)){\r\n                \t\/\/ coordinate for the map marker\r\n                \tvar state = {\r\n                        \tcenter: {\r\n                            \tlat:  LATITUDE,\r\n                            \tlng: LONGITUDE\r\n                        \t},\r\n                        \tcoordinates: null,\r\n                        \tselectedAddress: null\r\n                    \t};\r\n \r\n                \t\/\/ HTML content for the popup\r\n                \tvar html = \"<table>\" +\r\n                            \t\"<tr><th>\" + Media + \"<\/th><td><a href='\" + IMDB_LINK +\"' target='_blank'>\" + Film + \"<\/a><\/td><\/tr>\"+\r\n                            \t\"<tr><th>Year<\/th><td>\" + Year + \"<\/td><\/tr>\" +\r\n                            \t\"<tr><th nowrap>\" + Artist_Credit + \"<\/th>\" +\r\n                            \t\"<td><a href='\" + Director_Filmmaker_IMDB_Link + \"' target='_blank'>\" + Director_Filmmaker_Name + \"<\/a><\/td><\/tr>\"+\r\n                            \t\"<tr><th>Location<\/th><td>\" + Location_Display_Text.replace(\"&amp;\", \"&\")\r\n                                                                                    .replace(\"&lt;br&gt;\", \", \")\r\n                                                                                    .replace(\"&lt;br&gt;\", \", \") + \"<\/td><\/tr>\" +\r\n                            \t(Scene_Type != \"\" ? \"<tr><th>Scene<\/th><td>\" + Scene_Type + \"<\/td><\/tr>\" : \"\") +\r\n         \t                   \"<\/table>\";\r\n \r\n                \t\/\/ create a popup\r\n                \tvar popup = new tt.Popup({offset: popupOffsets, className: 'my-class'})\r\n                        \t.setLngLat(state.center)\r\n                        \t.setHTML(html)\r\n                \t.addTo(map);\r\n \r\n                \t\/\/ create a map marker and link to the popup\r\n                \tvar marker = new tt.Marker()\r\n                \t.setLngLat(state.center)\r\n                \t.setPopup(popup)\r\n                \t.addTo(map);\r\n            \t}\r\n        \t}\r\n \r\n        \t\/\/ read the XML data file, extract the data and create a marker+popup for each location\r\n        \t$.get(\"data\/Interactive_Map_Data.xml\", function (xml) {\r\n            \t\/\/ console.log(xml);\r\n \r\n            \t\/\/ read from 1st spreadsheet tab (231 rows)\r\n            \tfor (var i=22;i<254;i++) {\r\n                \tcreateMarkerAndPopup(xml, i, 1);\r\n            \t}\r\n            \t\/\/ read from 3rd spreadsheet tab (7 rows)\r\n            \tfor (var i=6;i<14;i++) {\r\n                \tcreateMarkerAndPopup(xml, i, 3);\r\n            \t}\r\n        \t});  \t\r\n    \t<\/script>\r\n\t<\/body>\r\n\t<\/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<div class=\"elementor-element elementor-element-0e03598 elementor-widget elementor-widget-text-editor\" data-id=\"0e03598\" 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>Here you\u2019ll need your own free API key.<\/p><p>If you haven\u2019t got one yet just follow the steps Create your API Key now at this\u00a0<a href=\"https:\/\/developer.tomtom.com\/maps-sdk-web-js\/tutorials\/display-vector-map#prerequisites\">tutorial.<\/a><\/p><p>Next edit your map file<span style=\"font-weight: bolder;\">\u00a0nyc-movie-locations.htm<\/span>l to include your own API key (in var yourKey = &#8216;&lt;your-tomtom-API-Key&gt;&#8217;;), as well as an application name and application version.<\/p><p>Finally, to be able to view the new map we\u2019ll run a simple HTTP server. Navigate to the directory containing the example.<\/p><p>We&#8217;re going to install a light-weight Node.js http-server (note that you might need to run this command with admin\/root privileges):<\/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-3438a3c elementor-widget elementor-widget-code-highlight\" data-id=\"3438a3c\" 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 --global http-server<\/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-6cee6b9 elementor-widget elementor-widget-text-editor\" data-id=\"6cee6b9\" 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>Then just simply run the following command to start the server:<\/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-770ac6c elementor-widget elementor-widget-code-highlight\" data-id=\"770ac6c\" 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>http-server<\/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-2e750d3 elementor-widget elementor-widget-text-editor\" data-id=\"2e750d3\" 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 you can view your map page by pointing your browser to URL\u00a0<a href=\"http:\/\/localhost:8080\/nyc-movie-locations.html\">http:\/\/localhost:8080\/nyc-movie-locations.html\u00a0<\/a><\/p><p>Here it is:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48943713052_d70f34983a_o.png\" alt=\"blog-1\" \/><\/p><p>Click on a map marker to view the popup information. Click on a movie or director link to view more information from IMDB in another window. You can use the zoom or full screen controls, or mouse zoom\/drag to navigate as required.<\/p><h2>Reviewing The Data Source<\/h2><p>Thinking of creating similar applications for yourself?\u00a0 Here\u2019s a few tips to help you see if a given data source is suitable, as well as some background information on how this particular data set was analyzed and used here.<\/p><p>The dataset Filming Locations (Scenes from the City) happens to be a spreadsheet saved as XML. Almost any data source could be used including JSON, plain text, CSV, XML, data objects from a database, or an API call.<\/p><p>The important thing is that each data point includes the relevant information you want to map and some sort of location information \u2014 ideally latitude and longitude coordinates or at least an address, even if just a suburb or city.<\/p><p>The data source used for this application happens to have all of this. Here\u2019s the first few rows in the first tab of the spreadsheet, as viewed from Excel:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48942973443_8cf233885c_o.png\" alt=\"Blog-2\" \/><\/p><p>You could also view the XML in a text editor, and this might be all you need if it is a straightforward XML file.<\/p><p>If your data source is missing latitude and longitude information, but includes street address or suburb\/place name information, then it is possible to use geocoding, a process where the location is converted to a latitude and longitude, to create the necessary latitude and longitude coordinates for mapping the data points.<\/p><p>Notice the third tab of the spreadsheet called \u201cItems without location\u201d, here\u2019s an example of data entries without latitude and longitude information. Later in the tutorial we\u2019ll see how we can use geocoding services, which are a part of TomTom location services, to make this data usable as well.<\/p><p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-4959\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/48943712892_030c4623fb_o.png\" alt=\"\" width=\"939\" height=\"264\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/48943712892_030c4623fb_o.png 939w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/48943712892_030c4623fb_o-300x84.png 300w, https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/48943712892_030c4623fb_o-768x216.png 768w\" sizes=\"(max-width: 939px) 100vw, 939px\" \/><\/p><p>This following \u2018trick\u2019 can help make analysis and extraction of any data source, documented or not, much easier.<\/p><p>Inside the\u00a0<span style=\"font-weight: bolder;\">nyc-movie-locations.html<\/span>\u00a0page where we read the XML block, just uncomment the console.log line, then comment out the remaining code in the block, leaving just the console.log statement active as shown 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-48c6d8b elementor-widget elementor-widget-code-highlight\" data-id=\"48c6d8b\" 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>$.get(\"data\/Interactive_Map_Data.xml\", function (xml) {\r\n            \tconsole.log(xml);\r\n            \t\/\/ \/\/ read from 1st spreadsheet tab (231 rows)\r\n            \t\/\/ for (var i=22;i<254;i++) {\r\n            \t\/\/ \tcreateMarkerAndPopup(xml, i, 1);\r\n            \t\/\/ }\r\n            \t\/\/ \/\/ read from 3rd spreadsheet tab (7 rows)\r\n            \t\/\/ for (var i=6;i<14;i++) {\r\n            \t\/\/ \tcreateMarkerAndPopup(xml, i, 3);\r\n            \t\/\/ }\r\n        \t});<\/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-9a592fa elementor-widget elementor-widget-text-editor\" data-id=\"9a592fa\" 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>Save your changes, then view your map page at URL\u00a0<a href=\"http:\/\/localhost:8080\/nyc-movie-locations.html\">http:\/\/localhost:8080\/nyc-movie-locations.html.\u00a0<\/a>We\u2019ll use the Chrome browser\u2019s debug mode to help us explore the data in the XML file (or other data source) and this in turn will help us see how the data is structured as well as help us extract the information we need to create our map. Most browsers include developer console features similar to the example shown here, but the specific commands and display details may differ.<\/p><p>In Chrome, press F12 to enter debug mode, then select the Console tab of the Chrome debugger. Refresh the page and look for an entry in the Console called #document; it should look like this:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48943712797_427fc12809_o.png\" alt=\"blog-4\" \/><\/p><p>This is the XML data we\u2019ve just read and now logged to the console. Click on the &gt; symbol left of #document to expand the dump of this XML data source.<\/p><p>The debugger allows us to drill down through the various elements of the XML file to explore the structure and find our data points. The first sections contain styles, column names, and then later the actual data we wish to use.<\/p><p>After you expand #document further sections appear. Expand Worksheet where it has the attribute ss_Name=\u201dFull Map List\u201d; this corresponds to the first worksheet tab in Excel.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48943521721_9f4a816e60_o.png\" alt=\"blog-5\" \/><\/p><p>Expand the Table element, then scroll down past the Column elements to the Row elements, expand the third Row element, then expand the first Cell element and finally expand the Data element inside:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48943712637_897fe848f2_o.png\" alt=\"blog-6\" \/><\/p><p>Right click the Data element and navigate through Chrome\u2019s debug menu to<span style=\"font-weight: bolder;\">\u00a0Copy &gt; Copy Selector:<\/span><\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48943969187_77cbccbb26_o.png\" alt=\"Blog-8\" \/><\/p><p>This is a quick way to generate the code needed to extract a particular piece of data from inside an XML document.<\/p><p>In the case above, the first movie title given by the selector is:<\/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-7bf1841 elementor-widget elementor-widget-code-highlight\" data-id=\"7bf1841\" 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>Workbook > Worksheet:nth-child(5) > Table > Row:nth-child(22) > Cell:nth-child(1) > Data<\/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-6c6a990 elementor-widget elementor-widget-text-editor\" data-id=\"6c6a990\" 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>Although the process of discovering the location of your data would be easier with good documentation or a data source you have created yourself, even moderately complex XML data such as this data set can be navigated with very little effort.<\/p><h2>Geocoding Address Data<\/h2><p>Now what about the third tab of the spreadsheet that was missing latitude and longitude data?<\/p><p>Geocoding allows us to take an address (street number, street name, and so on), or simply a place name and country, and then find the latitude and longitude of that location. Obviously, you will have better quality results if you can access a more complete address, but fortunately the\u00a0<a href=\"https:\/\/developer.tomtom.com\/search-api\/search-api-documentation-geocoding\/geocode\">TomTom Search API Geocoding<\/a>\u00a0endpoint is very forgiving of partial addresses and even poor typing.<\/p><p>For our NYC Film Locations application, the third tab has no latitude and longitude data. Instead, most rows have a mixture of filming locations, borough, and neighborhood entries. The third tab\u2019s column ordering is a little different from the first, so we\u2019ll use a simple lookup table, stored in an array, to vary which spreadsheet columns are copied into our final data depending on the spreadsheet tab being read at the time.<\/p><p>Here\u2019s an excerpt of the code responsible for geocoding data. If we are reading data from the third tab, then we\u2019ll build up a text string of the location, using as much address information as we can. We call the\u00a0<a href=\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\">TomTom<\/a>\u00a0search API Geocoding endpoint and, if we get the single result requested, we\u2019ll extract a latitude and longitude.<\/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-bde1c0d elementor-widget elementor-widget-code-highlight\" data-id=\"bde1c0d\" 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>if (tab==3){\r\n  \/\/ build a location to geocode\r\n  var loc = (Location_Display_Text + ' ' + Borough + ' ' + \r\n    Neighborhood).trim();\r\n  \/\/ don't try to geocode blank entries\r\n  if(loc!='') {\r\n    $.get( \"https:\/\/api.tomtom.com\/search\/2\/geocode\/\"+ loc.trim()+                          \".xml?typeahead=false&limit=1&countrySet=US&lat=40.7128&lon=-74.0060&radius=10000&topLeft=41%2C-174&btmRight=40%2C-73.5&key=\"+\r\n      yourKey, function(data,status){\r\n      \t  \/\/ only grab results when successful\r\n        if(status=='success'){\r\n          var results = data.querySelector(\r\n            \"response > summary > numResults\");\r\n          if (results != null && results.innerHTML == '1'){\r\n            LATITUDE = data.querySelector(\r\n              \"response > results > item > position > lat\").innerHTML;\r\n            LONGITUDE = data.querySelector(\r\n              \"response > results > item > position > lon\").innerHTML;\r\n            console.log(loc+' Geocoded result: '+LATITUDE+ ','+LONGITUDE);\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-6131b3b6 elementor-widget elementor-widget-text-editor\" data-id=\"6131b3b6\" 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;\">To see only geocoded data, just comment out the loop of data from the first tab and leave the loop around the data from the third tab.<\/span><br><\/pre>\n<h2>Conclusion<\/h2>\n<p>In this tutorial we\u2019ve found out how to analyze an XML data file as well as how to extract location data and other information from our data source. We also saw how to display this data as map-markers and popups on a map and how to geocode data when we are supplied with geographical coordinates.<\/p>\n<p>Where next? Try using these same techniques to map data for your company, community or other uses.<\/p>\n<p>You could also enhance your map to include a grand tour of selected New York Movie locations, complete with traffic flow and routing.&nbsp; Many features are demonstrated in the sample files included with Tom Tom Maps for SDK Web <a href=\"https:\/\/developer.tomtom.com\/maps-sdk-web-js\/downloads\">Standalone functional example<\/a> that you downloaded to build this application. Just look in the <strong>pagesexampleshtml<\/strong> folder of the unzipped files and you\u2019ll find dozens of functional samples full of great ideas.&nbsp; To get them running, just edit them and add a copy of your free API key.<\/p>\n<p><em>This article was originally published on <a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web\">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 tutorial we\u2019ll walk through an application that uses a public data set of film locations in New York City to display these locations and information about them on a map.<\/p>\n","protected":false},"author":3,"featured_media":6793,"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,270,318],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Visualizing Filming Locations with the TomTom Maps SDK for Web &#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\/visualizing-filming-locations-tomtom-maps-sdk-web\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visualizing Filming Locations with the TomTom Maps SDK for Web &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"In this tutorial we\u2019ll walk through an application that uses a public data set of film locations in New York City to display these locations and information about them on a map.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-09T15:31:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-24T18:59:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/70.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=\"13 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\/visualizing-filming-locations-tomtom-maps-sdk-web#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/visualizing-filming-locations-with-the-tomtom-maps-sdk-for-web\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Visualizing Filming Locations with the TomTom Maps SDK for Web\",\"datePublished\":\"2020-01-09T15:31:00+00:00\",\"dateModified\":\"2022-02-24T18:59:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/visualizing-filming-locations-with-the-tomtom-maps-sdk-for-web\/\"},\"wordCount\":1543,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/70.png\",\"keywords\":[\"HTML\",\"Mapping\",\"XML\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/visualizing-filming-locations-with-the-tomtom-maps-sdk-for-web\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web\",\"name\":\"Visualizing Filming Locations with the TomTom Maps SDK for Web &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/70.png\",\"datePublished\":\"2020-01-09T15:31:00+00:00\",\"dateModified\":\"2022-02-24T18:59:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/70.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/70.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visualizing Filming Locations with the TomTom Maps SDK for Web\"}]},{\"@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":"Visualizing Filming Locations with the TomTom Maps SDK for Web &#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\/visualizing-filming-locations-tomtom-maps-sdk-web","og_locale":"en_US","og_type":"article","og_title":"Visualizing Filming Locations with the TomTom Maps SDK for Web &#183; Technical Content Marketing | ContentLab","og_description":"In this tutorial we\u2019ll walk through an application that uses a public data set of film locations in New York City to display these locations and information about them on a map.","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2020-01-09T15:31:00+00:00","article_modified_time":"2022-02-24T18:59:30+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/70.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":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#article","isPartOf":{"@id":"https:\/\/contentlab.com\/visualizing-filming-locations-with-the-tomtom-maps-sdk-for-web\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Visualizing Filming Locations with the TomTom Maps SDK for Web","datePublished":"2020-01-09T15:31:00+00:00","dateModified":"2022-02-24T18:59:30+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/visualizing-filming-locations-with-the-tomtom-maps-sdk-for-web\/"},"wordCount":1543,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/70.png","keywords":["HTML","Mapping","XML"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/visualizing-filming-locations-with-the-tomtom-maps-sdk-for-web\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web","name":"Visualizing Filming Locations with the TomTom Maps SDK for Web &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/70.png","datePublished":"2020-01-09T15:31:00+00:00","dateModified":"2022-02-24T18:59:30+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/70.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/70.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/visualizing-filming-locations-tomtom-maps-sdk-web#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Visualizing Filming Locations with the TomTom Maps SDK for Web"}]},{"@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\/70.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2976"}],"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=2976"}],"version-history":[{"count":5,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2976\/revisions"}],"predecessor-version":[{"id":5864,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2976\/revisions\/5864"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/6793"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2976"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}