Mapbox Cookbook

Mapbox Cookbook

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.

Mapbox Cookbook

Credits

About the Author

About the Reviewer

www.PacktPub.com

Preface

Free Chapter

Introduction to Mapbox

Introduction

Creating your own map

Adding vector data

Publishing your map

Mapbox Services

Introduction

Accessing styled tiles on your map

Creating static images

Finding coordinates for an address

Finding an address from coordinates

Finding an address on a map click

Getting directions

TileMill and Mapbox Studio

Introduction

Styling a map with TileMill

Styling a map with Mapbox Studio

Publishing your base map on your server with PHP

Publishing your base map on your server with Node.js

Mapbox.js

Introduction

Creating a simple map

Changing map properties programmatically

Working with base layers

Adding markers and popups

Clustering markers to improve our map

Getting mouse coordinates

Working with controls

Adding interactivity to your map with UTFGrid

Creating a choropleth map

Creating a heat map

Mapbox.js Advanced

Introduction

Adding external data to your map

Adding a time dimension to your map

Comparing two maps at the same time

Adding a WMS layer from GeoServer to your map

Adding ArcGIS layers from a server or from online

Adding Fusion Tables to your map

Adding Foursquare data to your map

Mapbox GL

Introduction

Integrating your project with Mapbox GL

Creating a basic map using Mapbox GL

Switching between locations programmatically

Adding markers to the map

Switching map styles

Loading GeoJSON and drawing a polyline

Drawing polygons on the map

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Adding interactivity to your map with UTFGrid

In this recipe, we will create an interactive map using UTFGrid. The benefit of using UTFGrid instead of markers is that UTFGrids can handle a lot more data than it is possible to handle otherwise.

If your map needs to interact with several thousands of bits of data, it is no longer viable to fetch this data in a single pass, then cache it in the browser, and generate markers from it. It's inefficient performance-wise, but luckily, UTFGrid comes to the rescue in such extreme cases.

How to do it…

The steps to be performed are as follows:

Create a map with TileMill. Use the templates section of TileMill to add interactivity to the map.
Upload the map to Mapbox (or host it in your own server).
Create L.mapbox.gridLayer and pass the Map ID.
Then use the map.on('click', onClickCallback) handler to generate a popup when a user clicks on a gridLayer.

Creating an interactive map using TileMill

Fire up TileMill. We will use it to create our interactive map. Perform...

Mapbox Cookbook

Mapbox Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

Mapbox Cookbook

Adding interactivity to your map with UTFGrid

How to do it…

Creating an interactive map using TileMill