mapbox

There may come a time when you want to put a map on a website. There are many ways to do this, and what you choose will depend on your needs. In this chapter and the next, we will look at a couple of popular options for preparing a web map.

The trade-off is always going to be simplicity vs. functionality. The method we will learn in this chapter is simple, but offers limited control over how you can display your map. TileMill, the software we will learn in the next chapter, is incredibly powerful, but takes longer to master.

Web Map Principles

The fundamental principle of a web map is tiles. We will talk about tiles a lot in these chapters, so it's best to understand what it means. A "slippy" web map is created by many map images that are all 256x256 pixels and stitched together.

These map tiles are created in different zoom levels. Each zoom level covers a different scale of the map. This is what allows users to zoom in and out. When a user pans the map, the zoom level remains the same, but new tiles are loaded to give the illusion of seamless panning.

This tile-based system of web maps is called a TMS, or Tile Map Service.

There are several ways to host tiles online, but the easiest way is to use an online hosting service like MapBox. This is a service in which you can create an account, upload your tiles, and easily embed maps into your website. In this chapter, we’ll learn how to get started with MapBox and how to easily embed our maps on webpage.

Using MapBox

MapBox is a platform designed to make it as easy as possible to design and display custom maps on your website.

• To get started with MapBox, visit http://mapbox.com/ and click “Sign Up.” There are different pricing options you can select when signing up for MapBox - the more you spend the more storage space and map views you are allowed. For now, go ahead and sign up for a free account, which comes with more than enough to get started.

• Note that with an account you agree to “grant MapBox a non-exclusive, worldwide, royalty-free, transferable right and license (with the right to sublicense), to use, copy, cache, publish, display, distribute, modify, create derivative works, and store such Subscriber Content and to allow others to do so (“Content License”) in order to provide the Services” (Terms of Service). You may not wish to use data that is private and/or sensitive.

• Once you have signed up you will need to confirm your account by clicking the link that MapBox emails to you. Then you will be able to create maps.

• Once you’ve logged in, click “New Map” to create a map.

• This creates a new project in which you can edit the styles of the

  map.

• Zoom in to an area of interest and adjust the settings on the left

  panel. You can change the colors of streets, areas, water and land

  by clicking on the color settings next to each item.

• Play around with the controls on the left. If you move to the “Info” tab, you can edit some of the settings of your map.

• If you move to the markers tab, you can create markers on your map to identify specific locations. To add a marker to the map click “Place” and click on the map.

• Notice that each time you edit a setting, the map image on the left

  reloads to reflect your changes. For detailed help on the map

  styling, you can visit the MapBox help at

  http://mapbox.com/help/#creating_a_new_map.

• You can save your map by clicking the “Save” button.

Adding the Map to Your Site

• To embed the map in your website, you can get an embeddable link by clicking

  on “Embed.” When you copy and paste the html into your website, the map you have

  saved here will be shown in a window on your site.

If you have a website built on a common CMS, there may be a MapBox plugin that will easily allow you to add maps to your site.

MapBox on WordPress

Putting your map into your website is easy with Wordpress. Simply find the MapBox plugin and install it. The plugin can be found at http://wordpress.org/extend/plugins/mapbox/.

This plugin will allow you to copy the embedding html into WordPress and allow you to easily add maps to your posts.

MapBox on Drupal

To add MapBox maps to Drupal posts, you can paste the embed code directly in. However, be sure to look for the editing format “Full HTML” or “Extended HTML,” because otherwise Drupal may not allow you to use <iframe> tags. Go tohttp://mapbox.com/help/#embedding_on_drupal for more information.

Summary

Here we've seen a simple way to customize a map and embed it on your website. In the next chapter we will look at Tilemill, a powerful desktop application that allows you to add complex styles to your maps.