Book Image

Mapbox Cookbook

By : Bill Kastanakis, Vasileios Kastanakis
Book Image

Mapbox Cookbook

By: Bill Kastanakis, Vasileios Kastanakis

Overview of this book

Maps are an essential element in today’s location aware applications. Right from displaying earth surface information to creating thematic maps displaying plethora of information, most of the developers lack the necessary knowledge to create customizable maps with combination of various tools and libraries. The MapBox platform is one such platform which offers all the tools and API required to create and publish a totally customizable map. Starting with building your first map with the online MapBox Editor, we will take you all the way to building advanced web and mobile applications with totally customizable map styles. Through the course of chapters we’ll learn CartoCSS styling language and understand the various components of MapBox platform and their corresponding JavaScript API. In the initial few chapters we will dive deeper into the TileMill and MapBox Studio components of MapBox and use them to generate custom styled map tiles and vector maps. Furthermore, we will publish these custom maps using PHP, node.js and third party tools like Geoserver. We’ll also learn to create different visualizations and map styles like a choropleth map, a heat map and add user interactivity using a UFTGrid. Moving on, we dive into advanced concepts and focus on integration with third party services like Foursquare, Google FusionTables, CartoDB, and Torque to help you populate and even animate your maps. In the final chapter we’ll learn to use the Mapbox SDK to create and publish interactive maps for the iOS platform. By the end of this book, you will learn about MapBox GL and how to create a fully functional, location-aware mobile app, using the maps styles created in the recipes.
Table of Contents (13 chapters)
Mapbox Cookbook
About the Author
About the Reviewer

Publishing your map

Now that we have created our own map and added the features we wanted, it's time to show it to the world.

In this recipe, we will learn how to publish our maps.

Getting ready

At this point, we have beautifully styled our map using Mapbox Editor and we have learned how to create data from scratch or import it. Now it's time for the world to see what we have created.

Before publishing your map, it's wise to have an overview of some settings that may be useful:

  • Under Project | Settings, you can select the name of your project and its description

  • Under Project | Advanced, you can set and save the current map position

Mapbox Editor offers various options for sharing our map. If you have created markers, lines, or polygons, or imported any data, you will be presented with an option to download them as GeoJSON or KML. You can use these files to overlay the data on a map using JavaScript or other APIs. We will take a look at how to do this in the next few chapters.

How to do it…

In order to share a Mapbox-hosted map, you will need to use the URL provided by Mapbox to directly share your map. Before doing this, however, in order to share it you need to first save the map:

  1. Click on Save.

  2. Copy the clipboard copy icon next to the Share textbox.

  3. The URL will now be copied to the clipboard. Paste the link anywhere you want for the world to see:


    The Map ID is used by Mapbox APIs to get access to this specific map. We will see how we can use it in the next few chapters.


Downloading the example code

You can download the code files by following these steps:

  • Log in or register to our website using your e-mail address and password.

  • Hover the mouse pointer on the SUPPORT tab at the top.

  • Click on Code Downloads & Errata.

  • Enter the name of the book in the Search box.

  • Select the book for which you're looking to download the code files.

  • Choose from the drop-down menu where you purchased this book from.

  • Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR / 7-Zip for Windows

  • Zipeg / iZip / UnRarX for Mac

  • 7-Zip / PeaZip for Linux

There's more…

Embedding a map in a self-hosted page

If you have a self-hosted website, the easiest option is to share your map using IFrames. You can also share to Wordpress, Tumblr, Drupal, and other platforms that support IFrames (usually via plugins).

Mapbox Editor already provides the code to embed the map into HTML.

Below the embedded textbox there are checkboxes. These allow us to limit user interaction in the embedded map. For example, you can disable pan and zoom, scroll wheel...., and geocoding, which disables the magnifier icon that allows us to search for addresses and links.

The code generated in the embed tag looks similar to this:

<iframe width='100%' height='500px' frameBorder='0' src=',zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1Ijoibmltcm9kNyIsImEiOiJkNkw1WWRnIn0.pnQn9P2nbHyhKf2FY_XJog'></iframe>

Notice the width and height parameters. We can modify these to specify the size that will work best with our design. You can explicitly set the width or height to a specific pixel value or set a percentage.

Notice the frameBorder option. This generates a border around the IFrame to separate the embedded map from the content of the webpage.

For this example, we will use a basic HTML file that contains boilerplate HTML code and some extra elements. We will embed the map into HTML using IFrames.


From this point on, we will need to edit files and write code, usually HTML and JavaScript, and we will need an editor to do so. While a simple plain text editor, such as notepad on Windows and TextEdit on Mac, can do the job, it's highly recommended that you use a specialized application for this purpose, such as Sublime Text, which is available for Windows, Mac, and Linux. It can make our task a lot easier with syntax highlighting.

Before we begin editing HTML, double–click on the chapter-1/example-1-begin/index.html file, and it will open in your default browser. You will see our HTML page, which contains some basic HTML elements such as <h1> and <divs> tags. Embed our map under the <h3>Earthquakes in Iceland:</h3> element through the following steps:

  1. Open the chapter-1/example-1-begin/index.html file with a text editor.

  2. Copy the code contained within the embedded tag.

  3. Adjust the width and height if needed, and add a frame border if you wish.

  4. Directly under <h3>Our Location</h3>, paste the code we copied before.

  5. Save the file.

That's it. We have successfully embedded a map into a custom HTML page using the sharing feature of Mapbox Editor and IFrames. Now, it's time to discuss what we created. We need to open the file in a browser by either dragging the index.html file on a browser or double-clicking on it (this behavior may be overwritten by your HTML editor):