How to use Namara and Mapbox GL

Written by Jordan Bibla

January 24, 2017
Mapbox’s new javascript library Mapbox GL leverages WebGL for significantly faster and smoother mapping experiences. Mapbox GL relieves some of the load from the server by using the client to render tiles and geospatial features. It’s also entirely open source.
At Namara, we recently made the switch from Mapbox JS to Mapbox GL and we couldn’t be happier. We needed a mapping platform that could handle geospatial data at any size and with any level of complexity. On Namara, we have over 32,000 geospatial data sets ranging from 1 row to over 5.2 million.

The Namara API will only return 250 points at a time, but this 42 row data set is full of big polygons — and is 31 megabytes as a GeoJson file. Still, no match for Mapbox GL.

Let’s get started.

To begin, open a fresh new HTML file and paste in this code block.

Save this file and open it in your browser. If you’ve put your Mapbox access token in the right place — you should see a small map of the world.

If you don’t have a Mapbox access token — make one by signing up for Mapbox Studio!

© Mapbox

Next, head over to Namara to find a cool geospatial data set. For the purpose of this example I picked Ontario: Farmers’ Markets. Search for open or premium data, click on the API Tab, and locate the API endpoint as seen below.

Copy the API endpoint link and head over to your map.html file and add the following block of code — map.on('load', function () { ... } Note that the data: property contains the API endpoint link.

Now your map.html file should look like this one below…

Remember to replace <YOUR_MAPBOX_ACCESS_TOKEN> and <YOUR_PROJECT_API_KEY> with your actual Mapbox access token and a Namara project API key.

Head over to the browser and click refresh. Voila!

Check out our post on Namara and Mapbox’s data set editor here.

Happy Mapping!