Tutorial: How to Use Namara Data in Mapbox
Mapbox is a powerful open source platform that allows users to generate maps displaying exactly what they want, and none of what they don’t. It’s easy, powerful, and robust — it reminds us of Namara that way. If you do any geospatial data visualization, you probably already know and love Mapbox.
What you might not know is how easy it is to use Mapbox to visualize your Namara data.
STEP 1: Get the Data
Geospatial data is your friend here, so start by finding yourself a data set that includes latitude and longitude. We’ll take a pretty basic data set for simplicity’s sake in the example: Farmers’ Markets in Ontario, Canada. I’ll use Namara to give me only the columns I want — the market name, latitude, and longitude. From there, I’ll select ‘prepare the filtered data set’ in the Download tab. This generates the data set limited to only the selected columns. Namara will show a notification when the data is prepared and ready for download.
STEP 2: Think Inside the Box
Once the data set is downloaded, head over to Mapbox. Once you’re there, create an account (or sign in if you’re already a user) and from the Dashboard, click Studio near the top right. Just below that, you’ll see Styles, Tilesets, and Datasets. You’ll actually work in reverse order — click Datasets first and upload the data set from Namara. Once complete, you have the opportunity to edit the data set if necessary, but since we filtered it earlier, our data is showing exactly the way we want. We can get straight to the next step by clicking ‘Export to tileset’ from the right side menu.
STEP 3: Getting on the Map
Clicking on the Styles tab beside Tilesets and Datasets, you’ll get the option to ‘Create a style.’ Here’s an opportunity to get creative. There are many, many styling options, and you can personalize your map however you like. For the purposes of this demo we’ll stay with something pretty basic. I’ve chosen the first theme, Streets. The first thing you should do is centre and zoom the map on a location that suits the data you’re presenting. That way you’ll see what you’re working with as soon as it’s imported.
Next, import the tileset containing your data. Click ‘Add layer’ in the upper-left corner. The drawer that opens has a section for Source which says ‘No tileset, click to select’ — find the tileset you created in step 2, then click ‘Create layer.’ Your data should be visible on the map! Click ‘Publish’ and you’re ready for the next step.
STEP 4: Going Places
Now that you’ve got a map with data points represented on it, it’s time to use Mapbox GL to put it to use. Mapbox has very clear documentation for this step. Basically, include the necessary JS and CSS in your HTML <head>. Then copy the following code block into the <body>:
<div id=’map’ style=’width: 400px; height: 300px;’></div>
<script>
mapboxgl.accessToken = ‘[Your API Key]’;
var map = new mapboxgl.Map({
container: ‘map’,
style: ‘mapbox://styles/mapbox/streets-v9’
});
</script>
On the Styles page in Mapbox, each style you’ve created has a ‘Share & use’ button. Selecting that will bring up a dialog box with Share or Use at the top. Under use, you’ll find your access token and a unique style URL — replace those with the values in the example code above, and your map should be right in front of you.
Wrapping Up
As you can see, it’s easy to get data showing on a map — but Mapbox’s abilities reach much farther than simple plotting. Their documentation explores everything in minute detail, and their tutorials are great for getting a handle on specific manipulations and tricks. Watch for another post from us soon demonstrating how to get Namara data on Mapbox through our API.
Namara’s capabilities are broad, too. We integrate easily with Tableau, Salesforce, and almost anything in between. Dive into our blog posts, or reach out to find out how Namara can make your life easier.
