Getting Started with Dynamic Mapping on Mapbox GL and Arcadia Data

Published on March 4, 2019

By Austen Gee, Arcadia Data software engineer



Getting the Software and the Data

Creating Your Dashboard

Customizing Your Map Style

Viewing New Dimensions

Adding More Visuals

Adding Filters for Your Data


The goal of this article is to make an interactive map using Mapbox GL technology in our free Arcadia Instant product, available for unlimited desktop use (read on to learn how to get Arcadia Instant). We’ll use earthquake data from around the world as an example. This data could be used for multiple purposes; one might be for a construction company to determine the level of seismic protection to install in a given building. The techniques described in this article can apply to any use case that requires mapping geo-encoded data.

We will also make the map very flexible to view at various zoom levels for exploring the data at a closer scale.

Before we get started, I want to call out a couple of things about our mapping solution that you get as part of our Arcadia Enterprise product, but not in Arcadia Instant. First, Arcadia Enterprise scales well beyond other commercial mapping solutions so you can visualize maps with hundreds of thousands of geospatial boundaries. This gives you a level of granular segmentation in your maps that other solutions cannot support. Second, Arcadia Enterprise is fast, so you can support real-time data sources, and also change dimensions of your data on the fly and immediately get an updated view using that different dimension. For example, you might first look at residential income levels at a geographic level, but then switch to education levels to get a different dat view of the same boundaries. Many other mapping solutions require static data, so you can only view one dimension in your data.

Getting the Software and the Data

If you haven’t already downloaded Arcadia Instant, you can get it here for Mac or Windows. The installation is straightforward, but if you’d like a walkthrough, check out this article.

If you want to quickly jump to the preloaded data, click on the VISUALS tab in the Arcadia Instant menu bar.

Then click on the Earthquakes Around the World tile to get the prebuilt dashboard.

Click on the EDIT button to get into the dashboard’s edit mode. Then double-click on the map to start editing it. At this point, you can jump down to the Creating Your Dashboard section. where you can follow along to see how the map was created.

If you want to build the dashboard from scratch, then download this data of all earthquakes for the past month from the USGS data CSV download page (where you can download data from the past hour, past week, or past month). Once you have the CSV file downloaded, upload it to Arcadia Instant and create a dataset with the following steps:

  1. Click on the DATA tab in the Arcadia Instant menu bar.
  2. From the DATA page, click on the ADD DATA button.
  3. In the dialog box, select the USGS data file you just downloaded, then click on the GET DATA button.
  4. Now you’re on the import page. Keep the Database entry as main and change the Table Name to whatever you’d like. I used USGS_all_month as the table name that will store the data.
  5. Click the CONFIRM IMPORT button, and once again in the dialog box that appears.
  6. Now we need to create a dataset, which is the entity upon which we build visualizations. A dataset starts with a table that can optionally be joined with other tables. In this example, we just have the single table to analyze. In the current page (the DATA page), click on the NEW DATASET button.
  7. Type in the Dataset title, which is any name you give to this dataset. Here, I used USGS Earthquake Data. Keep the other default values, then click on the CREATE button.

Creating Your Dashboard

Now you have a dataset, and you can create a dashboard. Click on the dashboard icon, next to the name of your newly created dataset. It’s the icon that will say, New Dashboard, when you hover on it. You’ll now be on the Dashboard Designer page.

From here you can title the dashboard whatever you want. I titled mine, “Earthquake Dashboard.” Double click on the table on the page to open up the visual editor.

Inside the the visual editor click on the Interactive Map visual type.

Upon clicking on it a map should appear as follows:

We now have a map, but no data to go with it. We need to drag the fields we are interested in onto the appropriate shelves. First and foremost we need the geo data. Find the fields called latitude and longitude and drag them onto the Geo shelf and hit refresh. Boom. You should have a heatmap already and it should look similar to this:

We are already making great progress. This is a heatmap showing location density of every earthquake that has happened in the past month. Notice also those circles with numbers on them. That is a clustering of the data. Notice near Alaska there is a big cluster, indicating there are a lot of earthquakes in that area. Zoom in and you should see that the cluster bursts apart into lots of smaller bubbles until you get something like this (your map will look different from my version since your data was loaded at a different time):

Already you should have a sense of how smooth the map is, even though we have thousands of data points. There is no lag and the map zooms in and out and pans smoothly. (As mentioned earlier, this works even better with larger data sets on Arcadia Enterprise.)

Now you may have noticed a few issues. One is that the color scheme is maybe not great, another is the colors clash with the background of the map, and another might be that there is a banner at the top saying, Limiting display to 5000 rows. Let’s fix that first.

Go to Settings -> Data -> Maximum number of rows to fetch. There should be no issue with going far over the default limit of 5000. Put in 20000 as the limit as that should be more than the data we have (13,000 rows).

Customizing Your Map Style

Now let’s change the map’s style. Go to the Map Style tab in Settings. Notice in the Map Style setting there are multiple options, Choose whichever you think looks best. I personally like the Dark style as it makes the data stand out against the dark background. Satellite uses satellite imagery and also has a nice look.

Now for changing the colors of the data. Go to the Colors section on the right and pick a color you find appropriate. I thought one of the gradient color palettes with red was good to show the intensity of the earthquakes.

The map is coming together nicely. There is still a lot more we can do to make the map show what we want. Go back to the settings tab and let’s play with a few options. Let’s go to the Cluster tab.

Notice there are a few options. One is to change the color. It might make sense to change the color to something more in line with the color palette chosen, red in my case. The Radius setting adjusts how much area each circle represents. The lower the value the less the area and the more clusters will appear. The larger the value, the larger the area and the fewer clusters will appear. Personally I don’t want the cluster on this map, so I just unenabled it.

Next let’s go to the Heatmap section. You will notice several different options there as well.

Feel free to play with Intensity Magnification and Radius to change the look of the heatmap. I lowered the Radius to 10 and kept the intensity at 1000. The map now looks like this:

This is already looking much better. But I want to add some more. For reasons that will be apparent soon, let’s change the Visible Zoom Levels from “0-22” to “0-8” and then lets go to the Circles tab.

Check Enable Circles and you should get something like this:

As you hover over each circle you will get the latitude and longitude of each point, but there is so much data that it is hard to get anything useful as all the circles are on top of each other.

Viewing New Dimensions

Let’s make a few adjustments. The circles are not telling us anything new or unique. Let’s have them share some new data. Go back to the Data section and add a field of interest to you to the Measure and Color shelves. There are plenty of fields to choose from that could be interesting to visualize. I chose mag for magnitude on the Color shelf and depth on the Measure shelf. If you put them on and hit refresh you will get the following:

Notice this is an interesting map in itself. The circles are colored by the magnitude of the earthquake while they are sized by the depth of the earthquake. Notice that while there was a much greater density of quakes around Alaska, the magnitude and depth are larger in the Pacific region. While this map is interesting, it still has a lot data which can be overwhelming. Hover over Alaska and you will get tooltips, but there are so many as to make it difficult or impossible to look at individual earthquakes.

Let’s go back to the Circle tab in the Settings. I am going to add a Color Legend and change the Visible Zoom Level to “5-22.”

As you do this you will see that the map returns to the heatmap map from before. Now zoom in on some place of interest. Circles will appear marking each earthquake as you zoom into a further level. You can now tooltip over and get more information about that earthquake.

Now to create a dashboard to give us some more insights.

We need to make one small adjustment to the dataset. Click on DATA at the top of the page. From the DATA page click on the earthquake dataset you used to create the visual so far. From this page click on the Fields option on the left hand side of the page. Then on Edit Fields.

Once you have clicked on “Edit Fields” find the field named “place” go to the arrow dropdown menu on the side and click “clone”

Then go to the clone which will be called Copy of place and click Edit Field.

In the edit field modal change the name to Region or something similar.

All the other defaults should be fine. Go to the Expression tab and delete the default expression and replace it with the following:

substr([place], instr([place], ‘,’) + 1, length([place]))

If you click Validate Expression, you should get a green message pop up that says it is valid. Click APPLY and then SAVE in the fields page and we should be good to go. Go back to the dashboard we were creating. Click EDIT and then go to the Visuals tab on the right and click NEW VISUAL. This should put a new visual on the page with a table. Double click to edit the visual.

Adding More Visuals

It would be good to know what the average magnitude of the earthquakes is. Click on the KPI visual. Place the mag field on the Measure shelf. Notice that it defaults to sum(mag).

Sum is not really the aggregation we want as it does not give us a useful value. The average would be better. Click on the arrow by the field and a menu should open up to the right, click on Aggregate and choose Average.

Now click on REFRESH VISUAL and you will see something like the following:

This is good, but that is probably a lot more decimal points than we care to see. Open up the menu for the field again and click on Display Format. A modal should pop open as follows:

In the category dropdown, select Real Number.

Once selected you will have the option to choose the number of decimals to display. I felt like one decimal place was reasonable. I then clicked SAVE and refreshed the visual, giving something like this:

This looks good, but we should probably add a title. I called it Average Earthquake Magnitude. Next, save and close.

In the dashboard, I then created a another visual and again chose KPI visual type. This time I put Record Count on the Measure shelf and titled it Total Number of Earthquakes, then saved it.

Finally, I would like a visual to show the size of the top 10 largest earthquakes. In the dashboard I added one more visual and then opened it to edit this time I chose Bar visual. I then placed id field on the X Axis and mag on the Y Axis.

Now this is a lot of data because we have 13,000 different earthquakes so that is a lot of bars to see. Instead we would just like to look at the three largest. Click on the sum(mag) element on the Y Axis.

From here change the aggregate to Average and then click on Order and Top K. Next to Top K type in 10.

Now refresh the visual and you should get the following:

Add a title such as Top 10 Largest Magnitude Earthquakes save and close.

Now you should have a dashboard with four visuals: a map, two KPIs, and a bar chart. They are all the same size and evenly spaced. You can go ahead and change their size and move them around in a way that looks reasonable. Mine looks like this:

It could be that you want to adjust the width of the dashboard. In the sidebar go to Settings -> Dashboard Width and adjust the width, or if you want leave the field blank and the dashboard will adjust to the size of your browser window. Save the dashboard and refresh and the dashboard width should adjust.

Adding Filters for Your Data

Now we have a good dashboard where we can see the size of the 10 largest earthquakes, the total number of earthquakes, the average size of the earthquakes and where those earthquakes are located. Now what would be nice would be to able to filter this by region. If for example you are thinking of building in a certain country or state it would be nice to see what the seismic activity was like in the area. We will do just that.

On the sidebar click on Filters. You should see a list of fields from the dataset, including Region we created earlier. Click on it and a filter should appear on the top of the dashboard, like so:

Notice the dropdown box in the top left. We can now filter quickly by region. Save the dashboard and go to VIEW mode. Now go to the dropdown and click on a region you are interested in. I chose Utah. You should see the entire dashboard update to reflect only earthquakes that took place in Utah.

Notice that the all the visuals updated. I now only see Utah, as well as the total number of earthquakes that took place in Utah the past month (84) their average magnitude (1.4) and that the largest earthquake in Utah was just over magnitude 3 with the rest of the 10 largest being around magnitude 2. If I were planning on building in Utah this would give me a good idea of what kind of seismic activity to watch out for and expect.

Inside the dashboard you can adjust the filters from the drop down, undo and redo filters by using the arrows in the top right corner and interact with the visuals through hovering, tooltips and moving the map. Go ahead and explore some more, create more filters, and more visuals to get even more insights out of the data.