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

Finding an address on a map click

Now that we are learning to construct a GET request using Mapbox services, it's time to apply our knowledge in a real application.

We will use a simple JavaScript with Mapbox.js to make our lives easier. Don't worry about Mapbox.js; we have an entire chapter dedicated to it.

How to do it…

Perform the following steps for this:

  1. Inside the <script> tag, begin by creating a variable for the access token, as follows:

    var accessToken = 'pk.eyJ1Ijoibmltcm9kNyIsImEiOiJkNkw1WWRnIn0.pnQn9P2nbHyhKf2FY_XJog';
  2. Then, pass the access token to Mapbox using the following code:

    L.mapbox.accessToken = accessToken;
  3. Now, get the element that holds the address box using the following code:

    var click = document.getElementById('click');
  4. Next, create a Mapbox map object and pass the initial coordinates and the zoom level by executing the following code:

    var map ='map', 'nimrod7.k4adg5mg').setView([51.492842, -0.131874], 16);
  5. Create a click event on your map so that each...