Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Mapbox Cookbook
  • Table Of Contents Toc
  • Feedback & Rating feedback
Mapbox Cookbook

Mapbox Cookbook

By : Kastanakis
2 (1)
close
close
Mapbox Cookbook

Mapbox Cookbook

2 (1)
By: 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 (8 chapters)
close
close
7
Index

Comparing two maps at the same time


In this recipe, we are going to learn how to compare two maps at the same time. We can have two maps that are styled differently and which display different features. For example, one may use street data, while the other may use terrain or satellite imagery. The user will be able to swipe between the two maps.

How to do it…

The following steps need to be performed:

  1. Add an HTML5 slider input control to the DOM.

  2. Add an overlay map layer at the top of the base layer.

  3. Calculate the clipping point based on the slider input value.

  4. Create a rect, and apply that to the clip CSS property of the map container.

We first create an overlay map, and add it at the top of the base map. Next, we use a simple HTML5 input control, a range slider. As the user drags the slider, the overlay map gets clipped. All the magic happens in CSS. We have an overlay layer already in place, and we clip it based on the input value of the range slider. The CSS property that we are tweaking on...

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Mapbox Cookbook
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon