Published on GEOG 865: Cloud GIS (https://www.e-education.psu.edu/geog865)

Home > Lessons > Lesson 5: Map design and vector tile services using Mapbox

Lesson 5: Map design and vector tile services using Mapbox

Overview

This lesson marks a shift in the course where we will move away from talking about ArcGIS Server running on Amazon EC2 infrastructure and begin discussing various online software as a service (SaaS) options that enable GIS in the cloud. We'll begin by exploring services offered by the company Mapbox. You'll have a chance to restyle some online basemaps and see how these new styles can take effect immediately using vector tiles. You'll also learn how to create and load data into Mapbox for thematic mapping.

Before you begin this lesson, please make sure that all your Cloud Builder sites and all your Amazon EC2 instances are stopped. You wouldn't want to leave them running and accruing charges during the next few weeks while we are working with other technology.

Lesson Objectives

At the successful completion of this lesson you should be able to:

  • list some advantages and disadvantages of the software as a service (SaaS) cloud computing model for GIS;
  • give examples of SaaS providers for GIS and mapping;
  • use services offered by the company Mapbox for basemap design and thematic mapping;
  • embed maps from Mapbox in a web page;
  • explain the advantages and disadvantages of vector tiles and their differences from the rasterized tiles you created with ArcGIS Server.

Deliverables

  • Complete: L05: Assignment
  • Participate: L05: Discussion

Software as a service (SaaS) with mapping and GIS

In Lesson 1, you learned about the software as a service (SaaS) model of cloud computing. With SaaS, the end user doesn’t have to install, configure, or code anything: the software is accessed directly from the cloud, usually through a web browser. The cloud hardware itself is maintained or leased by the service provider, with all the details of the back end architecture hidden from the end user. In Lesson 1, you used Google Fusion Tables as an example of SaaS. Others include all Google Docs, Gmail, and the ArcGIS.com map viewer that you used in the previous lessons.

Although you may be accustomed to using free SaaS such as online email, there is also much SaaS that is sold through upfront or metered fees. In fact, the free SaaS that you encounter is usually a gateway to more services that are available on a subscription basis. For example, you’ve already seen a little bit about how the ArcGIS.com map viewer is free to use, but you’ve also seen that Esri has a for-purchase credit system used for other services (which you’ll learn about in a later lesson). In a similar fashion, Mapbox offers a free tier of services but requires a subscription for certain volumes or usages.

SaaS is gaining popularity in the GIS industry because it saves people the hassle of installing and administering complex software. This is a boon for industries that want to use maps and spatial processing, but may not have the hardware or personnel to fully deploy a GIS onsite. It also allows them to give GIS a trial or pilot run for a relatively low cost and setup effort.

Because SaaS runs in a web page and needs to be accessible on many devices, its design is also usually streamlined compared to more complex desktop GIS software interfaces. SaaS generally lowers the bar for getting started with GIS. It is an excellent way for beginners to learn GIS, mapping, and design techniques, although it should be kept in mind that the features offered by SaaS may be limited compared to locally installed software.

SaaS is also an attractive way to do GIS because certain elements of functionality can be purchased on an as-needed basis. For example, companies who need to host just one or two spatial datasets as web services can do so without having to spend lots of money upfront on their own GIS server. Organizations that use GIS SaaS should assess the cost of services on a periodic basis. If a company needs to host many datasets and perform constant data processing or geocomputation operations, the cost of SaaS may actually exceed the cost for an in-house GIS server. In other words, although SaaS is convenient, it may not always be the most economical option.

This lesson begins a series on SaaS GIS offerings. We’ll first learn about Mapbox and its services for web map design and delivery. Then we’ll look at services from Carto, which are focused primarily on thematic mapping and analysis. Finally, we’ll spend two lessons looking at ArcGIS Online, covering its web map assembly tools in more depth and exploring its geoprocessing services.

Mapbox services and vector tiles

Headquartered in Washington, DC, Mapbox is a company that provides location and mapping services such as online basemap hosting, geocoding, routing, image processing, and web mapping APIs. Mapbox is a young company, but it has made waves in the geospatial software industry by offering a unique blend of cloud technologies, map delivery and styling innovations, and open source utilities.

Mapbox markets itself as “a mapping platform for developers [1]”. It does not offer desktop-based GIS software; rather, its services seem to be aimed at journalists, full time web and mobile app developers, and organizations looking for an alternative to other cloud-based GIS products. Some of these might not have the equipment, funding, personnel, or business need to implement a full onsite GIS.

The vector data in Mapbox maps comes largely from OpenStreetMap [2], a free geographic database open to editing by anyone on the Internet. Mapbox did not invent OpenStreetMap, but it is one of the first companies to aggressively build a business model around the project. Using OpenStreetMap lowers the price point for Mapbox maps and increases the flexibility of the map (because you theoretically have some control over OpenStreetMap quality and content in your area of interest.) Because unintentional errors and vandalism do occur in OpenStreetMap, Mapbox uses employees and software tools to monitor incoming OpenStreetMap edits and improve the map. This investment offers benefits to both Mapbox and OpenStreetMap, although its effect on the community dynamics of the OpenStreetMap project is still beginning to be understood.

Mapbox mapping services rely heavily on a vector tile approach wherein packets of vector coordinates are sent to client devices to be drawn. The tiles use a pyramid motif similar to what you saw with the rasterized tiles you created with ArcGIS Server, but they contain vector coordinate information rather than images. An advantage of this approach is that vector tiles can be restyled quickly without having to re-make all the tiles, since the data is decoupled from the drawing rules. Vectors also facilitate visual effects for map rotation and zooming.

One disadvantage of vector tiles is that more computing logic is needed to display vector tiles than rasterized ones (since displaying an image is one of the most basic tasks a computer can do). Also, the symbol set and visual effects available with vector tiles may be more limited compared to what can be drawn with rasterized tiles. Finally, although it seems obvious, vector tiles can only display vectors; satellite imagery, shaded relief, and some field-based phenomena must still be drawn with rasterized tiles.

Mapbox has offered several cartographic products for designing map styles and making tiles. Their legacy TileMill tool created rasterized tiles with the aim of hosting them on Mapbox servers, although utilities existed for unpacking the tiles and hosting them on your own website (see in Geog 585: Open Web Mapping [3]). Their current tools are aimed toward creating vector tiles to be hosted on Mapbox servers.

Unlike ArcGIS Online, Mapbox does not offer web services for performing vector spatial operations such as buffering, intersections, etc.; instead, Mapbox created a free and open source JavaScript library called turf.js [4] that developers can use to perform these operations on the client side. As with many of Mapbox’s services, using turf.js requires some programming ability; but it comes with the benefit of not having to pay for a cloud service to perform these operations. Some kinds of batch operations, complex calculations, multi-step models, or large datasets may still be better suited for sending to a server.

Mapbox offers a light amount of usage for free, allowing us to experiment with their services. On the Mapbox [5] website, click Pricing and look over the plans. Then go ahead and sign up for a user name and move on to the next section of the lesson.

Creating a custom basemap with Mapbox

As you saw with ArcGIS Server, online base maps can have dozens of layers, with all kinds of rules about what zoom levels they are hidden and displayed; therefore, we’re not going to start from scratch. Instead, we’ll start with existing Mapbox basemaps (which are pretty well designed to begin with) and make small modifications to fit our taste.

First, please download the data for  Lesson 5 exercises [6]. After you download the data, unzip it.

We’ll start out simple by infusing some of our own data into one of the Mapbox basemaps. We’ll then view our creation in ArcMap, where you already know how to add more layers on top.

Suppose you’re examining nighttime safety in the Washington DC area. You want to understand where activities are occurring at night relative to existing street lighting. The “Dark” basemap offered by Mapbox looks appealing for your purposes, but you want to integrate a layer showing areas that are illuminated. You plan on eventually doing some visualization of street vendor activity, pedestrian patterns, crimes, and other happenings in relation to the street lighting.

For the best user experience, you should complete the following steps on a desktop computer (not a tablet or phone):

  1. Open a web browser to Mapbox.com [7], click Products > Studio, and click Get Started.
  2. If you haven't done so, make up a username, email address, and password, and click Create a Map in Studio after you log in.
  3. This takes you into Mapbox Studio. Following the model of most software as a service offerings, this tool runs directly within the web browser. It allows you to choose colors, text, and symbol weights to be used in a basemap. The base data is from OpenStreetMap, although you can also load in your own layers.
  4. On the Styles page, click the New Style button.
  5. Proceed to customize the the Dark variation of the Monochrome template.
  6. On the map editor page, click the pencil icon by the style name at the top (you need to hover over it to see it), and rename it to Street Lighting instead of the default name, Monochrome.
  7. Zoom your map into the central area of Washington DC.

    This map looks great, but wouldn’t it be nice if we could add the areas illuminated by street lights in a soft yellow glow? Let’s do that. First, we’ll need to upload our data.
  8. On the upper-left side of Mapbox Studio, click the Mapbox icon to return to the main Studio page, and then select the Tilesets menu.

    Tilesets are the vector tiles that Mapbox uses to encapsulate data displayed on the web. They’re very different from the rasterized tiles you worked with in ArcGIS Server. You can upload a vector dataset like a shapefile, and Mapbox will turn it into vector tiles, which it then hosts on its servers. You don’t ever really work with the tiles directly, but you can define styling rules to dictate how they should look. These styling rules can be changed on the fly because they are not “burned into” the tiles as they are with rasterized tiles.
  9. Click New Tileset, and upload the light_areas.zip shapefile included in this lesson. I derived this from a dataset of street light locations and wattage that I obtained from the Open Data DC [8] website. The lighted areas are just variable distance buffers based on a very unscientific mathematical formula (i.e., I made it up) based on the wattage of the light.
  10. When it's done loading, navigate back to your StreetLighting basemap, and click to open the Layers list in the left-hand pane.
  11. Click the Add New Layer button, and select your new lights layer as the Source.
  12. Be sure to click on the Type setting and select Fill.
  13. In the layer list on the left hand side, drag and drop your light-areas layer so that it is underneath all labels and boundaries.
  14. Click your light-areas layer, and modify its color to a bright yellow with an opacity of 0.5 and no antialiasing. This gives the street lights a soft glow.
  15. In the upper right of your screen, click the Publish style button, and confirm you want to do this by clicking Publish again (not Publish as new).
  16. Click the Share... button in the menu.
  17. Click Third Party, and copy the URL under WMTS.
    Remember from an earlier lesson a mention WMTS (web map tile service) which is an open alternative to an ArcGIS Server service for serving map data over the web via tiles. Mapbox exposes their basemaps using this specification, and we can use that endpoint (URL) to consume it in our local ArcGIS Pro maps.
  18. Open ArcGIS Pro (on your own computer or on your EC2 instance, if you have licensed it).
  19. Navigate to the Insert tab - Connections - Server - New WMTS Server.
  20. Paste the URL you copied from the Mapbox site and click OK.
  21. Open the Catalog pane in ArcGIS Pro and navigate to the Servers folder. You should see an entry for your Mapbox basemap.
  22. Add the layer to your current map and zoom into the Washington DC area and you will see your street light features on the dark Mapbox basemap, as you styled it on the Mapbox site. Hooray! You now have your Mapbox map as a basemap in ArcGIS Pro.
  23. Just for fun, add your sidewalk_vendors.shp shapefile (included with this lesson’s data) as a layer in ArcGIS Pro. I also obtained this from opendata.dc.gov. It contains the locations of registered street vendors in Washington DC.
  24. Style and label the street vendors in such a way that you can get an idea of which ones are surrounded by lots of lighting and which ones are in the darker areas.

To recap, you took an existing Mapbox-designed basemap and fused in some of your own data. You then brought this into ArcGIS Pro so you could work with it as a basemap. The next walkthrough will go beyond this, showing you how to modify the Mapbox design, create your own thematic data, and view your creations on the web.

Creating a data overlay with Mapbox

Now that you’ve gotten a feel for the Mapbox environment, let’s try something a little more complex that involves modifying the Mapbox style, creating thematic data from scratch, and viewing the result in a web browser environment rather than ArcMap.

Suppose you’re in charge of making a website to show the five best restaurants in your town (with you and only you as the judge). You want to make a map quickly that you can embed in a website, but since you’re somewhat of a picky cartographer, you want to have full control over the map style. Let’s do this with Mapbox, first designing a basemap, then adding data to represent the five restaurants of interest.

  1. In Mapbox Studio, click the Styles menu and create a New Style using the Outdoors template.
  2. Create a name for your style, such as Geog865Base.
  3. Zoom in to your state and click a green area (which represents forested or park land). Then select the layer name which will probably be something like: Landcover. An additional menu should appear allowing you to modify the style of this feature, including the color.

    You can modify the style of anything on the map by either clicking its layer name from the left hand list, or by clicking it on the map.
    You may need to click the Override button to make changes to layer symbology.
     
  4. Change the color of the greenspace to a slightly darker green.
  5. Experiment with changing the Land (background) color to a different shade of gray.
  6. Change the roads to be a darker gray color.
  7. Zoom all the way in and out of the map, looking at a mix of urban and rural areas. Make any other style tweaks that you think are aesthetically appealing. For example, you might want to change the color of water bodies or labels.

You’re done editing your basemap for now. You don’t have to save your work; Mapbox Studio has been doing this as you go along. Now let’s get the restaurants entered.

  1. On the upper-left side of Mapbox Studio, click the Mapbox icon to return to the main Studio page, and then select the Datasets menu.
  2. Click New Dataset.
  3. Enter the name Top Five Restaurants, and click Create.
  4. Zoom in to a place you know well (like your town), and click the upside-down teardrop icon to draw a point.
  5. Click the map at the location of your favorite restaurant. An orange dot should appear. (If you need help finding this, use another map for reference or change the Background style to one of the Mapbox satellite maps).

    You’ve added the coordinates of the restaurant, but now you need to add some attributes, or properties as they are called by Mapbox.
  6. In the left panel, click the Add Property button.

    We’re just going to make one simple property here called labeltext, which will hold the text we’ll use to label the restaurant.
  7. In the field box, type labeltext, and then in the value box, type the name of the restaurant.
  8. Add another field called rank, and type the rank of the restaurant. Start with 1, since this is your favorite restaurant.
  9. Repeat this process for four more restaurants that you know about. Make sure to add the labeltext and rank fields on each.
  10. Click the Save button to save your edits.

    So far, you’ve just created some raw geographic data that is stored on Mapbox servers. Even though it shows up as little blue dots on the editor screen, it isn’t associated with any styling information. Also, it’s not saved as vector data tiles yet. Mapbox uses these tiles to insert the data as a layer in a web map.
  11. Click the Export button to export your data to a tileset. You can call this tileset Top Five Restaurants just as you named the dataset.
  12. Wait a few minutes for the tileset to be created. You’ll know when it’s done because the Processing… message will go away, and the little whirligig icon will stop spinning.
  13. On the upper-left side of Mapbox Studio, click the Mapbox icon, and then select the Styles menu.
  14. Return to your Geog865Basemap style, and add your restaurants layer. This is where you can get your restaurants onto that custom basemap that you made.
  15. Look over the properties that are about to be applied to your layer in the basemap, but don’t change any of them. In particular, notice you could change the zoom levels where these restaurants show up. Since they are the main thematic layer in our map, let’s leave them visible at all scales.
  16. Zoom the map to your area of interest and notice that your restaurants now appear on the map as dots.

Next, you’ll apply your own style to the icons and add some labels. You’ll then preview your map in a web browser.

There are several ways you could symbolize these restaurant points. One way might be with a little icon in the form of a scalable vector graphics (SVG) file. Mapbox provides a nice set of these SVG icons called Maki.

Another way is to just use a basic marker like a circle. We’ll take this approach, but we’ll also add a label from some of the information we entered in the restaurant fields. The restaurant points and the labels will be treated as separate layers in the map. Follow these steps:

  1. Viewing your Geog865Basemap in Mapbox Studio, change the top-five-restaurants circle symbol to have a color and outline that is appealing to you.

    Now, you’ll create a layer to hold the text label.
  2. With the top-five-restaurants layer selected, click the Duplicate Layer icon, which looks like two overlapping squares. Rename this layer to top-five-restaurants-label (which you can do at the very top of the styling details panel where it reports the layer name).
  3. In the styling details panel of top-five-restaurants-label, click Select Data, and set the Type to Symbol.
  4. Now switch over to the Style panel, and set the Text field as (rank) & ". " & (labeltext). This will substitute in the values from your rank and labeltext fields so that your labels look like “1. Fidelina’s”, “2. Kabob House”, etc.  If this part doesn’t work, you may need to wait a bit longer for your tileset to update. Try logging out of Mapbox and logging back in a few minutes later.
  5. Click the Position menu, and set up your labels so they appear to the upper-right of the point, with an x offset of .5 em and a y offset of -.5 em, or whatever looks good to you. You should see the effects immediately once you set these properties.
  6. Zoom the map to an extent where your five restaurants can be seen.
  7. Make any further changes you want to make to your basemap in order to help the restaurants to stand out. For example, I lightened up my roads a bit.
  8. When the map looks the way you want, click the Publish style button. You can use the little swipe tool to see the differences between the original map and the one you modified. Then click Publish again to confirm (don’t click Publish As New).

    Now, let’s take a look at how this would appear in a web map. A simple way to preview the map is in Mapbox’s basic web viewer.
  9. Click Share... button.
  10. Under Share, copy the Share Preview URL and paste it into a brand new web browser. Take a look at the map you just made!

Embedding a Mapbox map in a web page

Mapbox is really geared toward developers, people who write code to embed maps in websites and apps. Websites are typically written in JavaScript, with the maps being embedded through special programming libraries (APIs) that offer functions for working with tiles, markers, etc. One of the more popular of these APIs is Leaflet. Follow the instructions below to make a real simple web page that embeds your Mapbox map via Leaflet.

  1. Create a brand new empty text file and save it on your computer as testmap.html. Make sure it doesn’t have a .txt extension. Don’t use a word processor like MS Word to make this file; use a real basic text editor like Windows Notepad.
  2. Open testmap.html and paste the following code. Don’t worry about what it all means. You will just need to modify two lines of this code to get your own Mapbox map to display inside:
<!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Leaflet + Mapbox test</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" type="text/css" crossorigin="">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js" crossorigin=""></script>
      <style>
        #mapid {
            width: 512px;
            height: 512px;
            border: 1px solid #ccc;
        }

        .leaflet-container {
            background: #fff;
        }
      </style>
       
        <script type="text/javascript">
          function init() {
            // create map and set center and zoom level
            var map = new L.map('mapid');
            map.setView([47.000,-120.554],13);
            
            var mapboxTileUrl = 'PASTE YOUR URL INSIDE THESE SINGLE QUOTES';
            
            L.tileLayer(mapboxTileUrl, {
                attribution: 'Background map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
            }).addTo(map);         
          }  
        </script>
      </head>
      <body onload="init()"> 
        <h1 id="title">Favorite restaurants</h1>
        <div id="mapid"></div>   
      </body>
    </html>
  1. In the Mapbox website, click the Share... button for your style. Navigate to the Third Party section and choose CARTO in the dropdown list (the CARTO specs should be compatible with Leaflet). Copy the integration URL.
  2. Paste the Leaflet URL in the line of code above that says PASTE YOUR URL INSIDE THESE SINGLE QUOTES.
  3. Find the line above that begins with map.setView and replace the latitude and longitude with the coordinates of the center of your town or area of interest you mapped. If you fail to do this, the map will show my hometown instead of yours. You should be able to see your lat and lon in the header bar in the Mapbox editor.
  4. Save the changes you made to testmap.html.
  5. From Windows Explorer or your file browser, double-click testmap.html to open it in a browser. You should see your Mapbox map inside. Note that you must be connected to the Internet for this step to work because the above code is configured to retrieve the Leaflet API online (rather than from your own machine).

This is a pretty basic example, but hopefully it helps you see how a map like this could be embedded anywhere in a web page by an able JavaScript developer. This could be a useful supplement to a blog, news article, corporate web page, etc.

Assignment: Put your own data into Mapbox

For your assignment this week, you’ll practice the things you did in the above walkthroughs, this time using your own data.

  1. Choose a GIS dataset that you’ve been thinking of using in your term project. Upload it into Mapbox as a tileset. If it’s a huge dataset, just clip out a sample for this part. Follow the procedure we used for the lighted areas.
  2. Create a new dataset in Mapbox and make some data from scratch to accompany the dataset you uploaded. This can be some real data that you want to incorporate in your term project, or a practice dataset that you disregard in later lessons. Follow the procedure we used for the restaurants.
  3. Select a Mapbox basemap, and make a few style modifications to suit your needs.
  4. Combine all three of the above layers and display them either in ArcGIS Pro or a web browser as we did in the walkthroughs. If you want to experiment with Mapbox GL, QGIS, or some other client API or app that we didn’t use in the walkthrough, that’s fine as well.
  5. Produce a written report of about 300 - 500 words describing the following:
    1. The datasets you selected to meet the above requirements
    2. The style adjustments you made to the existing Mapbox basemap, and why
    3. A screen capture of your final map from item 4 inside of a client app like ArcGIS Pro, a web browser, etc. Do not simply show the map inside the Mapbox Studio style editor. The layers from items 1 - 3 above and the client app itself must be visible.
    4. Any roadblocks you hit and how you got around them

Cloud Computing Discussion: Cloud security

Security is one of the biggest concerns for organizations considering using cloud computing. I have mixed feelings about this. On the one hand, giving up physical control is a big step. On the other hand, data is not 100% secure on-site either, and leading cloud providers have security teams that are second to none.

First, read the AWS Security Center website [9] and some of its subsidiary pages, especially this overview of Security Processes [10]. In the optional textbook, you can read The Cloud at Your Service chapter 4, Security and the Private Cloud.

Deliverables for this week's technology trend:

  1. Post a comment on this lesson's Canvas discussion forum that describes what you think of the security procedures described in the reading. Are they sufficient to give you more comfort about putting your data and applications in the cloud? What other security concerns should we keep in mind (that Amazon might have omitted either intentionally or unintentionally)? Feel free to post questions as well.
  2. Then I'd like you to offer additional insight, critique, a counter-example, or something else constructive in response to one of your colleagues' posts.
  3. Brownie points for linking to other technology demos, pictures, blog posts, etc., that you've found to enrich your posts so that we may all benefit.
  4. If there are concepts or vocabulary items that are not familiar to you -- don't suffer alone! Please post a question below. Posting a question is a form of participation, but doesn't take the place of your substantive post requested in step 1 above.


Source URL:https://www.e-education.psu.edu/geog865/node/321

Links
[1] https://www.mapbox.com/about/ [2] http://www.openstreetmap.org [3] https://www.e-education.psu.edu/geog585/node/705 [4] http://turfjs.org/ [5] http://www.mapbox.com [6] https://www.e-education.psu.edu/geog865/sites/www.e-education.psu.edu.geog865/files/data/mapbox_lesson_data.zip [7] https://www.mapbox.com/ [8] http://opendata.dc.gov [9] http://aws.amazon.com/security/ [10] https://docs.aws.amazon.com/whitepapers/latest/introduction-aws-security/introduction-aws-security.pdf