How to Incorporate ArcGIS Data into TomTom Maps
&w=256&q=90)
It's easy to use ArcGIS data in your own applications. We'll convert a public dataset into GeoJSON, then plot it in a TomTom Maps SDK for Web map.
ArcGIS is a geographic information system maintained by the Environmental Systems Research Institute (ESRI). Since its initial release in the late 1990s, ArcGIS has been widely adopted across public and private industries as a tool and repository for not just map and geographic data, but also a wide range of datasets ranging from healthcare to research to municipal services.
ArcGIS leverages authoritative sources from partners, providers, and its vast community contributors. While ArcGIS looks to proprietary data formats first, users can visualize pre-created maps and overlays online. The good news is that a lot of ArcGIS data is available through the repository or public APIs so users can use it in their own applications.
In this article, we'll cover a simple approach to rendering publicly-available ArcGIS GeoJSON data on a browser-based TomTom map.
Getting Started
The ArcGIS Hub contains a robust catalog of published apps. Users can view and interact with community apps and even use the data in their own applications. Be careful to note whether a dataset has any licenses restricting its use.
Navigate to https://hub.arcgis.com/ and enter a search term to get a feel for some of the apps available in the network. For example, "NYC Covid".
For our purposes, we're narrowing our search results to only include feature layers. In the Filters menu on the left side of the results page, under Content Type, check the Feature Layer option.
The first dataset we found in the search result entitled NYC Covid looks promising. It is compiled by NYC Health and is regularly updated.
Open the NYC Covid Overview and let's explore the dataset's headers a little bit.
The first thing we see is a simple visualization of the coordinates in the dataset. Note that this dataset will contain a number of polygons representing NYC neighborhoods, as opposed to coordinate points.
Below this, we see a quick description of the dataset and its original source. Notice the bolded text above this paragraph saying, "No license specified." In this case, we are free to reproduce this dataset, but keep in mind that this may not be the case for every dataset available on the ArcGIS Hub.
Below the description, we see a list of attributes. Note their data type and start thinking about ways we might visualize this data on a map.
For a straightforward and useful example, let's shade neighborhoods by their percentage of positive tests (PcntPosTes).
Now that we've found our dataset and have a rough idea of what we want to do with it, let's grab the data we need and plot it on a map. To get the data, click the APIs drop down in the upper-right of the screen and copy the GeoJSON endpoint.
Placing GeoJSON in a JavaScript Object
To render the GeoJSON code, start by opening your favorite text editor and copying the HTML below into a new file. Name it whatever you'd like. I called mine index.html and stored it in a folder called "TomTom".
We need to include two TomTom libraries — a CSS stylesheet and a JavaScript file, both named maps-sdk-for-web. We'll use TomTom's content delivery network (CDN) for this.
Give your body tag full width and height, and add drop padding and margins, to produce a nice, full view.
Note the <div id="map"> tag: this element will contain your map.
<html>
<head>
<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.64.0/maps/maps.css'>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.64.0/maps/maps-web.min.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0; padding: 0;">
<div id="map" style="width: 100%; height: 100%;"></div>
<script></script>
</body>
</html>Next, let's make a request to the ArcGIS endpoint we copied earlier, parse the GeoJSON, and store the GeoJSON in a JavaScript object. To do this, first paste the JavaScript below into the <script> tag.
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "https://opendata.arcgis.com/datasets/5f4d6320203149d89fa451181075d850_0.geojson", false);
xmlhttp.send();
var geoJSON = JSON.parse(xmlhttp.responseText);Create a new XMLHttpRequest object.
Use the XMLHttpRequest to make a "GET" request to the endpoint synchronously (only on load). Setting this to “true” would enable asynchronous requests, but is unnecessary for our example.
After sending the request, parse the xmlhttp.responseText as JSON.
Setting Up a TomTom Map
Now that we have placed the GeoJSON in a JavaScript object, let's set up a TomTom map.
If you don't already have a free API key, get one from TomTom before moving on.
Once you have your key, let's initialize the map with tt.map. We won't go into too much detail on this since the process is already well-documented.
Copy the JavaScript below and paste it into the <script> tag immediately following the last snippet. Don't forget to paste in your key.
var map = tt.map({
key: '<your-tomtom-API-Key>',
container: "map",
source:"vector",
style:"tomtom://vector/1/basic-main",
center:[ -73.992062444824199, 40.725650259406201 ],
minZoom:10
});container references your <div> with the "map" id.
center is the point of focus of the map once it is rendered. For brevity, I manually selected a point near the center of the shape, though these coordinates could be easily computed.
minZoom is a value between 0 and 22. For example, a minZoom set to 0 would render the map zoomed out to an initial view of the entire world.
Populating the Map
All that's left is to populate the map with the GeoJSON data. Paste the rest of the JavaScript into the <script> tag, following the last snippet, and we'll review the important parts of this snippet.
map.on('load',function(){
maxPos = Math.max.apply(Math, geoJSON['features'].map(function(o) {
return o['properties']['PcntPosTes'];}))
for (var row = 0; row < geoJSON['features'].length; row++) {
var traceId = "trace"+geoJSON['features'][row]["properties"]["FID"];
map.addLayer({
'id': traceId,
'type': 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': geoJSON['features'][row]["geometry"]
}
},
'paint': {
'fill-color': '#FF0000',
'fill-opacity': geoJSON['features'][row]['properties']
['PcntPosTes']/maxPos,
'fill-outline-color':'#000'
}
})
}
});First, we ensure the map is loaded before populating it.
maxPos returns the maximum value of "PcntPosTes" to create an upper bound for the layer's fill opacity. This layer's opacity will be set to 100%, allowing us to normalize the rest of the array.
Iterate the geoJSON features array, row by row, and create a unique id using the "FID" property — an integer.
GeoJSON polygons are nested arrays of coordinates: [['lng','lat'],]. Note that longitude comes before latitude in GeoJSON syntax.
The fill-opacity property divides each "PcntPosTes" (percentage of positive tests) by the maximum value (computed earlier) to normalize the array and create a rank order, descending from an opacity of 100%.
That's it for the code. All that's left to do is test!
Testing the Code
Launch a terminal and change to the folder containing your file. If you already have an HTTP server, launch it now. If not, install a lightweight HTTP server using your favourite package manager.
I launched Python's built-in http.server on port 80 with the following command:
$ sudo python3 -m http.server 80
Serving HTTP on 0.0.0.0 port 80 (http://0.0.0.0:80/) ...Navigate to http://0.0.0.0:80/ (or whatever your HTTP server uses as localhost) and you should see your map render and populate. Looking good!
As you can see, we were able to easily recreate the neighborhood-level data visualization shown on the data source web page, but in our own map, with the added detail of highlighting the percentage of positive tests by fill values.
Next Steps
In just a few lines of code, we requested GeoJSON data from ArcGIS and rendered it in a fully-customizable map. We did it all in a single file without any dependencies aside from the lightweight TomTom software development kit (SDK) via the CDN.
Some ideas for extending this starter project include adding neighborhood markers and legends. Another worthwhile endeavor would be to add new layers exploring the relationship between COVID-19 test result ratios, environmental data, or other external factors, using open data from the ArcGIS Hub. Explore TomTom’s Maps SDK For Web documentation to see the many ways makers like you can create and customize your own maps.
ArcGIS's massive catalog, combined with easily-customized visualizations powered by TomTom, provides unlimited opportunity for new geospatial insight. Register for a TomTom developer account today to boost your maps and gain deeper insight.