diff --git a/.env-template b/.env-template
index a541b75f..8733b0e1 100644
--- a/.env-template
+++ b/.env-template
@@ -2,8 +2,11 @@
 # Mandatory configuration
 #
 REACT_APP_SHARETRIBE_SDK_CLIENT_ID=
-REACT_APP_GOOGLE_MAPS_API_KEY=
 REACT_APP_STRIPE_PUBLISHABLE_KEY=
+REACT_APP_MAPBOX_ACCESS_TOKEN=
+
+# Or set up an alternative map provider (Google Maps). Check documentation.
+# REACT_APP_GOOGLE_MAPS_API_KEY=
 
 # Defaults
 #
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d307d189..6546e9a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,20 +11,40 @@ way to update this template, but currently, we follow a pattern:
 * Patch (v0.0.**X**): Bug fixes and small changes to components.
 
 ---
+
+## v2.0.0 2018-09-19
+
+* [add] New default map provider (Mapbox) and complete refactoring to all map and geocoding
+  components. [#888](https://github.com/sharetribe/flex-template-web/pull/888)
+
+  **Note:** Before updating to version 2.0.0, you should very carefully track customizations that
+  you have made to following components:
+
+  * **LocationAutocompleteInput**
+  * **Map**
+  * **SearchPage** (especially previous `onIdle` function)
+  * **SearchMap**
+  * **SearchMapPriceLabel**
+  * **SearchMapGroupLabel**
+  * **SearchMapInfoCard**
+
+  To get a better understanding of what has changed, you should read documents about how to
+  [integrate to map providers](./docs/map-providers.md) and especially
+  [changing map provider to Google Maps](./docs/google-maps.md)
+
 ## v1.4.3 2018-09-15
+
 * [fix] fuzzy location didn't change when listing location changed.
   [#931](https://github.com/sharetribe/flex-template-web/pull/931)
-* [fix] obfuscatedCoordinatesImpl didn't always return coordinates within given
-  offset radius.
+* [fix] obfuscatedCoordinatesImpl didn't always return coordinates within given offset radius.
   [#930](https://github.com/sharetribe/flex-template-web/pull/930)
-* [fix] LocationAutocompleteInput: blur input when selecting by enter
-  to prevent flash of default predictions.
-  [#928](https://github.com/sharetribe/flex-template-web/pull/928)
-* [fix] LocationAutocompleteInput: selecting with enter key prevented
-  while fetching predictions.
+* [fix] LocationAutocompleteInput: blur input when selecting by enter to prevent flash of default
+  predictions. [#928](https://github.com/sharetribe/flex-template-web/pull/928)
+* [fix] LocationAutocompleteInput: selecting with enter key prevented while fetching predictions.
   [#923](https://github.com/sharetribe/flex-template-web/pull/923)
 
 ## v1.4.2 2018-09-06
+
 * [add] Reduce character queries on LocationAutocompleteInput to reduce geocoding costs.
   [#883](https://github.com/sharetribe/flex-template-web/pull/883)
 * [change] Update git links and improve documentation
@@ -37,26 +57,24 @@ way to update this template, but currently, we follow a pattern:
   [#906](https://github.com/sharetribe/flex-template-web/pull/906)
 
 ## v1.4.1 2018-08-21
+
 * [fix] Fix window resize redirecting to search page with reusable map component
   [#905](https://github.com/sharetribe/flex-template-web/pull/905)
 
-* [change] Maps configuration has been restructured. The new
-  configuration is agnostic of the maps provider in use and works with
-  both Google Maps as well as Mapbox.
+* [change] Maps configuration has been restructured. The new configuration is agnostic of the maps
+  provider in use and works with both Google Maps as well as Mapbox.
 
-  The fuzzy location circle has less configuration, but otherwise all
-  the previous settings can be set also in the new configuration. See
-  `config.js` for details.
+  The fuzzy location circle has less configuration, but otherwise all the previous settings can be
+  set also in the new configuration. See `config.js` for details.
 
-  The default location searches are now enabled in the
-  `.env-template`. For old installations, the
-  `REACT_APP_DEFAULT_SEARCHES_ENABLED` env var should be set to
-  `true`. The default searches can then be configured in
-  `src/default-location-searches.js`.
+  The default location searches are now enabled in the `.env-template`. For old installations, the
+  `REACT_APP_DEFAULT_SEARCHES_ENABLED` env var should be set to `true`. The default searches can
+  then be configured in `src/default-location-searches.js`.
 
   [#900](https://github.com/sharetribe/flex-template-web/pull/900)
 
 ## v1.4.0 2018-08-17
+
 * [change] Put availability calendar behind a feature flag
   [#902](https://github.com/sharetribe/flex-template-web/pull/902)
 * [fix] Drop date time from time slots request query params
@@ -65,37 +83,36 @@ way to update this template, but currently, we follow a pattern:
   [#901](https://github.com/sharetribe/flex-template-web/pull/901)
 * [add] Map component (used in ListingPage) using Mapbox instead of Google Maps
   [#896](https://github.com/sharetribe/flex-template-web/pull/896)
-* [add] Listing availability
-  [#868](https://github.com/sharetribe/flex-template-web/pull/868), [#873](https://github.com/sharetribe/flex-template-web/pull/873), [#891](https://github.com/sharetribe/flex-template-web/pull/891) & [#892](https://github.com/sharetribe/flex-template-web/pull/892)
-* [add] Add support for user's current location as a default
-  suggestion in the location autocomplete search.
-  [#895](https://github.com/sharetribe/flex-template-web/pull/895)
-* [add] Add support for default locations in the
-  LocationAutocompleteInput component. Common searches can be
-  configured to show when the input has focus. This reduces typing and
-  Google Places geolocation API usage. The defaults can be configured
-  in `src/components/LocationAutocompleteInput/GeocoderGoogleMaps.js`.
+* [add] Listing availability [#868](https://github.com/sharetribe/flex-template-web/pull/868),
+  [#873](https://github.com/sharetribe/flex-template-web/pull/873),
+  [#891](https://github.com/sharetribe/flex-template-web/pull/891) &
+  [#892](https://github.com/sharetribe/flex-template-web/pull/892)
+* [add] Add support for user's current location as a default suggestion in the location autocomplete
+  search. [#895](https://github.com/sharetribe/flex-template-web/pull/895)
+* [add] Add support for default locations in the LocationAutocompleteInput component. Common
+  searches can be configured to show when the input has focus. This reduces typing and Google Places
+  geolocation API usage. The defaults can be configured in
+  `src/components/LocationAutocompleteInput/GeocoderGoogleMaps.js`.
   [#894](https://github.com/sharetribe/flex-template-web/pull/894)
-* [change] Removed the `country` parameter from the search page as it
-  was not used anywhere.
+* [change] Removed the `country` parameter from the search page as it was not used anywhere.
   [#893](https://github.com/sharetribe/flex-template-web/pull/893)
 
 ## v1.3.2 2018-08-07
-* [change] Update the Sharetribe Flex SDK to the 1.0.0 version in NPM.
-  All the `sharetribe-sdk` imports are now using the new package name
-  `sharetribe-flex-sdk`.
+
+* [change] Update the Sharetribe Flex SDK to the 1.0.0 version in NPM. All the `sharetribe-sdk`
+  imports are now using the new package name `sharetribe-flex-sdk`.
   [#884](https://github.com/sharetribe/flex-template-web/pull/884)
 * [change] Reusable SearchMap. Fixed the original reverted version. (Includes audit exception 678)
   [#882](https://github.com/sharetribe/flex-template-web/pull/882)
 
 ## v1.3.1
-* [fix] Hotfix: reverting the usage of ReusableMapContainer due to
-  production build error.
+
+* [fix] Hotfix: reverting the usage of ReusableMapContainer due to production build error.
   [#881](https://github.com/sharetribe/flex-template-web/pull/881)
 
 ## v1.3.0
-* [change] Reusable SearchMap.
-  [#877](https://github.com/sharetribe/flex-template-web/pull/877)
+
+* [change] Reusable SearchMap. [#877](https://github.com/sharetribe/flex-template-web/pull/877)
 * [fix] Fix a search filters panel bug where selecting an option in a multi select filter ends up
   invoking a mobile filter callback function.
   [#876](https://github.com/sharetribe/flex-template-web/pull/876)
@@ -103,22 +120,26 @@ way to update this template, but currently, we follow a pattern:
   [#874](https://github.com/sharetribe/flex-template-web/pull/874)
 
 ## v1.2.2
+
 * [change] Change static map to dynamic map when clicked.
   [#871](https://github.com/sharetribe/flex-template-web/pull/871)
 
 ## v1.2.1
+
 * [fix] Lazy load map only if the map is near current viewport.
   [#871](https://github.com/sharetribe/flex-template-web/pull/871)
 
 ## v1.2.0
-* [change] Use Google's static map on ListingPage.
-  This is a reaction to pricing change of Google Maps APIs.
-  [#869](https://github.com/sharetribe/flex-template-web/pull/869)
-* [change] Use sessionTokens and fields for Autocomplete calls to Google Maps.
-  This is a reaction to pricing change of Google Maps APIs.
+
+* [change] Use Google's static map on ListingPage. This is a reaction to pricing change of Google
+  Maps APIs. [#869](https://github.com/sharetribe/flex-template-web/pull/869)
+* [change] Use sessionTokens and fields for Autocomplete calls to Google Maps. This is a reaction to
+  pricing change of Google Maps APIs.
   [#867](https://github.com/sharetribe/flex-template-web/pull/867)
 * [change] Change TransactionPage state management in loadData.
-  [#863](https://github.com/sharetribe/flex-template-web/pull/863), [#865](https://github.com/sharetribe/flex-template-web/pull/865) & [#866](https://github.com/sharetribe/flex-template-web/pull/866)
+  [#863](https://github.com/sharetribe/flex-template-web/pull/863),
+  [#865](https://github.com/sharetribe/flex-template-web/pull/865) &
+  [#866](https://github.com/sharetribe/flex-template-web/pull/866)
 * [fix] Fix submit button state on contact details page.
   [#864](https://github.com/sharetribe/flex-template-web/pull/864)
 * [fix] Fix listing page host section layout bug.
@@ -126,24 +147,23 @@ way to update this template, but currently, we follow a pattern:
 * [fix] Fix initial message input clearing too early in checkout page.
   [#861](https://github.com/sharetribe/flex-template-web/pull/861)
 * [fix] Fix setting Topbar search input initial value.
-* [change] Update Redux to v4
-  [#859](https://github.com/sharetribe/flex-template-web/pull/859)
+* [change] Update Redux to v4 [#859](https://github.com/sharetribe/flex-template-web/pull/859)
 * [fix] Fix setting Topbar search input initial value
   [#857](https://github.com/sharetribe/flex-template-web/pull/857)
 
 ## v1.1.0
+
 * [fix] Improve slug creation (slashes were breaking rendering in some environments)
   [#850](https://github.com/sharetribe/flex-template-web/pull/850)
 * [fix] Anonymous user should see contact link on UserCard
   [#851](https://github.com/sharetribe/flex-template-web/pull/851)
 * [fix] Persisting booking request details across authentication
   [#852](https://github.com/sharetribe/flex-template-web/pull/852)
-* [change] Footer styles changed to more generic (no disappearing columns etc.)
-  If you have made changes to Footer, consider extracting it to different component before update.
+* [change] Footer styles changed to more generic (no disappearing columns etc.) If you have made
+  changes to Footer, consider extracting it to different component before update.
   [#853](https://github.com/sharetribe/flex-template-web/pull/853)
 * [change] Logo customization refactored to be easier. Check CheckoutPage, TopbarDesktop and Footer
-  after update.
-  [#854](https://github.com/sharetribe/flex-template-web/pull/854)
+  after update. [#854](https://github.com/sharetribe/flex-template-web/pull/854)
 * [fix] Fix showing reviews from banned users.
   [#855](https://github.com/sharetribe/flex-template-web/pull/855)
 
@@ -156,9 +176,8 @@ way to update this template, but currently, we follow a pattern:
   [#846](https://github.com/sharetribe/flex-template-web/pull/846)
 * [fix] Add missing styles for ModalMissingInformation from Topbar
   [#847](https://github.com/sharetribe/flex-template-web/pull/847)
-* [fix] API does not return all image variants anymore, this adds correct variants to update
-  contact details call.
-  [#848](https://github.com/sharetribe/flex-template-web/pull/848)
+* [fix] API does not return all image variants anymore, this adds correct variants to update contact
+  details call. [#848](https://github.com/sharetribe/flex-template-web/pull/848)
 
 ## v0.3.1
 
diff --git a/docs/README.md b/docs/README.md
index 9f67f5d3..d67c8651 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -35,6 +35,7 @@ Documentation for specific topics can be found in the following files:
 
 * [Customization guide](customization-guide.md)
 * [Folder structure](folder-structure.md)
+* [Integration to map providers](map-providers.md)
 * [Translations](translations.md)
 * [Styling a marketplace](styling.md)
 * [Static pages](static-pages.md)
@@ -49,7 +50,6 @@ Documentation for specific topics can be found in the following files:
 * [Content Security Policy (CSP)](content-security-policy.md)
 * [Original create-react-app documentation](https://github.com/sharetribe/create-react-app/blob/master/packages/react-scripts/template/README.md)
 * [Customization checklist](customization-checklist.md)
-* [Google Maps](google-maps.md)
 * [Icons](icons.md)
 
 The application was bootstrapped with a forked version of
diff --git a/docs/customization-checklist.md b/docs/customization-checklist.md
index 9b15fd90..1e95a4a8 100644
--- a/docs/customization-checklist.md
+++ b/docs/customization-checklist.md
@@ -11,7 +11,8 @@ Some generic things to update and check when starting to customize the template.
 * [Terms of Service](terms-of-service-and-privacy-policy.md#terms-of-service)
 * [Privacy Policy](terms-of-service-and-privacy-policy.md#privacy-policy)
 * [Social media sharing graphics](../src/components/Page/Page.js);
-* [Logo](../src/components/Logo/Logo.js) Change and check that it works on Topbar, Footer, and CheckoutPage
+* [Logo](../src/components/Logo/Logo.js) Change and check that it works on Topbar, Footer, and
+  CheckoutPage
 * [Default background image](../src/assets/background-1440.jpg)
 * [Maps Marker icon](../src/components/Map/images/marker-32x32.png)
 * [Config: update environment variables](../src/config.js)
diff --git a/docs/env.md b/docs/env.md
index ed7cdfec..74ed7f96 100644
--- a/docs/env.md
+++ b/docs/env.md
@@ -5,7 +5,8 @@ them have defaults that work for development environment. For production deploys
 
 | Variable                                  | Description                                                                                                       |
 | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
-| REACT_APP_GOOGLE_MAPS_API_KEY             | See: [Google Maps API key](./google-maps.md)                                                                      |
+| REACT_APP_MAPBOX_ACCESS_TOKEN             | See: [Integrating to map providers](./map-providers.md)                                                           |
+| REACT_APP_GOOGLE_MAPS_API_KEY             | See: [Google Maps API key](./google-maps.md) (Alternative map provider)                                           |
 | REACT_APP_SHARETRIBE_SDK_CLIENT_ID        | Client ID (API key). You will get this from the Sharetribe team.                                                  |
 | REACT_APP_STRIPE_PUBLISHABLE_KEY          | Stripe publishable API key for generating tokens with Stripe API. Use test key (prefix pk*test*) for development. |
 | REACT_APP_SHARETRIBE_SDK_BASE_URL         | The base url to access the Sharetribe Flex Marketplace API.                                                       |
diff --git a/docs/folder-structure.md b/docs/folder-structure.md
index 66dfe172..4e048af5 100644
--- a/docs/folder-structure.md
+++ b/docs/folder-structure.md
@@ -42,8 +42,8 @@ After cloning the repo, your project should look like this:
 
 ## public/index.html
 
-This is the page template. It includes fonts, Stripe SDK, Google Maps JavaScript API, and app icons.
-It also specifies placeholders for tags generated by
+This is the page template. It includes fonts, Stripe SDK, Mapbox API (and Google Maps JavaScript
+API), and app icons. It also specifies placeholders for tags generated by
 [React Helmet](https://github.com/nfl/react-helmet)
 
 ## src/
diff --git a/docs/google-maps.md b/docs/google-maps.md
index 4455a47e..8d42ed91 100644
--- a/docs/google-maps.md
+++ b/docs/google-maps.md
@@ -1,8 +1,14 @@
 # Google Maps
 
-The Flex template for web uses the Google Maps API for showing a map and in searching locations in
-the search autocompletion. This document describes how to setup the API key for the API requests to
-work properly.
+Flex Template for Web (FTW) offers out of the box support for Google Maps API for showing a map and
+searching locations with search autocompletion. This document describes how to set up the API key
+for the API requests to work properly.
+
+> Note: before making the change to Google Maps, you should consider if you are OK with their
+> current pricing. There's a pricing calculator available in their
+> [pricing page](https://cloud.google.com/maps-platform/pricing/). FTW's default map provider is
+> Mapbox, which is often cheaper.
+> [Learn more about how to use Mapbox or some other map provider instead of Google Maps](https://github.com/sharetribe/flex-template-web/blob/e6034c7690c095553f44092b032689cd6b6f7546/docs/map-providers.md).
 
 ## Generate a Google Maps API key
 
@@ -28,15 +34,147 @@ REACT_APP_GOOGLE_MAPS_API_KEY=my-key-here
 
 ## Setup common locations to reduce typing
 
-The location autocomplete input in the landing page and the topbar can
-be configured to have specific locations shown by default when the
-user focuses on the input and hasn't yet typed in any searches. This
-reduces the typing required for common searches, and also reduces the
-need to use the Google Places geolocation API that much.
+The location autocomplete-input in the landing page and the topbar can be configured to have
+specific locations shown by default when the user focuses on the input and hasn't yet typed in any
+searches. This reduces the typing required for common searches and also reduces the need to use
+Google Map Places API that much.
 
-The default locations can be configured in
-[src/components/LocationAutocompleteInput/GeocoderGoogleMaps.js](../src/components/LocationAutocompleteInput/GeocoderGoogleMaps.js).
+To use default searches, another environment variable needs to be set:
 
-You can also setup a default location that asks the user's current
-location. This will enable e.g. searching listings near the user. The
-current location is configured in the same file.
+```
+REACT_APP_DEFAULT_SEARCHES_ENABLED=true
+```
+
+The default locations have been described in file:
+[src/default-location-searches.js](../src/default-location-searches.js).
+
+The same environment variable also shows "current location" suggestion, which will make the browser
+to ask user's current location. This is a fast way to search listings nearby. You can specify
+whether to use the current location from [config.js](../src/config.js). Search for variables:
+`suggestCurrentLocation` and `currentLocationBoundsDistance`.
+
+## Change components: use Google Map versions instead of Mapbox
+
+If you wish to use Google Maps instead of Mapbox, you need to make some changes to FTW default
+setup.
+
+### 1. Include Google Map script instead of Mapbox scripts
+
+Mapbox related scripts can be removed from index.html and instead use Google Map script described in
+comments.
+
+_public/index.html:_
+
+```html
+    <script src="%PUBLIC_URL%/static/scripts/mapbox/mapbox-sdk.min.js"></script>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css" rel="stylesheet" />
+    <script src="https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js"></script>
+    <script>
+      window.mapboxgl.accessToken = '%REACT_APP_MAPBOX_ACCESS_TOKEN%';
+    </script>
+    <!--
+      If Google Maps is used instead of Mapbox, you need to include Google's script instead:
+      <script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_MAPS_API_KEY%&libraries=places"></script>
+    -->
+```
+
+### 2. Searching with Google's geocoding API
+
+Location search aka LocationAutocompleteInput should use Google Map specific geocoder. The correct
+import is written to the comments of LocationAutocompleteInput component.
+
+_src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js:_
+
+```js
+import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderMapbox';
+// import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderGoogleMaps';
+```
+
+Furthermore, Google Map states in their terms of service that Google logo needs to be visible when
+using their geocoding service. It is available as a background image below the autocomplete
+predictions. However, there needs to be enough padding for that logo. You can change the padding
+through `marketplace.css`.
+
+_src/marketplace.css:_
+
+```js
+/* Google Maps needs 72px bottom padding to accommodate logo, Mapbox doesn't have one */
+--locationAutocompleteBottomPadding: 8px;
+```
+
+### 3. Show correct map on ListingPage (Map component)
+
+Google Map version (containing both static and dynamic maps) can be taken into use by importing
+correct map subcomponent.
+
+_src/components/Map/Map.js:_
+
+```js
+import { StaticMap, DynamicMap, isMapsLibLoaded } from './MapboxMap';
+// import { StaticMap, DynamicMap, isMapsLibLoaded } from './GoogleMap';
+```
+
+### 4. SearchMap.js
+
+The most complex change is happening in SearchPage. First, you need to import `SearchMapWithMapbox`
+instead of `SearchMapWithGoogleMap`.
+
+_src/components/SearchMap/SearchMap.js:_
+
+Remove this:
+
+```js
+import SearchMapWithMapbox, {
+  LABEL_HANDLE,
+  INFO_CARD_HANDLE,
+  getMapBounds,
+  getMapCenter,
+  fitMapToBounds,
+  isMapsLibLoaded,
+} from './SearchMapWithMapbox';
+```
+
+And add this instead:
+
+```js
+import SearchMapWithGoogleMap, {
+  LABEL_HANDLE,
+  INFO_CARD_HANDLE,
+  getMapBounds,
+  getMapCenter,
+  fitMapToBounds,
+  isMapsLibLoaded,
+} from './SearchMapWithGoogleMap';
+```
+
+Then, in `render` method, you need to put `SearchMapWithGoogleMap` component into use by replacing
+`SearchMapWithMapbox` which is defined inside `ReusableMapContainer`. The component with correct
+props is already there in the comments:
+
+```js
+// When changing from default map provider to Google Maps, you should use the following
+// component instead of SearchMapWithMapbox:
+//
+// <SearchMapWithGoogleMap
+//   containerElement={
+//     <div id="search-map-container" className={classes} onClick={this.onMapClicked} />
+//   }
+//   mapElement={<div className={mapRootClassName || css.mapRoot} />}
+//   bounds={bounds}
+//   center={center}
+//   location={location}
+//   infoCardOpen={infoCardOpen}
+//   listings={listings}
+//   activeListingId={activeListingId}
+//   mapComponentRefreshToken={this.state.mapReattachmentCount}
+//   createURLToListing={this.createURLToListing}
+//   onListingClicked={this.onListingClicked}
+//   onListingInfoCardClicked={this.onListingInfoCardClicked}
+//   onMapLoad={this.onMapLoadHandler}
+//   onMapMoveEnd={onMapMoveEnd}
+//   zoom={zoom}
+// />
+```
+
+The only extra step is to make `mapRootClassName` property available from `this.props` at the
+beginning of the `render` method.
diff --git a/docs/map-providers.md b/docs/map-providers.md
new file mode 100644
index 00000000..8906db06
--- /dev/null
+++ b/docs/map-providers.md
@@ -0,0 +1,70 @@
+# Integrating to map providers
+
+Choice of map provider can significantly impact your costs. Flex Template for Web (FTW) originally
+supported only [Google Maps](./google-maps.md) out of the box, but after Google increased the
+pricing of its APIs a lot, the default provider was changed to Mapbox. The template now supports
+both Mapbox and Google Maps, and the map library used by Mapbox is used also by several other map
+providers, so integrating new providers that support this is rather easy (see instructions at the
+end of this doc).
+
+## Setting up the Mapbox integration (the default map provider)
+
+### 1. Generate a Mapbox access key
+
+Sign up for a Mapbox and go to [account page](https://www.mapbox.com/account/). Then click
+`Create access token`.
+
+> Read more about
+> [access tokens and consider rotating them](https://www.mapbox.com/help/how-access-tokens-work/).
+
+### 2. Setup the application to use the access key
+
+The application uses the `REACT_APP_MAPBOX_ACCESS_TOKEN` environment variable for the key value. For
+local development, you can add the variable in the Gitignored `.env` file in the project root:
+
+```
+REACT_APP_MAPBOX_ACCESS_TOKEN=my-access-token-here
+```
+
+### 3. Setup common locations to reduce typing
+
+The location autocomplete input in the landing page and the topbar can be configured to have
+specific locations shown by default when the user focuses on the input and hasn't yet typed in any
+searches. This reduces the typing required for common searches and also reduces the need to use
+Mapbox geolocation API that much.
+
+To use default searches, another environment variable needs to be set:
+
+```
+REACT_APP_DEFAULT_SEARCHES_ENABLED=true
+```
+
+The default locations are described in
+[src/default-location-searches.js](../src/default-location-searches.js).
+
+The same environment variable also shows "current location" suggestion, which will make the browser
+to ask user's current location. This is a fast way to search listings nearby. You can specify
+whether to use the current location from [config.js](../src/config.js). Search for variables:
+`suggestCurrentLocation` and `currentLocationBoundsDistance`.
+
+### 4. Check rare default configurations
+
+Mapbox geocoding API doesn't always return bounding boxes for locations. Without bounding box
+SearchMap component can't adjust zoom level right for that particular place. Therefore there are
+default bounding boxes defined to different place types in
+[Mapbox specific geocoder](../src/components/LocationAutocompleteInput/GeocoderMapbox.js).
+
+## Changing the map providers
+
+### How to change from Mapbox to Google Maps
+
+It is possible to use Google Map instead of the default map provider. Read more from
+[Google Map setup guide](./google-maps.md)
+
+### How to use other map providers
+
+The default map setup of FTW uses library called `mapbox-gl-js`. It is supported by quite many other
+map providers too. Thus, if you wish to use a map provider other than Google Maps or Mapbox, first
+check if the map provider you are considering is supporting this library. If they are, the change
+might be quite easy. Note: if you change the map tile provider you should also change geocoding API
+too (i.e. the API endpoint for `LocationAutocompleteInput` component).
diff --git a/package.json b/package.json
index 27df6e0d..d85462bd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.4.3",
+  "version": "2.0.0",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
@@ -24,6 +24,7 @@
     "final-form-arrays": "^1.0.4",
     "helmet": "^3.12.0",
     "lodash": "^4.17.5",
+    "mapbox-gl-multitouch": "^1.0.3",
     "moment": "^2.20.1",
     "object.entries": "^1.0.4",
     "object.values": "^1.0.4",
diff --git a/public/index.html b/public/index.html
index b2a9739e..672374cc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -143,7 +143,22 @@
       })(document);
     </script>
 
-    <script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_MAPS_API_KEY%&libraries=places"></script>
+    <!--
+      NOTE: remember to update mapbox-sdk.min.js to a new version regularly.
+      mapbox-sdk.min.js is included from static folder for CSP purposes.
+      We didn't bundle it to the main app since it would unnecessarily slow down initial rendering.
+    -->
+    <script src="%PUBLIC_URL%/static/scripts/mapbox/mapbox-sdk.min.js"></script>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css" rel="stylesheet" />
+    <script src="https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js"></script>
+    <script>
+      window.mapboxgl.accessToken = '%REACT_APP_MAPBOX_ACCESS_TOKEN%';
+    </script>
+    <!--
+      If Google Maps is used instead of Mapbox, you need to include Google's script instead:
+      <script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_MAPS_API_KEY%&libraries=places"></script>
+    -->
+
     <!--
          Stripe script should be on every page, not just the pages that
          use the API:
diff --git a/public/static/scripts/mapbox/LICENCE b/public/static/scripts/mapbox/LICENCE
new file mode 100644
index 00000000..ff088e25
--- /dev/null
+++ b/public/static/scripts/mapbox/LICENCE
@@ -0,0 +1,26 @@
+Copyright (c) 2018, Mapbox
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+The views and conclusions contained in the software and documentation are those
+of the authors and should not be interpreted as representing official policies,
+either expressed or implied, of the FreeBSD Project.
diff --git a/public/static/scripts/mapbox/mapbox-sdk.js b/public/static/scripts/mapbox/mapbox-sdk.js
new file mode 100644
index 00000000..df8e0dea
--- /dev/null
+++ b/public/static/scripts/mapbox/mapbox-sdk.js
@@ -0,0 +1,3900 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global.mapboxSdk = factory());
+}(this, (function () { 'use strict';
+
+  // Like https://github.com/thlorenz/lib/parse-link-header but without any
+  // additional dependencies.
+
+  function parseParam(param) {
+    var parts = param.match(/\s*(.+)\s*=\s*"?([^"]+)"?/);
+    if (!parts) return null;
+
+    return {
+      key: parts[1],
+      value: parts[2]
+    };
+  }
+
+  function parseLink(link) {
+    var parts = link.match(/<?([^>]*)>(.*)/);
+    if (!parts) return null;
+
+    var linkUrl = parts[1];
+    var linkParams = parts[2].split(';');
+    var rel = null;
+    var parsedLinkParams = linkParams.reduce(function(result, param) {
+      var parsed = parseParam(param);
+      if (!parsed) return result;
+      if (parsed.key === 'rel') {
+        if (!rel) {
+          rel = parsed.value;
+        }
+        return result;
+      }
+      result[parsed.key] = parsed.value;
+      return result;
+    }, {});
+    if (!rel) return null;
+
+    return {
+      url: linkUrl,
+      rel: rel,
+      params: parsedLinkParams
+    };
+  }
+
+  /**
+   * Parse a Link header.
+   *
+   * @param {string} linkHeader
+   * @returns {{
+   *   [string]: {
+   *     url: string,
+   *     params: { [string]: string }
+   *   }
+   * }}
+   */
+  function parseLinkHeader(linkHeader) {
+    if (!linkHeader) return {};
+
+    return linkHeader.split(/,\s*</).reduce(function(result, link) {
+      var parsed = parseLink(link);
+      if (!parsed) return result;
+      // rel value can be multiple whitespace-separated rels.
+      var splitRel = parsed.rel.split(/\s+/);
+      splitRel.forEach(function(rel) {
+        if (!result[rel]) {
+          result[rel] = {
+            url: parsed.url,
+            params: parsed.params
+          };
+        }
+      });
+      return result;
+    }, {});
+  }
+
+  var parseLinkHeader_1 = parseLinkHeader;
+
+  /**
+   * A Mapbox API response.
+   *
+   * @class MapiResponse
+   * @property {Object} body - The response body, parsed as JSON.
+   * @property {string} rawBody - The raw response body.
+   * @property {number} statusCode - The response's status code.
+   * @property {Object} headers - The parsed response headers.
+   * @property {Object} links - The parsed response links.
+   * @property {MapiRequest} request - The response's originating `MapiRequest`.
+   */
+
+  /**
+   * @ignore
+   * @param {MapiRequest} request
+   * @param {Object} responseData
+   * @param {Object} responseData.headers
+   * @param {string} responseData.body
+   * @param {number} responseData.statusCode
+   */
+  function MapiResponse(request, responseData) {
+    this.request = request;
+    this.headers = responseData.headers;
+    this.rawBody = responseData.body;
+    this.statusCode = responseData.statusCode;
+    try {
+      this.body = JSON.parse(responseData.body || '{}');
+    } catch (parseError) {
+      this.body = responseData.body;
+    }
+    this.links = parseLinkHeader_1(this.headers.link);
+  }
+
+  /**
+   * Check if there is a next page that you can fetch.
+   *
+   * @returns {boolean}
+   */
+  MapiResponse.prototype.hasNextPage = function hasNextPage() {
+    return !!this.links.next;
+  };
+
+  /**
+   * Create a request for the next page, if there is one.
+   * If there is no next page, returns `null`.
+   *
+   * @returns {MapiRequest | null}
+   */
+  MapiResponse.prototype.nextPage = function nextPage() {
+    if (!this.hasNextPage()) return null;
+    return this.request._extend({
+      path: this.links.next.url
+    });
+  };
+
+  var mapiResponse = MapiResponse;
+
+  var constants = {
+    API_ORIGIN: 'https://api.mapbox.com',
+    EVENT_PROGRESS_DOWNLOAD: 'downloadProgress',
+    EVENT_PROGRESS_UPLOAD: 'uploadProgress',
+    EVENT_ERROR: 'error',
+    EVENT_RESPONSE: 'response',
+    ERROR_HTTP: 'HttpError',
+    ERROR_REQUEST_ABORTED: 'RequestAbortedError'
+  };
+
+  /**
+   * A Mapbox API error.
+   *
+   * If there's an error during the API transaction,
+   * the Promise returned by `MapiRequest`'s [`send`](#send)
+   * method should reject with a `MapiError`.
+   *
+   * @class MapiError
+   * @hideconstructor
+   * @property {MapiRequest} request - The errored request.
+   * @property {string} type - The type of error. Usually this is `'HttpError'`.
+   *   If the request was aborted, so the error was
+   *   not sent from the server, the type will be
+   *   `'RequestAbortedError'`.
+   * @property {number} [statusCode] - The numeric status code of
+   *   the HTTP response.
+   * @property {Object | string} [body] - If the server sent a response body,
+   *   this property exposes that response, parsed as JSON if possible.
+   * @property {string} [message] - Whatever message could be derived from the
+   *   call site and HTTP response.
+   *
+   * @param {MapiRequest} options.request
+   * @param {number} [options.statusCode]
+   * @param {string} [options.body]
+   * @param {string} [options.message]
+   * @param {string} [options.type]
+   */
+  function MapiError(options) {
+    var errorType = options.type || constants.ERROR_HTTP;
+
+    var body;
+    if (options.body) {
+      try {
+        body = JSON.parse(options.body);
+      } catch (e) {
+        body = options.body;
+      }
+    } else {
+      body = null;
+    }
+
+    var message = options.message || null;
+    if (!message) {
+      if (typeof body === 'string') {
+        message = body;
+      } else if (body && typeof body.message === 'string') {
+        message = body.message;
+      } else if (errorType === constants.ERROR_REQUEST_ABORTED) {
+        message = 'Request aborted';
+      }
+    }
+
+    this.message = message;
+    this.type = errorType;
+    this.statusCode = options.statusCode || null;
+    this.request = options.request;
+    this.body = body;
+  }
+
+  var mapiError = MapiError;
+
+  function parseSingleHeader(raw) {
+    var boundary = raw.indexOf(':');
+    var name = raw
+      .substring(0, boundary)
+      .trim()
+      .toLowerCase();
+    var value = raw.substring(boundary + 1).trim();
+    return {
+      name: name,
+      value: value
+    };
+  }
+
+  /**
+   * Parse raw headers into an object with lowercase properties.
+   * Does not fully parse headings into more complete data structure,
+   * as larger libraries might do. Also does not deal with duplicate
+   * headers because Node doesn't seem to deal with those well, so
+   * we shouldn't let the browser either, for consistency.
+   *
+   * @param {string} raw
+   * @returns {Object}
+   */
+  function parseHeaders(raw) {
+    var headers = {};
+    if (!raw) {
+      return headers;
+    }
+
+    raw
+      .trim()
+      .split(/[\r|\n]+/)
+      .forEach(function(rawHeader) {
+        var parsed = parseSingleHeader(rawHeader);
+        headers[parsed.name] = parsed.value;
+      });
+
+    return headers;
+  }
+
+  var parseHeaders_1 = parseHeaders;
+
+  // Keys are request IDs, values are XHRs.
+  var requestsUnderway = {};
+
+  function browserAbort(request) {
+    var xhr = requestsUnderway[request.id];
+    if (!xhr) return;
+    xhr.abort();
+    delete requestsUnderway[request.id];
+  }
+
+  function createResponse(request, xhr) {
+    return new mapiResponse(request, {
+      body: xhr.response,
+      headers: parseHeaders_1(xhr.getAllResponseHeaders()),
+      statusCode: xhr.status
+    });
+  }
+
+  function normalizeBrowserProgressEvent(event) {
+    var total = event.total;
+    var transferred = event.loaded;
+    var percent = (100 * transferred) / total;
+    return {
+      total: total,
+      transferred: transferred,
+      percent: percent
+    };
+  }
+
+  function sendRequestXhr(request, xhr) {
+    return new Promise(function(resolve, reject) {
+      xhr.onprogress = function(event) {
+        request.emitter.emit(
+          constants.EVENT_PROGRESS_DOWNLOAD,
+          normalizeBrowserProgressEvent(event)
+        );
+      };
+
+      var file = request.file;
+      if (file) {
+        xhr.upload.onprogress = function(event) {
+          request.emitter.emit(
+            constants.EVENT_PROGRESS_UPLOAD,
+            normalizeBrowserProgressEvent(event)
+          );
+        };
+      }
+
+      xhr.onerror = function(error) {
+        reject(error);
+      };
+
+      xhr.onabort = function() {
+        var mapiError$$1 = new mapiError({
+          request: request,
+          type: constants.ERROR_REQUEST_ABORTED
+        });
+        reject(mapiError$$1);
+      };
+
+      xhr.onload = function() {
+        delete requestsUnderway[request.id];
+        if (xhr.status < 200 || xhr.status >= 400) {
+          var mapiError$$1 = new mapiError({
+            request: request,
+            body: xhr.response,
+            statusCode: xhr.status
+          });
+          reject(mapiError$$1);
+          return;
+        }
+        resolve(xhr);
+      };
+
+      var body = request.body;
+
+      // matching service needs to send a www-form-urlencoded request
+      if (typeof body === 'string') {
+        xhr.send(body);
+      } else if (body) {
+        xhr.send(JSON.stringify(body));
+      } else if (file) {
+        xhr.send(file);
+      } else {
+        xhr.send();
+      }
+
+      requestsUnderway[request.id] = xhr;
+    }).then(function(xhr) {
+      return createResponse(request, xhr);
+    });
+  }
+
+  // The accessToken argument gives this function flexibility
+  // for Mapbox's internal client.
+  function createRequestXhr(request, accessToken) {
+    var url = request.url(accessToken);
+    var xhr = new window.XMLHttpRequest();
+    xhr.open(request.method, url);
+    if (request.headers) {
+      Object.keys(request.headers).forEach(function(key) {
+        xhr.setRequestHeader(key, request.headers[key]);
+      });
+    }
+    return xhr;
+  }
+
+  function browserSend(request) {
+    return Promise.resolve().then(function() {
+      var xhr = createRequestXhr(request, request.client.accessToken);
+      return sendRequestXhr(request, xhr);
+    });
+  }
+
+  var browserLayer = {
+    browserAbort: browserAbort,
+    sendRequestXhr: sendRequestXhr,
+    browserSend: browserSend,
+    createRequestXhr: createRequestXhr
+  };
+
+  var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+  function createCommonjsModule(fn, module) {
+    return module = { exports: {} }, fn(module, module.exports), module.exports;
+  }
+
+  var base64 = createCommonjsModule(function (module, exports) {
+  (function(root) {
+
+    // Detect free variables `exports`.
+    var freeExports = exports;
+
+    // Detect free variable `module`.
+    var freeModule = module &&
+      module.exports == freeExports && module;
+
+    // Detect free variable `global`, from Node.js or Browserified code, and use
+    // it as `root`.
+    var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal;
+    if (freeGlobal.global === freeGlobal || freeGlobal.window === freeGlobal) {
+      root = freeGlobal;
+    }
+
+    /*--------------------------------------------------------------------------*/
+
+    var InvalidCharacterError = function(message) {
+      this.message = message;
+    };
+    InvalidCharacterError.prototype = new Error;
+    InvalidCharacterError.prototype.name = 'InvalidCharacterError';
+
+    var error = function(message) {
+      // Note: the error messages used throughout this file match those used by
+      // the native `atob`/`btoa` implementation in Chromium.
+      throw new InvalidCharacterError(message);
+    };
+
+    var TABLE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+    // http://whatwg.org/html/common-microsyntaxes.html#space-character
+    var REGEX_SPACE_CHARACTERS = /[\t\n\f\r ]/g;
+
+    // `decode` is designed to be fully compatible with `atob` as described in the
+    // HTML Standard. http://whatwg.org/html/webappapis.html#dom-windowbase64-atob
+    // The optimized base64-decoding algorithm used is based on @atk’s excellent
+    // implementation. https://gist.github.com/atk/1020396
+    var decode = function(input) {
+      input = String(input)
+        .replace(REGEX_SPACE_CHARACTERS, '');
+      var length = input.length;
+      if (length % 4 == 0) {
+        input = input.replace(/==?$/, '');
+        length = input.length;
+      }
+      if (
+        length % 4 == 1 ||
+        // http://whatwg.org/C#alphanumeric-ascii-characters
+        /[^+a-zA-Z0-9/]/.test(input)
+      ) {
+        error(
+          'Invalid character: the string to be decoded is not correctly encoded.'
+        );
+      }
+      var bitCounter = 0;
+      var bitStorage;
+      var buffer;
+      var output = '';
+      var position = -1;
+      while (++position < length) {
+        buffer = TABLE.indexOf(input.charAt(position));
+        bitStorage = bitCounter % 4 ? bitStorage * 64 + buffer : buffer;
+        // Unless this is the first of a group of 4 characters…
+        if (bitCounter++ % 4) {
+          // …convert the first 8 bits to a single ASCII character.
+          output += String.fromCharCode(
+            0xFF & bitStorage >> (-2 * bitCounter & 6)
+          );
+        }
+      }
+      return output;
+    };
+
+    // `encode` is designed to be fully compatible with `btoa` as described in the
+    // HTML Standard: http://whatwg.org/html/webappapis.html#dom-windowbase64-btoa
+    var encode = function(input) {
+      input = String(input);
+      if (/[^\0-\xFF]/.test(input)) {
+        // Note: no need to special-case astral symbols here, as surrogates are
+        // matched, and the input is supposed to only contain ASCII anyway.
+        error(
+          'The string to be encoded contains characters outside of the ' +
+          'Latin1 range.'
+        );
+      }
+      var padding = input.length % 3;
+      var output = '';
+      var position = -1;
+      var a;
+      var b;
+      var c;
+      var buffer;
+      // Make sure any padding is handled outside of the loop.
+      var length = input.length - padding;
+
+      while (++position < length) {
+        // Read three bytes, i.e. 24 bits.
+        a = input.charCodeAt(position) << 16;
+        b = input.charCodeAt(++position) << 8;
+        c = input.charCodeAt(++position);
+        buffer = a + b + c;
+        // Turn the 24 bits into four chunks of 6 bits each, and append the
+        // matching character for each of them to the output.
+        output += (
+          TABLE.charAt(buffer >> 18 & 0x3F) +
+          TABLE.charAt(buffer >> 12 & 0x3F) +
+          TABLE.charAt(buffer >> 6 & 0x3F) +
+          TABLE.charAt(buffer & 0x3F)
+        );
+      }
+
+      if (padding == 2) {
+        a = input.charCodeAt(position) << 8;
+        b = input.charCodeAt(++position);
+        buffer = a + b;
+        output += (
+          TABLE.charAt(buffer >> 10) +
+          TABLE.charAt((buffer >> 4) & 0x3F) +
+          TABLE.charAt((buffer << 2) & 0x3F) +
+          '='
+        );
+      } else if (padding == 1) {
+        buffer = input.charCodeAt(position);
+        output += (
+          TABLE.charAt(buffer >> 2) +
+          TABLE.charAt((buffer << 4) & 0x3F) +
+          '=='
+        );
+      }
+
+      return output;
+    };
+
+    var base64 = {
+      'encode': encode,
+      'decode': decode,
+      'version': '0.1.0'
+    };
+
+    // Some AMD build optimizers, like r.js, check for specific condition patterns
+    // like the following:
+    if (freeExports && !freeExports.nodeType) {
+      if (freeModule) { // in Node.js or RingoJS v0.8.0+
+        freeModule.exports = base64;
+      } else { // in Narwhal or RingoJS v0.7.0-
+        for (var key in base64) {
+          base64.hasOwnProperty(key) && (freeExports[key] = base64[key]);
+        }
+      }
+    } else { // in Rhino or a web browser
+      root.base64 = base64;
+    }
+
+  }(commonjsGlobal));
+  });
+
+  var tokenCache = {};
+
+  function parseToken(token) {
+    if (tokenCache[token]) {
+      return tokenCache[token];
+    }
+
+    var parts = token.split('.');
+    var usage = parts[0];
+    var rawPayload = parts[1];
+    if (!rawPayload) {
+      throw new Error('Invalid token');
+    }
+
+    var parsedPayload = parsePaylod(rawPayload);
+
+    var result = {
+      usage: usage,
+      user: parsedPayload.u
+    };
+    if (has(parsedPayload, 'a')) result.authorization = parsedPayload.a;
+    if (has(parsedPayload, 'exp')) result.expires = parsedPayload.exp * 1000;
+    if (has(parsedPayload, 'iat')) result.created = parsedPayload.iat * 1000;
+    if (has(parsedPayload, 'scopes')) result.scopes = parsedPayload.scopes;
+    if (has(parsedPayload, 'client')) result.client = parsedPayload.client;
+    if (has(parsedPayload, 'll')) result.lastLogin = parsedPayload.ll;
+    if (has(parsedPayload, 'iu')) result.impersonator = parsedPayload.iu;
+
+    tokenCache[token] = result;
+    return result;
+  }
+
+  function parsePaylod(rawPayload) {
+    try {
+      return JSON.parse(base64.decode(rawPayload));
+    } catch (parseError) {
+      throw new Error('Invalid token');
+    }
+  }
+
+  function has(obj, key) {
+    return Object.prototype.hasOwnProperty.call(obj, key);
+  }
+
+  var parseMapboxToken = parseToken;
+
+  var immutable = extend;
+
+  var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+  function extend() {
+      var target = {};
+
+      for (var i = 0; i < arguments.length; i++) {
+          var source = arguments[i];
+
+          for (var key in source) {
+              if (hasOwnProperty.call(source, key)) {
+                  target[key] = source[key];
+              }
+          }
+      }
+
+      return target
+  }
+
+  var eventemitter3 = createCommonjsModule(function (module) {
+
+  var has = Object.prototype.hasOwnProperty
+    , prefix = '~';
+
+  /**
+   * Constructor to create a storage for our `EE` objects.
+   * An `Events` instance is a plain object whose properties are event names.
+   *
+   * @constructor
+   * @private
+   */
+  function Events() {}
+
+  //
+  // We try to not inherit from `Object.prototype`. In some engines creating an
+  // instance in this way is faster than calling `Object.create(null)` directly.
+  // If `Object.create(null)` is not supported we prefix the event names with a
+  // character to make sure that the built-in object properties are not
+  // overridden or used as an attack vector.
+  //
+  if (Object.create) {
+    Events.prototype = Object.create(null);
+
+    //
+    // This hack is needed because the `__proto__` property is still inherited in
+    // some old browsers like Android 4, iPhone 5.1, Opera 11 and Safari 5.
+    //
+    if (!new Events().__proto__) prefix = false;
+  }
+
+  /**
+   * Representation of a single event listener.
+   *
+   * @param {Function} fn The listener function.
+   * @param {*} context The context to invoke the listener with.
+   * @param {Boolean} [once=false] Specify if the listener is a one-time listener.
+   * @constructor
+   * @private
+   */
+  function EE(fn, context, once) {
+    this.fn = fn;
+    this.context = context;
+    this.once = once || false;
+  }
+
+  /**
+   * Add a listener for a given event.
+   *
+   * @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
+   * @param {(String|Symbol)} event The event name.
+   * @param {Function} fn The listener function.
+   * @param {*} context The context to invoke the listener with.
+   * @param {Boolean} once Specify if the listener is a one-time listener.
+   * @returns {EventEmitter}
+   * @private
+   */
+  function addListener(emitter, event, fn, context, once) {
+    if (typeof fn !== 'function') {
+      throw new TypeError('The listener must be a function');
+    }
+
+    var listener = new EE(fn, context || emitter, once)
+      , evt = prefix ? prefix + event : event;
+
+    if (!emitter._events[evt]) emitter._events[evt] = listener, emitter._eventsCount++;
+    else if (!emitter._events[evt].fn) emitter._events[evt].push(listener);
+    else emitter._events[evt] = [emitter._events[evt], listener];
+
+    return emitter;
+  }
+
+  /**
+   * Clear event by name.
+   *
+   * @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
+   * @param {(String|Symbol)} evt The Event name.
+   * @private
+   */
+  function clearEvent(emitter, evt) {
+    if (--emitter._eventsCount === 0) emitter._events = new Events();
+    else delete emitter._events[evt];
+  }
+
+  /**
+   * Minimal `EventEmitter` interface that is molded against the Node.js
+   * `EventEmitter` interface.
+   *
+   * @constructor
+   * @public
+   */
+  function EventEmitter() {
+    this._events = new Events();
+    this._eventsCount = 0;
+  }
+
+  /**
+   * Return an array listing the events for which the emitter has registered
+   * listeners.
+   *
+   * @returns {Array}
+   * @public
+   */
+  EventEmitter.prototype.eventNames = function eventNames() {
+    var names = []
+      , events
+      , name;
+
+    if (this._eventsCount === 0) return names;
+
+    for (name in (events = this._events)) {
+      if (has.call(events, name)) names.push(prefix ? name.slice(1) : name);
+    }
+
+    if (Object.getOwnPropertySymbols) {
+      return names.concat(Object.getOwnPropertySymbols(events));
+    }
+
+    return names;
+  };
+
+  /**
+   * Return the listeners registered for a given event.
+   *
+   * @param {(String|Symbol)} event The event name.
+   * @returns {Array} The registered listeners.
+   * @public
+   */
+  EventEmitter.prototype.listeners = function listeners(event) {
+    var evt = prefix ? prefix + event : event
+      , handlers = this._events[evt];
+
+    if (!handlers) return [];
+    if (handlers.fn) return [handlers.fn];
+
+    for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
+      ee[i] = handlers[i].fn;
+    }
+
+    return ee;
+  };
+
+  /**
+   * Return the number of listeners listening to a given event.
+   *
+   * @param {(String|Symbol)} event The event name.
+   * @returns {Number} The number of listeners.
+   * @public
+   */
+  EventEmitter.prototype.listenerCount = function listenerCount(event) {
+    var evt = prefix ? prefix + event : event
+      , listeners = this._events[evt];
+
+    if (!listeners) return 0;
+    if (listeners.fn) return 1;
+    return listeners.length;
+  };
+
+  /**
+   * Calls each of the listeners registered for a given event.
+   *
+   * @param {(String|Symbol)} event The event name.
+   * @returns {Boolean} `true` if the event had listeners, else `false`.
+   * @public
+   */
+  EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
+    var evt = prefix ? prefix + event : event;
+
+    if (!this._events[evt]) return false;
+
+    var listeners = this._events[evt]
+      , len = arguments.length
+      , args
+      , i;
+
+    if (listeners.fn) {
+      if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);
+
+      switch (len) {
+        case 1: return listeners.fn.call(listeners.context), true;
+        case 2: return listeners.fn.call(listeners.context, a1), true;
+        case 3: return listeners.fn.call(listeners.context, a1, a2), true;
+        case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true;
+        case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
+        case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
+      }
+
+      for (i = 1, args = new Array(len -1); i < len; i++) {
+        args[i - 1] = arguments[i];
+      }
+
+      listeners.fn.apply(listeners.context, args);
+    } else {
+      var length = listeners.length
+        , j;
+
+      for (i = 0; i < length; i++) {
+        if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true);
+
+        switch (len) {
+          case 1: listeners[i].fn.call(listeners[i].context); break;
+          case 2: listeners[i].fn.call(listeners[i].context, a1); break;
+          case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break;
+          case 4: listeners[i].fn.call(listeners[i].context, a1, a2, a3); break;
+          default:
+            if (!args) for (j = 1, args = new Array(len -1); j < len; j++) {
+              args[j - 1] = arguments[j];
+            }
+
+            listeners[i].fn.apply(listeners[i].context, args);
+        }
+      }
+    }
+
+    return true;
+  };
+
+  /**
+   * Add a listener for a given event.
+   *
+   * @param {(String|Symbol)} event The event name.
+   * @param {Function} fn The listener function.
+   * @param {*} [context=this] The context to invoke the listener with.
+   * @returns {EventEmitter} `this`.
+   * @public
+   */
+  EventEmitter.prototype.on = function on(event, fn, context) {
+    return addListener(this, event, fn, context, false);
+  };
+
+  /**
+   * Add a one-time listener for a given event.
+   *
+   * @param {(String|Symbol)} event The event name.
+   * @param {Function} fn The listener function.
+   * @param {*} [context=this] The context to invoke the listener with.
+   * @returns {EventEmitter} `this`.
+   * @public
+   */
+  EventEmitter.prototype.once = function once(event, fn, context) {
+    return addListener(this, event, fn, context, true);
+  };
+
+  /**
+   * Remove the listeners of a given event.
+   *
+   * @param {(String|Symbol)} event The event name.
+   * @param {Function} fn Only remove the listeners that match this function.
+   * @param {*} context Only remove the listeners that have this context.
+   * @param {Boolean} once Only remove one-time listeners.
+   * @returns {EventEmitter} `this`.
+   * @public
+   */
+  EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
+    var evt = prefix ? prefix + event : event;
+
+    if (!this._events[evt]) return this;
+    if (!fn) {
+      clearEvent(this, evt);
+      return this;
+    }
+
+    var listeners = this._events[evt];
+
+    if (listeners.fn) {
+      if (
+        listeners.fn === fn &&
+        (!once || listeners.once) &&
+        (!context || listeners.context === context)
+      ) {
+        clearEvent(this, evt);
+      }
+    } else {
+      for (var i = 0, events = [], length = listeners.length; i < length; i++) {
+        if (
+          listeners[i].fn !== fn ||
+          (once && !listeners[i].once) ||
+          (context && listeners[i].context !== context)
+        ) {
+          events.push(listeners[i]);
+        }
+      }
+
+      //
+      // Reset the array, or remove it completely if we have no more listeners.
+      //
+      if (events.length) this._events[evt] = events.length === 1 ? events[0] : events;
+      else clearEvent(this, evt);
+    }
+
+    return this;
+  };
+
+  /**
+   * Remove all listeners, or those of the specified event.
+   *
+   * @param {(String|Symbol)} [event] The event name.
+   * @returns {EventEmitter} `this`.
+   * @public
+   */
+  EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
+    var evt;
+
+    if (event) {
+      evt = prefix ? prefix + event : event;
+      if (this._events[evt]) clearEvent(this, evt);
+    } else {
+      this._events = new Events();
+      this._eventsCount = 0;
+    }
+
+    return this;
+  };
+
+  //
+  // Alias methods names because people roll like that.
+  //
+  EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
+  EventEmitter.prototype.addListener = EventEmitter.prototype.on;
+
+  //
+  // Expose the prefix.
+  //
+  EventEmitter.prefixed = prefix;
+
+  //
+  // Allow `EventEmitter` to be imported as module namespace.
+  //
+  EventEmitter.EventEmitter = EventEmitter;
+
+  //
+  // Expose the module.
+  //
+  {
+    module.exports = EventEmitter;
+  }
+  });
+
+  // Encode each item of an array individually. The comma
+  // delimiters should not themselves be encoded.
+  function encodeArray(arrayValue) {
+    return arrayValue.map(encodeURIComponent).join(',');
+  }
+
+  function encodeValue(value) {
+    if (Array.isArray(value)) {
+      return encodeArray(value);
+    }
+    return encodeURIComponent(String(value));
+  }
+
+  /**
+   * Append a query parameter to a URL.
+   *
+   * @param {string} url
+   * @param {string} key
+   * @param {string|number|boolean|Array<*>>} [value] - Provide an array
+   *   if the value is a list and commas between values need to be
+   *   preserved, unencoded.
+   * @returns {string} - Modified URL.
+   */
+  function appendQueryParam(url, key, value) {
+    if (value === false || value === null) {
+      return url;
+    }
+    var punctuation = /\?/.test(url) ? '&' : '?';
+    var query = encodeURIComponent(key);
+    if (value !== undefined && value !== '' && value !== true) {
+      query += '=' + encodeValue(value);
+    }
+    return '' + url + punctuation + query;
+  }
+
+  /**
+   * Derive a query string from an object and append it
+   * to a URL.
+   *
+   * @param {string} url
+   * @param {Object} [queryObject] - Values should be primitives.
+   * @returns {string} - Modified URL.
+   */
+  function appendQueryObject(url, queryObject) {
+    if (!queryObject) {
+      return url;
+    }
+
+    var result = url;
+    Object.keys(queryObject).forEach(function(key) {
+      var value = queryObject[key];
+      if (value === undefined) {
+        return;
+      }
+      if (Array.isArray(value)) {
+        value = value
+          .filter(function(v) {
+            return !!v;
+          })
+          .join(',');
+      }
+      result = appendQueryParam(result, key, value);
+    });
+    return result;
+  }
+
+  /**
+   * Prepend an origin to a URL. If the URL already has an
+   * origin, do nothing.
+   *
+   * @param {string} url
+   * @param {string} origin
+   * @returns {string} - Modified URL.
+   */
+  function prependOrigin(url, origin) {
+    if (!origin) {
+      return url;
+    }
+
+    if (url.slice(0, 4) === 'http') {
+      return url;
+    }
+
+    var delimiter = url[0] === '/' ? '' : '/';
+    return '' + origin.replace(/\/$/, '') + delimiter + url;
+  }
+
+  /**
+   * Interpolate values into a route with express-style,
+   * colon-prefixed route parameters.
+   *
+   * @param {string} route
+   * @param {Object} [params] - Values should be primitives
+   *   or arrays of primitives. Provide an array if the value
+   *   is a list and commas between values need to be
+   *   preserved, unencoded.
+   * @returns {string} - Modified URL.
+   */
+  function interpolateRouteParams(route, params) {
+    if (!params) {
+      return route;
+    }
+    return route.replace(/\/:([a-zA-Z0-9]+)/g, function(_, paramId) {
+      var value = params[paramId];
+      if (value === undefined) {
+        throw new Error('Unspecified route parameter ' + paramId);
+      }
+      var preppedValue = encodeValue(value);
+      return '/' + preppedValue;
+    });
+  }
+
+  var urlUtils = {
+    appendQueryObject: appendQueryObject,
+    appendQueryParam: appendQueryParam,
+    prependOrigin: prependOrigin,
+    interpolateRouteParams: interpolateRouteParams
+  };
+
+  var requestId = 1;
+
+  /**
+   * A Mapbox API request.
+   *
+   * Note that creating a `MapiRequest` does *not* send the request automatically.
+   * Use the request's `send` method to send it off and get a `Promise`.
+   *
+   * The `emitter` property is an `EventEmitter` that emits the following events:
+   *
+   * - `'response'` - Listeners will be called with a `MapiResponse`.
+   * - `'error'` - Listeners will be called with a `MapiError`.
+   * - `'downloadProgress'` - Listeners will be called with `ProgressEvents`.
+   * - `'uploadProgress'` - Listeners will be called with `ProgressEvents`.
+   *   Upload events are only available when the request includes a file.
+   *
+   * @class MapiRequest
+   * @property {EventEmitter} emitter - An event emitter. See above.
+   * @property {MapiClient} client - This request's `MapiClient`.
+   * @property {MapiResponse|null} response - If this request has been sent and received
+   *   a response, the response is available on this property.
+   * @property {MapiError|Error|null} error - If this request has been sent and
+   *   received an error in response, the error is available on this property.
+   * @property {boolean} aborted - If the request has been aborted
+   *   (via [`abort`](#abort)), this property will be `true`.
+   * @property {boolean} sent - If the request has been sent, this property will
+   *   be `true`. You cannot send the same request twice, so if you need to create
+   *   a new request that is the equivalent of an existing one, use
+   *   [`clone`](#clone).
+   * @property {string} path - The request's path, including colon-prefixed route
+   *   parameters.
+   * @property {string} origin - The request's origin.
+   * @property {string} method - The request's HTTP method.
+   * @property {Object} query - A query object, which will be transformed into
+   *   a URL query string.
+   * @property {Object} params - A route parameters object, whose values will
+   *   be interpolated the path.
+   * @property {Object} headers - The request's headers,
+   * @property {Object|string|null} body - Data to send with the request.
+   *   If the request has a body, it will also be sent with the header
+   *   `'Content-Type: application/json'`.
+   * @property {Blob|ArrayBuffer|string|ReadStream} file - A file to
+   *   send with the request. The browser client accepts Blobs and ArrayBuffers;
+   *   the Node client accepts strings (filepaths) and ReadStreams.
+   */
+
+  /**
+   * @ignore
+   * @param {MapiClient} client
+   * @param {Object} options
+   * @param {string} options.method
+   * @param {string} options.path
+   * @param {Object} [options.query={}]
+   * @param {Object} [options.params={}]
+   * @param {string} [options.origin]
+   * @param {Object} [options.headers]
+   * @param {Object} [options.body=null]
+   * @param {Blob|ArrayBuffer|string|ReadStream} [options.file=null]
+   */
+  function MapiRequest(client, options) {
+    if (!client) {
+      throw new Error('MapiRequest requires a client');
+    }
+    if (!options || !options.path || !options.method) {
+      throw new Error(
+        'MapiRequest requires an options object with path and method properties'
+      );
+    }
+
+    var defaultHeaders = {};
+    if (options.body) {
+      defaultHeaders['content-type'] = 'application/json';
+    }
+
+    var headersWithDefaults = immutable(defaultHeaders, options.headers);
+
+    // Disallows duplicate header names of mixed case,
+    // e.g. Content-Type and content-type.
+    var headers = Object.keys(headersWithDefaults).reduce(function(memo, name) {
+      memo[name.toLowerCase()] = headersWithDefaults[name];
+      return memo;
+    }, {});
+
+    this.id = requestId++;
+    this._options = options;
+
+    this.emitter = new eventemitter3();
+    this.client = client;
+    this.response = null;
+    this.error = null;
+    this.sent = false;
+    this.aborted = false;
+    this.path = options.path;
+    this.method = options.method;
+    this.origin = options.origin || client.origin;
+    this.query = options.query || {};
+    this.params = options.params || {};
+    this.body = options.body || null;
+    this.file = options.file || null;
+    this.headers = headers;
+  }
+
+  /**
+   * Get the URL of the request.
+   *
+   * @param {string} [accessToken] - By default, the access token of the request's
+   *   client is used.
+   * @return {string}
+   */
+  MapiRequest.prototype.url = function url(accessToken) {
+    var url = urlUtils.prependOrigin(this.path, this.origin);
+    url = urlUtils.appendQueryObject(url, this.query);
+    var routeParams = this.params;
+    if (accessToken) {
+      url = urlUtils.appendQueryParam(url, 'access_token', accessToken);
+      var accessTokenOwnerId = parseMapboxToken(accessToken).user;
+      routeParams = immutable({ ownerId: accessTokenOwnerId }, routeParams);
+    }
+    url = urlUtils.interpolateRouteParams(url, routeParams);
+    return url;
+  };
+
+  /**
+   * Send the request. Returns a Promise that resolves with a `MapiResponse`.
+   * You probably want to use `response.body`.
+   *
+   * `send` only retrieves the first page of paginated results. You can get
+   * the next page by using the `MapiResponse`'s [`nextPage`](#nextpage)
+   * function, or iterate through all pages using [`eachPage`](#eachpage)
+   * instead of `send`.
+   *
+   * @returns {Promise<MapiResponse>}
+   */
+  MapiRequest.prototype.send = function send() {
+    var self = this;
+
+    if (self.sent) {
+      throw new Error(
+        'This request has already been sent. Check the response and error properties. Create a new request with clone().'
+      );
+    }
+    self.sent = true;
+
+    return self.client.sendRequest(self).then(
+      function(response) {
+        self.response = response;
+        self.emitter.emit(constants.EVENT_RESPONSE, response);
+        return response;
+      },
+      function(error) {
+        self.error = error;
+        self.emitter.emit(constants.EVENT_ERROR, error);
+        throw error;
+      }
+    );
+  };
+
+  /**
+   * Abort the request.
+   *
+   * Any pending `Promise` returned by [`send`](#send) will be rejected with
+   * an error with `type: 'RequestAbortedError'`. If you've created a request
+   * that might be aborted, you need to catch and handle such errors.
+   *
+   * This method will also abort any requests created while fetching subsequent
+   * pages via [`eachPage`](#eachpage).
+   *
+   * If the request has not been sent or has already been aborted, nothing
+   * will happen.
+   */
+  MapiRequest.prototype.abort = function abort() {
+    if (this._nextPageRequest) {
+      this._nextPageRequest.abort();
+      delete this._nextPageRequest;
+    }
+
+    if (this.response || this.error || this.aborted) return;
+
+    this.aborted = true;
+    this.client.abortRequest(this);
+  };
+
+  /**
+   * Invoke a callback for each page of a paginated API response.
+   *
+   * The callback should have the following signature:
+   *
+   * ```js
+   * (
+   *   error: MapiError,
+   *   response: MapiResponse,
+   *   next: () => void
+   * ) => void
+   * ```
+   *
+   * **The next page will not be fetched until you've invoked the
+   * `next` callback**, indicating that you're ready for it.
+   *
+   * @param {Function} callback
+   */
+  MapiRequest.prototype.eachPage = function eachPage(callback) {
+    var self = this;
+
+    function handleResponse(response) {
+      function getNextPage() {
+        delete self._nextPageRequest;
+        var nextPageRequest = response.nextPage();
+        if (nextPageRequest) {
+          self._nextPageRequest = nextPageRequest;
+          getPage(nextPageRequest);
+        }
+      }
+      callback(null, response, getNextPage);
+    }
+
+    function handleError(error) {
+      callback(error, null, function() {});
+    }
+
+    function getPage(request) {
+      request.send().then(handleResponse, handleError);
+    }
+    getPage(this);
+  };
+
+  /**
+   * Clone this request.
+   *
+   * Each request can only be sent *once*. So if you'd like to send the
+   * same request again, clone it and send away.
+   *
+   * @returns {MapiRequest} - A new `MapiRequest` configured just like this one.
+   */
+  MapiRequest.prototype.clone = function clone() {
+    return this._extend();
+  };
+
+  /**
+   * @ignore
+   */
+  MapiRequest.prototype._extend = function _extend(options) {
+    var extendedOptions = immutable(this._options, options);
+    return new MapiRequest(this.client, extendedOptions);
+  };
+
+  var mapiRequest = MapiRequest;
+
+  /**
+   * A low-level Mapbox API client. Use it to create service clients
+   * that share the same configuration.
+   *
+   * Services and `MapiRequest`s use the underlying `MapiClient` to
+   * determine how to create, send, and abort requests in a way
+   * that is appropriate to the configuration and environment
+   * (Node or the browser).
+   *
+   * @class MapiClient
+   * @property {string} accessToken - The Mapbox access token assigned
+   *   to this client.
+   */
+
+  function MapiClient(options) {
+    if (!options || !options.accessToken) {
+      throw new Error('Cannot create a client without an access token');
+    }
+    // Try parsing the access token to determine right away if it's valid.
+    parseMapboxToken(options.accessToken);
+
+    this.accessToken = options.accessToken;
+    this.origin = options.origin || constants.API_ORIGIN;
+  }
+
+  MapiClient.prototype.createRequest = function createRequest(requestOptions) {
+    return new mapiRequest(this, requestOptions);
+  };
+
+  var mapiClient = MapiClient;
+
+  function BrowserClient(options) {
+    mapiClient.call(this, options);
+  }
+  BrowserClient.prototype = Object.create(mapiClient.prototype);
+  BrowserClient.prototype.constructor = BrowserClient;
+
+  BrowserClient.prototype.sendRequest = browserLayer.browserSend;
+  BrowserClient.prototype.abortRequest = browserLayer.browserAbort;
+
+  /**
+   * Create a client for the browser.
+   *
+   * @param {Object} options
+   * @param {string} options.accessToken
+   * @param {string} [options.origin]
+   * @returns {MapiClient}
+   */
+  function createBrowserClient(options) {
+    return new BrowserClient(options);
+  }
+
+  var browserClient = createBrowserClient;
+
+  var toString = Object.prototype.toString;
+
+  var isPlainObj = function (x) {
+    var prototype;
+    return toString.call(x) === '[object Object]' && (prototype = Object.getPrototypeOf(x), prototype === null || prototype === Object.getPrototypeOf({}));
+  };
+
+  /**
+   * Validators are functions which assert certain type.
+   * They can return a string which can then be used
+   * to display a helpful error message.
+   * They can also return a function for a custom error message.
+   */
+
+
+
+  var DEFAULT_ERROR_PATH = 'value';
+  var NEWLINE_INDENT = '\n  ';
+
+  var v = {};
+
+  /**
+   * Runners
+   *
+   * Take root validators and run assertion
+   */
+  v.assert = function(rootValidator, options) {
+    options = options || {};
+    return function(value) {
+      var message = validate(rootValidator, value);
+      // all good
+      if (!message) {
+        return;
+      }
+
+      var errorMessage = processMessage(message, options);
+
+      if (options.apiName) {
+        errorMessage = options.apiName + ': ' + errorMessage;
+      }
+
+      throw new Error(errorMessage);
+    };
+  };
+
+  /**
+   * Higher Order Validators
+   *
+   * validators which take other validators as input
+   * and output a new validator
+   */
+  v.shape = function shape(validatorObj) {
+    var validators = objectEntries(validatorObj);
+    return function shapeValidator(value) {
+      var validationResult = validate(v.plainObject, value);
+
+      if (validationResult) {
+        return validationResult;
+      }
+
+      var key, validator;
+      var errorMessages = [];
+
+      for (var i = 0; i < validators.length; i++) {
+        key = validators[i].key;
+        validator = validators[i].value;
+        validationResult = validate(validator, value[key]);
+
+        if (validationResult) {
+          // return [key].concat(validationResult);
+          errorMessages.push([key].concat(validationResult));
+        }
+      }
+
+      if (errorMessages.length < 2) {
+        return errorMessages[0];
+      }
+
+      // enumerate all the error messages
+      return function(options) {
+        errorMessages = errorMessages.map(function(message) {
+          var key = message[0];
+          var renderedMessage = processMessage(message, options)
+            .split('\n')
+            .join(NEWLINE_INDENT); // indents any inner nesting
+          return '- ' + key + ': ' + renderedMessage;
+        });
+
+        var objectId = options.path.join('.');
+        var ofPhrase = objectId === DEFAULT_ERROR_PATH ? '' : ' of ' + objectId;
+
+        return (
+          'The following properties' +
+          ofPhrase +
+          ' have invalid values:' +
+          NEWLINE_INDENT +
+          errorMessages.join(NEWLINE_INDENT)
+        );
+      };
+    };
+  };
+
+  v.strictShape = function strictShape(validatorObj) {
+    var shapeValidator = v.shape(validatorObj);
+    return function strictShapeValidator(value) {
+      var shapeResult = shapeValidator(value);
+      if (shapeResult) {
+        return shapeResult;
+      }
+
+      var invalidKeys = Object.keys(value).reduce(function(memo, valueKey) {
+        if (validatorObj[valueKey] === undefined) {
+          memo.push(valueKey);
+        }
+        return memo;
+      }, []);
+
+      if (invalidKeys.length !== 0) {
+        return function() {
+          return 'The following keys are invalid: ' + invalidKeys.join(', ');
+        };
+      }
+    };
+  };
+
+  v.arrayOf = function arrayOf(validator) {
+    return createArrayValidator(validator);
+  };
+
+  v.tuple = function tuple() {
+    var validators = Array.isArray(arguments[0])
+      ? arguments[0]
+      : Array.prototype.slice.call(arguments);
+    return createArrayValidator(validators);
+  };
+
+  // Currently array validation fails when the first invalid item is found.
+  function createArrayValidator(validators) {
+    var validatingTuple = Array.isArray(validators);
+    var getValidator = function(index) {
+      if (validatingTuple) {
+        return validators[index];
+      }
+      return validators;
+    };
+
+    return function arrayValidator(value) {
+      var validationResult = validate(v.plainArray, value);
+      if (validationResult) {
+        return validationResult;
+      }
+
+      if (validatingTuple && value.length !== validators.length) {
+        return 'an array with ' + validators.length + ' items';
+      }
+
+      for (var i = 0; i < value.length; i++) {
+        validationResult = validate(getValidator(i), value[i]);
+        if (validationResult) {
+          return [i].concat(validationResult);
+        }
+      }
+    };
+  }
+
+  v.required = function required(validator) {
+    function requiredValidator(value) {
+      if (value == null) {
+        return function(options) {
+          return formatErrorMessage(
+            options,
+            isArrayCulprit(options.path)
+              ? 'cannot be undefined/null.'
+              : 'is required.'
+          );
+        };
+      }
+      return validator.apply(this, arguments);
+    }
+    requiredValidator.__required = true;
+
+    return requiredValidator;
+  };
+
+  v.oneOfType = function oneOfType() {
+    var validators = Array.isArray(arguments[0])
+      ? arguments[0]
+      : Array.prototype.slice.call(arguments);
+    return function oneOfTypeValidator(value) {
+      var messages = validators
+        .map(function(validator) {
+          return validate(validator, value);
+        })
+        .filter(Boolean);
+
+      // If we don't have as many messages as no. of validators,
+      // then at least one validator was ok with the value.
+      if (messages.length !== validators.length) {
+        return;
+      }
+
+      // check primitive type
+      if (
+        messages.every(function(message) {
+          return message.length === 1 && typeof message[0] === 'string';
+        })
+      ) {
+        return orList(
+          messages.map(function(m) {
+            return m[0];
+          })
+        );
+      }
+
+      // Complex oneOfTypes like
+      // `v.oneOftypes(v.shape({name: v.string})`, `v.shape({name: v.number}))`
+      // are complex ¯\_(ツ)_/¯. For the current scope only returning the longest message.
+      return messages.reduce(function(max, arr) {
+        return arr.length > max.length ? arr : max;
+      });
+    };
+  };
+
+  /**
+   * Meta Validators
+   * which take options as argument (not validators)
+   * and return a new primitive validator
+   */
+  v.equal = function equal(compareWith) {
+    return function equalValidator(value) {
+      if (value !== compareWith) {
+        return JSON.stringify(compareWith);
+      }
+    };
+  };
+
+  v.oneOf = function oneOf() {
+    var options = Array.isArray(arguments[0])
+      ? arguments[0]
+      : Array.prototype.slice.call(arguments);
+    var validators = options.map(function(value) {
+      return v.equal(value);
+    });
+
+    return v.oneOfType.apply(this, validators);
+  };
+
+  v.range = function range(compareWith) {
+    var min = compareWith[0];
+    var max = compareWith[1];
+    return function rangeValidator(value) {
+      var validationResult = validate(v.number, value);
+
+      if (validationResult || value < min || value > max) {
+        return 'number between ' + min + ' & ' + max + ' (inclusive)';
+      }
+    };
+  };
+
+  /**
+   * Primitive validators
+   *
+   * simple validators which return a string or undefined
+   */
+  v.any = function any() {
+    return;
+  };
+
+  v.boolean = function boolean(value) {
+    if (typeof value !== 'boolean') {
+      return 'boolean';
+    }
+  };
+
+  v.number = function number(value) {
+    if (typeof value !== 'number') {
+      return 'number';
+    }
+  };
+
+  v.plainArray = function plainArray(value) {
+    if (!Array.isArray(value)) {
+      return 'array';
+    }
+  };
+
+  v.plainObject = function plainObject(value) {
+    if (!isPlainObj(value)) {
+      return 'object';
+    }
+  };
+
+  v.string = function string(value) {
+    if (typeof value !== 'string') {
+      return 'string';
+    }
+  };
+
+  v.func = function func(value) {
+    if (typeof value !== 'function') {
+      return 'function';
+    }
+  };
+
+  function validate(validator, value) {
+    // assertions are optional by default unless wrapped in v.require
+    if (value == null && !validator.hasOwnProperty('__required')) {
+      return;
+    }
+
+    var result = validator(value);
+
+    if (result) {
+      return Array.isArray(result) ? result : [result];
+    }
+  }
+
+  function processMessage(message, options) {
+    // message array follows the convention
+    // [...path, result]
+    // path is an array of object keys / array indices
+    // result is output of the validator
+    var len = message.length;
+
+    var result = message[len - 1];
+    var path = message.slice(0, len - 1);
+
+    if (path.length === 0) {
+      path = [DEFAULT_ERROR_PATH];
+    }
+    options = immutable(options, { path: path });
+
+    return typeof result === 'function'
+      ? result(options) // allows customization of result
+      : formatErrorMessage(options, prettifyResult(result));
+  }
+
+  function orList(list) {
+    if (list.length < 2) {
+      return list[0];
+    }
+    if (list.length === 2) {
+      return list.join(' or ');
+    }
+    return list.slice(0, -1).join(', ') + ', or ' + list.slice(-1);
+  }
+
+  function prettifyResult(result) {
+    return 'must be ' + addArticle(result) + '.';
+  }
+
+  function addArticle(nounPhrase) {
+    if (/^an? /.test(nounPhrase)) {
+      return nounPhrase;
+    }
+    if (/^[aeiou]/i.test(nounPhrase)) {
+      return 'an ' + nounPhrase;
+    }
+    if (/^[a-z]/i.test(nounPhrase)) {
+      return 'a ' + nounPhrase;
+    }
+    return nounPhrase;
+  }
+
+  function formatErrorMessage(options, prettyResult) {
+    var arrayCulprit = isArrayCulprit(options.path);
+    var output = options.path.join('.') + ' ' + prettyResult;
+    var prepend = arrayCulprit ? 'Item at position ' : '';
+
+    return prepend + output;
+  }
+
+  function isArrayCulprit(path) {
+    return typeof path[path.length - 1] == 'number' || typeof path[0] == 'number';
+  }
+
+  function objectEntries(obj) {
+    return Object.keys(obj || {}).map(function(key) {
+      return { key: key, value: obj[key] };
+    });
+  }
+
+  v.validate = validate;
+  v.processMessage = processMessage;
+
+  var lib = v;
+
+  function file(value) {
+    // If we're in a browser so Blob is available, the file must be that.
+    // In Node, however, it could be a filepath or a pipeable (Readable) stream.
+    if (typeof window !== 'undefined') {
+      if (value instanceof commonjsGlobal.Blob || value instanceof commonjsGlobal.ArrayBuffer) {
+        return;
+      }
+      return 'Blob or ArrayBuffer';
+    }
+    if (typeof value === 'string' || value.pipe !== undefined) {
+      return;
+    }
+    return 'Filename or Readable stream';
+  }
+
+  function assertShape(validatorObj, apiName) {
+    return lib.assert(lib.strictShape(validatorObj), apiName);
+  }
+
+  function date(value) {
+    var msg = 'date';
+    if (typeof value === 'boolean') {
+      return msg;
+    }
+    try {
+      var date = new Date(value);
+      if (date.getTime && isNaN(date.getTime())) {
+        return msg;
+      }
+    } catch (e) {
+      return msg;
+    }
+  }
+
+  function coordinates(value) {
+    return lib.tuple(lib.number, lib.number)(value);
+  }
+
+  var validator = immutable(lib, {
+    file: file,
+    date: date,
+    coordinates: coordinates,
+    assertShape: assertShape
+  });
+
+  /**
+   * Create a new object by picking properties off an existing object.
+   * The second param can be overloaded as a callback for
+   * more fine grained picking of properties.
+   * @param {Object} source
+   * @param {Array<string>|function(string, Object):boolean} keys
+   * @returns {Object}
+   */
+  function pick(source, keys) {
+    var filter = function(key, val) {
+      return keys.indexOf(key) !== -1 && val !== undefined;
+    };
+
+    if (typeof keys === 'function') {
+      filter = keys;
+    }
+
+    return Object.keys(source)
+      .filter(function(key) {
+        return filter(key, source[key]);
+      })
+      .reduce(function(result, key) {
+        result[key] = source[key];
+        return result;
+      }, {});
+  }
+
+  var pick_1 = pick;
+
+  // This will create the environment-appropriate client.
+
+
+  function createServiceFactory(ServicePrototype) {
+    return function(clientOrConfig) {
+      var client;
+      if (mapiClient.prototype.isPrototypeOf(clientOrConfig)) {
+        client = clientOrConfig;
+      } else {
+        client = browserClient(clientOrConfig);
+      }
+      var service = Object.create(ServicePrototype);
+      service.client = client;
+      return service;
+    };
+  }
+
+  var createServiceFactory_1 = createServiceFactory;
+
+  /**
+   * Datasets API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#datasets).
+   */
+  var Datasets = {};
+
+  /**
+   * List datasets in your account.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#list-datasets).
+   *
+   * @return {MapiRequest}
+   */
+  Datasets.listDatasets = function() {
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/datasets/v1/:ownerId'
+    });
+  };
+
+  /**
+   * Create a new, empty dataset.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#create-dataset).
+   *
+   * @param {Object} config
+   * @param {string} [config.name]
+   * @param {string} [config.description]
+   * @return {MapiRequest}
+   */
+  Datasets.createDataset = function(config) {
+    validator.assertShape({
+      name: validator.string,
+      description: validator.string
+    })(config);
+
+    return this.client.createRequest({
+      method: 'POST',
+      path: '/datasets/v1/:ownerId',
+      body: config
+    });
+  };
+
+  /**
+   * Get metadata about a dataset.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#retrieve-a-dataset).
+   *
+   * @param {Object} config
+   * @param {string} config.datasetId
+   * @return {MapiRequest}
+   */
+  Datasets.getMetadata = function(config) {
+    validator.assertShape({
+      datasetId: validator.required(validator.string),
+      description: validator.string
+    })(config);
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/datasets/v1/:ownerId/:datasetId',
+      params: config
+    });
+  };
+
+  /**
+   * Update user-defined properties of a dataset's metadata.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#update-a-dataset).
+   *
+   * @param {Object} config
+   * @param {string} config.datasetId
+   * @param {string} [config.name]
+   * @param {string} [config.description]
+   * @return {MapiRequest}
+   */
+  Datasets.updateMetadata = function(config) {
+    validator.assertShape({
+      datasetId: validator.required(validator.string),
+      name: validator.string,
+      description: validator.string
+    })(config);
+
+    return this.client.createRequest({
+      method: 'PATCH',
+      path: '/datasets/v1/:ownerId/:datasetId',
+      params: pick_1(config, ['datasetId']),
+      body: pick_1(config, ['name', 'description'])
+    });
+  };
+
+  /**
+   * Delete a dataset, including all features it contains.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#delete-a-dataset).
+   *
+   * @param {Object} config
+   * @param {string} config.datasetId
+   * @return {MapiRequest}
+   */
+  Datasets.deleteDataset = function(config) {
+    validator.assertShape({
+      datasetId: validator.required(validator.string)
+    })(config);
+
+    return this.client.createRequest({
+      method: 'DELETE',
+      path: '/datasets/v1/:ownerId/:datasetId',
+      params: config
+    });
+  };
+
+  /**
+   * List features in a dataset.
+   *
+   * This endpoint supports pagination. Use `MapiRequest#eachPage` or manually specify
+   * the `limit` and `start` options.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#list-features).
+   *
+   * @param {Object} config
+   * @param {string} config.datasetId
+   * @param {number} [config.limit] - Only list this number of features.
+   * @param {string} [config.start] - The ID of the feature from which the listing should
+   *   start.
+   * @return {MapiRequest}
+   */
+  Datasets.listFeatures = function(config) {
+    validator.assertShape({
+      datasetId: validator.required(validator.string),
+      limit: validator.number,
+      start: validator.string
+    })(config);
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/datasets/v1/:ownerId/:datasetId/features',
+      params: pick_1(config, ['datasetId']),
+      query: pick_1(config, ['limit', 'start'])
+    });
+  };
+
+  /**
+   * Add a feature to a dataset or update an existing one.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#insert-or-update-a-feature).
+   *
+   * @param {Object} config
+   * @param {string} config.datasetId
+   * @param {string} config.featureId
+   * @param {Object} config.feature - Valid GeoJSON that is not a `FeatureCollection`.
+   *   If the feature has a top-level `id` property, it must match the `featureId` you specify.
+   * @return {MapiRequest}
+   */
+  Datasets.putFeature = function(config) {
+    validator.assertShape({
+      datasetId: validator.required(validator.string),
+      featureId: validator.required(validator.string),
+      feature: validator.required(validator.plainObject)
+    })(config);
+
+    if (
+      config.feature.id !== undefined &&
+      config.feature.id !== config.featureId
+    ) {
+      throw new Error('featureId must match the id property of the feature');
+    }
+
+    return this.client.createRequest({
+      method: 'PUT',
+      path: '/datasets/v1/:ownerId/:datasetId/features/:featureId',
+      params: pick_1(config, ['datasetId', 'featureId']),
+      body: config.feature
+    });
+  };
+
+  /**
+   * Get a feature in a dataset.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#retrieve-a-feature).
+   *
+   * @param {Object} config
+   * @param {string} config.datasetId
+   * @param {string} config.featureId
+   * @return {MapiRequest}
+   */
+  Datasets.getFeature = function(config) {
+    validator.assertShape({
+      datasetId: validator.required(validator.string),
+      featureId: validator.required(validator.string)
+    })(config);
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/datasets/v1/:ownerId/:datasetId/features/:featureId',
+      params: config
+    });
+  };
+
+  /**
+   * Delete a feature in a dataset.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#delete-a-feature).
+   *
+   * @param {Object} config
+   * @param {string} config.datasetId
+   * @param {string} config.featureId
+   * @return {MapiRequest}
+   */
+  Datasets.deleteFeature = function(config) {
+    validator.assertShape({
+      datasetId: validator.required(validator.string),
+      featureId: validator.required(validator.string)
+    })(config);
+
+    return this.client.createRequest({
+      method: 'DELETE',
+      path: '/datasets/v1/:ownerId/:datasetId/features/:featureId',
+      params: config
+    });
+  };
+
+  var datasets = createServiceFactory_1(Datasets);
+
+  function objectClean(obj) {
+    return pick_1(obj, function(_, val) {
+      return val != null;
+    });
+  }
+
+  var objectClean_1 = objectClean;
+
+  function objectMap(obj, cb) {
+    return Object.keys(obj).reduce(function(result, key) {
+      result[key] = cb(key, obj[key]);
+      return result;
+    }, {});
+  }
+
+  var objectMap_1 = objectMap;
+
+  /**
+   * Stringify all the boolean values in an object, so true becomes "true".
+   *
+   * @param {Object} obj
+   * @returns {Object}
+   */
+  function stringifyBoolean(obj) {
+    return objectMap_1(obj, function(_, value) {
+      return typeof value === 'boolean' ? JSON.stringify(value) : value;
+    });
+  }
+
+  var stringifyBooleans = stringifyBoolean;
+
+  /**
+   * Directions API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#directions).
+   */
+  var Directions = {};
+
+  /**
+   * Get directions.
+   *
+   * Please read [the full HTTP service documentation](https://www.mapbox.com/api-documentation/#directions)
+   * to understand all of the available options.
+   *
+   * @param {Object} config
+   * @param {'driving-traffic'|'driving'|'walking'|'cycling'} [config.profile="driving"]
+   * @param {Array<DirectionsWaypoint>} config.waypoints - An ordered array of [`DirectionsWaypoint`](#directionswaypoint) objects, between 2 and 25 (inclusive).
+   * @param {boolean} [config.alternatives=false] - Whether to try to return alternative routes.
+   * @param {Array<'duration'|'distance'|'speed'|'congestion'>} [config.annotations] - Specify additional metadata that should be returned.
+   * @param {boolean} [config.bannerInstructions=false] - Should be used in conjunction with `steps`.
+   * @param {boolean} [config.continueStraight] - Sets the allowed direction of travel when departing intermediate waypoints.
+   * @param {string} [config.exclude] - Exclude certain road types from routing. See HTTP service documentation for options.
+   * @param {'geojson'|'polyline'|'polyline6'} [config.geometries="polyline"] - Format of the returned geometry.
+   * @param {string} [config.language="en"] - Language of returned turn-by-turn text instructions.
+   *   See options listed in [the HTTP service documentation](https://www.mapbox.com/api-documentation/#instructions-languages).
+   * @param {'simplified'|'full'|'false'} [config.overview="simplified"] - Type of returned overview geometry.
+   * @param {boolean} [config.roundaboutExits=false] - Emit insbtructions at roundabout exits.
+   * @param {boolean} [config.steps=false] - Whether to return steps and turn-by-turn instructions.
+   * @param {boolean} [config.voiceInstructions=false] - Whether or not to return SSML marked-up text for voice guidance along the route.
+   * @param {'imperial'|'metric'} [config.voiceUnits="imperial"] - Which type of units to return in the text for voice instructions.
+   * @return {MapiRequest}
+   */
+  Directions.getDirections = function(config) {
+    validator.assertShape({
+      profile: validator.oneOf('driving-traffic', 'driving', 'walking', 'cycling'),
+      waypoints: validator.required(
+        validator.arrayOf(
+          validator.shape({
+            coordinates: validator.required(validator.coordinates),
+            approach: validator.oneOf('unrestricted', 'curb'),
+            bearing: validator.arrayOf(validator.range([0, 360])),
+            radius: validator.oneOfType(validator.number, validator.equal('unlimited')),
+            waypointName: validator.string
+          })
+        )
+      ),
+      alternatives: validator.boolean,
+      annotations: validator.arrayOf(
+        validator.oneOf('duration', 'distance', 'speed', 'congestion')
+      ),
+      bannerInstructions: validator.boolean,
+      continueStraight: validator.boolean,
+      exclude: validator.string,
+      geometries: validator.string,
+      language: validator.string,
+      overview: validator.string,
+      roundaboutExits: validator.boolean,
+      steps: validator.boolean,
+      voiceInstructions: validator.boolean,
+      voiceUnits: validator.string
+    })(config);
+
+    config.profile = config.profile || 'driving';
+
+    var path = {
+      coordinates: [],
+      approach: [],
+      bearing: [],
+      radius: [],
+      waypointName: []
+    };
+
+    var waypointCount = config.waypoints.length;
+    if (waypointCount < 2 || waypointCount > 25) {
+      throw new Error(
+        'waypoints must include between 2 and 25 DirectionsWaypoints'
+      );
+    }
+
+    /**
+     * @typedef {Object} DirectionsWaypoint
+     * @property {Coordinates} coordinates
+     * @property {'unrestricted'|'curb'} [approach="unrestricted"] - Used to indicate how requested routes consider from which side of the road to approach the waypoint.
+     * @property {[number, number]} [bearing] - Used to filter the road segment the waypoint will be placed on by direction and dictates the angle of approach.
+     *   This option should always be used in conjunction with a `radius`. The first value is an angle clockwise from true north between 0 and 360,
+     *   and the second is the range of degrees the angle can deviate by.
+     * @property {number|'unlimited'} [radius] - Maximum distance in meters that the coordinate is allowed to move when snapped to a nearby road segment.
+     * @property {string} [waypointName] - Custom name for the waypoint used for the arrival instruction in banners and voice instructions.
+     */
+    config.waypoints.forEach(function(waypoint) {
+      path.coordinates.push(
+        waypoint.coordinates[0] + ',' + waypoint.coordinates[1]
+      );
+
+      // join props which come in pairs
+      ['bearing'].forEach(function(prop) {
+        if (waypoint.hasOwnProperty(prop) && waypoint[prop] != null) {
+          waypoint[prop] = waypoint[prop].join(',');
+        }
+      });
+
+      ['approach', 'bearing', 'radius', 'waypointName'].forEach(function(prop) {
+        if (waypoint.hasOwnProperty(prop) && waypoint[prop] != null) {
+          path[prop].push(waypoint[prop]);
+        } else {
+          path[prop].push('');
+        }
+      });
+    });
+
+    ['approach', 'bearing', 'radius', 'waypointName'].forEach(function(prop) {
+      // avoid sending params which are all `;`
+      if (
+        path[prop].every(function(char) {
+          return char === '';
+        })
+      ) {
+        delete path[prop];
+      } else {
+        path[prop] = path[prop].join(';');
+      }
+    });
+
+    var query = stringifyBooleans({
+      alternatives: config.alternatives,
+      annotations: config.annotations,
+      banner_instructions: config.bannerInstructions,
+      continue_straight: config.continueStraight,
+      exclude: config.exclude,
+      geometries: config.geometries,
+      language: config.language,
+      overview: config.overview,
+      roundabout_exits: config.roundaboutExits,
+      steps: config.steps,
+      voice_instructions: config.voiceInstructions,
+      voice_units: config.voiceUnits,
+      approaches: path.approach,
+      bearings: path.bearing,
+      radiuses: path.radius,
+      waypoint_names: path.waypointName
+    });
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/directions/v5/mapbox/:profile/:coordinates',
+      params: {
+        profile: config.profile,
+        coordinates: path.coordinates.join(';')
+      },
+      query: objectClean_1(query)
+    });
+  };
+
+  var directions = createServiceFactory_1(Directions);
+
+  /**
+   * Geocoding API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#geocoding).
+   */
+  var Geocoding = {};
+
+  var featureTypes = [
+    'country',
+    'region',
+    'postcode',
+    'district',
+    'place',
+    'locality',
+    'neighborhood',
+    'address',
+    'poi',
+    'poi.landmark'
+  ];
+
+  /**
+   * Search for a place.
+   *
+   * See the [public documentation](https://www.mapbox.com/api-documentation/#search-for-places).
+   *
+   * @param {Object} config
+   * @param {string} config.query - A place name.
+   * @param {'mapbox.places'|'mapbox.places-permanent'} [config.mode="mapbox.places"] - Either `mapbox.places` for ephemeral geocoding, or `mapbox.places-permanent` for storing results and batch geocoding.
+   * @param {Array<string>} [config.countries] - Limits results to the specified countries.
+   *   Each item in the array should be an [ISO 3166 alpha 2 country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2).
+   * @param {Coordinates} [config.proximity] - Bias local results based on a provided location.
+   * @param {Array<'country'|'region'|'postcode'|'district'|'place'|'locality'|'neighborhood'|'address'|'poi'|'poi.landmark'>} [config.types] - Filter results by feature types.
+   * @param {boolean} [config.autocomplete=true] - Return autocomplete results or not.
+   * @param {BoundingBox} [config.bbox] - Limit results to a bounding box.
+   * @param {number} [config.limit=5] - Limit the number of results returned.
+   * @param {Array<string>} [config.language] - Specify the language to use for response text and, for forward geocoding, query result weighting.
+   *  Options are [IETF language tags](https://en.wikipedia.org/wiki/IETF_language_tag) comprised of a mandatory
+   *  [ISO 639-1 language code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) and optionally one or more IETF subtags for country or script.
+   * @return {MapiRequest}
+   */
+  Geocoding.forwardGeocode = function(config) {
+    validator.assertShape({
+      query: validator.required(validator.string),
+      mode: validator.oneOf('mapbox.places', 'mapbox.places-permanent'),
+      countries: validator.arrayOf(validator.string),
+      proximity: validator.coordinates,
+      types: validator.arrayOf(validator.oneOf(featureTypes)),
+      autocomplete: validator.boolean,
+      bbox: validator.arrayOf(validator.number),
+      limit: validator.number,
+      language: validator.arrayOf(validator.string)
+    })(config);
+
+    config.mode = config.mode || 'mapbox.places';
+
+    var query = stringifyBooleans(
+      immutable(
+        { country: config.countries },
+        pick_1(config, [
+          'proximity',
+          'types',
+          'autocomplete',
+          'bbox',
+          'limit',
+          'language'
+        ])
+      )
+    );
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/geocoding/v5/:mode/:query.json',
+      params: pick_1(config, ['mode', 'query']),
+      query: query
+    });
+  };
+
+  /**
+   * Search for places near coordinates.
+   *
+   * See the [public documentation](https://www.mapbox.com/api-documentation/#retrieve-places-near-a-location).
+   *
+   * @param {Object} config
+   * @param {Coordinates} config.query - Coordinates at which features will be searched.
+   * @param {'mapbox.places'|'mapbox.places-permanent'} [config.mode="mapbox.places"] - Either `mapbox.places` for ephemeral geocoding, or `mapbox.places-permanent` for storing results and batch geocoding.
+   * @param {Array<string>} [config.countries] - Limits results to the specified countries.
+   *   Each item in the array should be an [ISO 3166 alpha 2 country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2).
+   * @param {Array<'country'|'region'|'postcode'|'district'|'place'|'locality'|'neighborhood'|'address'|'poi'|'poi.landmark'>} [config.types] - Filter results by feature types.
+   * @param {BoundingBox} [config.bbox] - Limit results to a bounding box.
+   * @param {number} [config.limit=1] - Limit the number of results returned. If using this option, you must provide a single item for `types`.
+   * @param {Array<string>} [config.language] - Specify the language to use for response text and, for forward geocoding, query result weighting.
+   *  Options are [IETF language tags](https://en.wikipedia.org/wiki/IETF_language_tag) comprised of a mandatory
+   *  [ISO 639-1 language code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) and optionally one or more IETF subtags for country or script.
+   * @param {'distance'|'score'} [config.reverseMode='distance'] - Set the factors that are used to sort nearby results.
+   * @return {MapiRequest}
+   */
+  Geocoding.reverseGeocode = function(config) {
+    validator.assertShape({
+      query: validator.required(validator.coordinates),
+      mode: validator.oneOf('mapbox.places', 'mapbox.places-permanent'),
+      countries: validator.arrayOf(validator.string),
+      types: validator.arrayOf(validator.oneOf(featureTypes)),
+      bbox: validator.arrayOf(validator.number),
+      limit: validator.number,
+      language: validator.arrayOf(validator.string),
+      reverseMode: validator.oneOf('distance', 'score')
+    })(config);
+
+    config.mode = config.mode || 'mapbox.places';
+
+    var query = stringifyBooleans(
+      immutable(
+        { country: config.countries },
+        pick_1(config, [
+          'country',
+          'types',
+          'bbox',
+          'limit',
+          'language',
+          'reverseMode'
+        ])
+      )
+    );
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/geocoding/v5/:mode/:query.json',
+      params: pick_1(config, ['mode', 'query']),
+      query: query
+    });
+  };
+
+  var geocoding = createServiceFactory_1(Geocoding);
+
+  /**
+   * Map Matching API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#map-matching).
+   */
+  var MapMatching = {};
+
+  /**
+   * Snap recorded location traces to roads and paths.
+   *
+   * @param {Object} config
+   * @param {Array<MapMatchingPoint>} config.points - An ordered array of [`MapMatchingPoint`](#mapmatchingpoint)s, between 2 and 100 (inclusive).
+   * @param {'driving-traffic'|'driving'|'walking'|'cycling'} [config.profile=driving] - A directions profile ID.
+   * @param {Array<'duration'|'distance'|'speed'>} [config.annotations] - Specify additional metadata that should be returned.
+   * @param {'geojson'|'polyline'|'polyline6'} [config.geometries="polyline"] - Format of the returned geometry.
+   * @param {string} [config.language="en"] - Language of returned turn-by-turn text instructions.
+   *   See [supported languages](https://www.mapbox.com/api-documentation/#instructions-languages).
+   * @param {'simplified'|'full'|'false'} [config.overview="simplified"] - Type of returned overview geometry.
+   * @param {boolean} [config.steps=false] - Whether to return steps and turn-by-turn instructions.
+   * @param {boolean} [config.tidy=false] - Whether or not to transparently remove clusters and re-sample traces for improved map matching results.
+   * @return {MapiRequest}
+   */
+  MapMatching.getMatch = function(config) {
+    validator.assertShape({
+      points: validator.required(
+        validator.arrayOf(
+          validator.shape({
+            coordinates: validator.required(validator.coordinates),
+            approach: validator.oneOf('unrestricted', 'curb'),
+            radius: validator.range([0, 50]),
+            isWaypoint: validator.boolean,
+            waypointName: validator.string,
+            timestamp: validator.date
+          })
+        )
+      ),
+      profile: validator.oneOf('driving-traffic', 'driving', 'walking', 'cycling'),
+      annotations: validator.arrayOf(validator.oneOf('duration', 'distance', 'speed')),
+      geometries: validator.oneOf('geojson', 'polyline', 'polyline6'),
+      language: validator.string,
+      overview: validator.oneOf('full', 'simplified', 'false'),
+      steps: validator.boolean,
+      tidy: validator.boolean
+    })(config);
+
+    var pointCount = config.points.length;
+    if (pointCount < 2 || pointCount > 100) {
+      throw new Error('points must include between 2 and 100 MapMatchingPoints');
+    }
+
+    config.profile = config.profile || 'driving';
+
+    var path = {
+      coordinates: [],
+      approach: [],
+      radius: [],
+      isWaypoint: [],
+      waypointName: [],
+      timestamp: []
+    };
+
+    /**
+     * @typedef {Object} MapMatchingPoint
+     * @property {Coordinates} coordinates
+     * @property {'unrestricted'|'curb'} [approach="unrestricted"] - Used to indicate how requested routes consider from which side of the road to approach a waypoint.
+     * @property {number} [radius=5] - A number in meters indicating the assumed precision of the used tracking device.
+     * @property {boolean} [isWaypoint=true] - Whether this coordinate is waypoint or not. The first and last coordinates will always be waypoints.
+     * @property {string} [waypointName] - Custom name for the waypoint used for the arrival instruction in banners and voice instructions. Will be ignored unless `isWaypoint` is `true`.
+     * @property {tring | number | Date} [timestamp] - Datetime corresponding to the coordinate.
+     */
+    config.points.forEach(function(obj) {
+      path.coordinates.push(obj.coordinates[0] + ',' + obj.coordinates[1]);
+
+      // isWaypoint
+      if (obj.hasOwnProperty('isWaypoint') && obj.isWaypoint != null) {
+        path.isWaypoint.push(obj.isWaypoint);
+      } else {
+        path.isWaypoint.push(true); // default value
+      }
+
+      if (obj.hasOwnProperty('timestamp') && obj.timestamp != null) {
+        path.timestamp.push(Number(new Date(obj.timestamp)));
+      } else {
+        path.timestamp.push('');
+      }
+
+      ['approach', 'radius', 'waypointName'].forEach(function(prop) {
+        if (obj.hasOwnProperty(prop) && obj[prop] != null) {
+          path[prop].push(obj[prop]);
+        } else {
+          path[prop].push('');
+        }
+      });
+    });
+
+    ['coordinates', 'approach', 'radius', 'waypointName', 'timestamp'].forEach(
+      function(prop) {
+        // avoid sending params which are all `;`
+        if (
+          path[prop].every(function(value) {
+            return value === '';
+          })
+        ) {
+          delete path[prop];
+        } else {
+          path[prop] = path[prop].join(';');
+        }
+      }
+    );
+
+    // the api requires the first and last items to be true.
+    path.isWaypoint[0] = true;
+    path.isWaypoint[path.isWaypoint.length - 1] = true;
+
+    if (
+      path.isWaypoint.every(function(value) {
+        return value === true;
+      })
+    ) {
+      delete path.isWaypoint;
+    } else {
+      // the api requires the indexes to be sent
+      path.isWaypoint = path.isWaypoint
+        .map(function(val, i) {
+          return val === true ? i : '';
+        })
+        .join(';');
+    }
+
+    var body = stringifyBooleans(
+      objectClean_1({
+        annotations: config.annotations,
+        geometries: config.geometries,
+        language: config.language,
+        overview: config.overview,
+        steps: config.steps,
+        tidy: config.tidy,
+        approaches: path.approach,
+        radiuses: path.radius,
+        waypoints: path.isWaypoint,
+        timestamps: path.timestamp,
+        waypoint_names: path.waypointName,
+        coordinates: path.coordinates
+      })
+    );
+
+    // the matching api expects a form-urlencoded
+    // post request.
+    return this.client.createRequest({
+      method: 'POST',
+      path: '/matching/v5/mapbox/:profile',
+      params: {
+        profile: config.profile
+      },
+      body: urlUtils.appendQueryObject('', body).substring(1), // need to remove the char`?`
+      headers: {
+        'content-type': 'application/x-www-form-urlencoded'
+      }
+    });
+  };
+
+  var mapMatching = createServiceFactory_1(MapMatching);
+
+  /**
+   * Map Matching API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#matrix).
+   */
+  var Matrix = {};
+
+  /**
+   * Get a duration and/or distance matrix showing travel times and distances between coordinates.
+   *
+   * @param {Object} config
+   * @param {Array<MatrixPoint>} config.points - An ordered array of [`MatrixPoint`](#matrixpoint)s, between 2 and 100 (inclusive).
+   * @param {'driving-traffic'|'driving'|'walking'|'cycling'} [config.profile=driving] - A Mapbox Directions routing profile ID.
+   * @param {'all'|Array<number>} [config.sources] - Use coordinates with given index as sources.
+   * @param {'all'|Array<number>} [config.destinations] - Use coordinates with given index as destinations.
+   * @param {Array<'distance'|'duration'>} [config.annotations] - Used to specify resulting matrices.
+   * @return {MapiRequest}
+   */
+  Matrix.getMatrix = function(config) {
+    validator.assertShape({
+      points: validator.required(
+        validator.arrayOf(
+          validator.shape({
+            coordinates: validator.required(validator.coordinates),
+            approach: validator.oneOf('unrestricted', 'curb')
+          })
+        )
+      ),
+      profile: validator.oneOf('driving-traffic', 'driving', 'walking', 'cycling'),
+      annotations: validator.arrayOf(validator.oneOf('duration', 'distance')),
+      sources: validator.oneOfType(validator.equal('all'), validator.arrayOf(validator.number)),
+      destinations: validator.oneOfType(validator.equal('all'), validator.arrayOf(validator.number))
+    })(config);
+
+    var pointCount = config.points.length;
+    if (pointCount < 2 || pointCount > 100) {
+      throw new Error('points must include between 2 and 100 MatrixPoints');
+    }
+
+    config.profile = config.profile || 'driving';
+
+    var path = {
+      coordinates: [],
+      approach: []
+    };
+    /**
+     * @typedef {Object} MatrixPoint
+     * @property {Coordinates} coordinates - `[longitude, latitude]`
+     * @property {'unrestricted'|'curb'} [approach="unrestricted"] - Used to indicate how requested routes consider from which side of the road to approach the point.
+     */
+    config.points.forEach(function(obj) {
+      path.coordinates.push(obj.coordinates[0] + ',' + obj.coordinates[1]);
+
+      if (obj.hasOwnProperty('approach') && obj.approach != null) {
+        path.approach.push(obj.approach);
+      } else {
+        path.approach.push(''); // default value
+      }
+    });
+
+    if (
+      path.approach.every(function(value) {
+        return value === '';
+      })
+    ) {
+      delete path.approach;
+    } else {
+      path.approach = path.approach.join(';');
+    }
+
+    var query = {
+      sources: Array.isArray(config.sources)
+        ? config.sources.join(';')
+        : config.sources,
+      destinations: Array.isArray(config.destinations)
+        ? config.destinations.join(';')
+        : config.destinations,
+      approaches: path.approach,
+      annotations: config.annotations && config.annotations.join(',')
+    };
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/directions-matrix/v1/mapbox/:profile/:coordinates',
+      params: {
+        profile: config.profile,
+        coordinates: path.coordinates.join(';')
+      },
+      query: objectClean_1(query)
+    });
+  };
+
+  var matrix = createServiceFactory_1(Matrix);
+
+  /**
+   * Optimization API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#optimization).
+   */
+  var Optimization = {};
+
+  /**
+   * Get a duration-optimized route.
+   *
+   * Please read [the full HTTP service documentation](https://www.mapbox.com/api-documentation/#optimization)
+   * to understand all of the available options.
+   *
+   * @param {Object} config
+   * @param {'driving'|'walking'|'cycling'} [config.profile="driving"]
+   * @param {Array<OptimizationWaypoint>} config.waypoints - An ordered array of [`OptimizationWaypoint`](#optimizationwaypoint) objects, between 2 and 12 (inclusive).
+   * @param {Array<'duration'|'distance'|'speed'>} [config.annotations] - Specify additional metadata that should be returned.
+   * @param {'any'|'last'} [config.destination="any"] - Returned route ends at `any` or `last` coordinate.
+   * @param {[object, object]} [config.distributions] - Array of objects, each of which includes a `pickup` and `dropoff` property. `pickup` and `dropoff` properties correspond to an index in the coordinates array.
+   * @param {'geojson'|'polyline'|'polyline6'} [config.geometries="polyline"] - Format of the returned geometries.
+   * @param {string} [config.language="en"] - Language of returned turn-by-turn text instructions.
+   *   See options listed in [the HTTP service documentation](https://www.mapbox.com/api-documentation/#instructions-languages).
+   * @param {'simplified'|'full'|'false'} [config.overview="simplified"] - Type of returned overview geometry.
+   * @param {boolean} [config.roundtrip=true] - Specifies whether the trip should complete by returning to the first location.
+   * @param {'any'|'first'} [config.source="any"] - To begin the route, start either from the first coordinate or let the Optimization API choose.
+   * @param {boolean} [config.steps=false] - Whether to return steps and turn-by-turn instructions.
+   * @return {MapiRequest}
+   */
+  Optimization.getOptimization = function(config) {
+    validator.assertShape({
+      profile: validator.oneOf('driving', 'walking', 'cycling'),
+      waypoints: validator.required(
+        validator.arrayOf(
+          validator.shape({
+            coordinates: validator.required(validator.coordinates),
+            approach: validator.oneOf('unrestricted', 'curb'),
+            bearing: validator.arrayOf(validator.range([0, 360])),
+            radius: validator.oneOfType(validator.number, validator.equal('unlimited'))
+          })
+        )
+      ),
+      annotations: validator.arrayOf(validator.oneOf('duration', 'distance', 'speed')),
+      geometries: validator.oneOf('geojson', 'polyline', 'polyline6'),
+      language: validator.string,
+      overview: validator.oneOf('simplified', 'full', 'false'),
+      roundtrip: validator.boolean,
+      steps: validator.boolean,
+      source: validator.oneOf('any', 'first'),
+      destination: validator.oneOf('any', 'last'),
+      distributions: validator.arrayOf(
+        validator.shape({
+          pickup: validator.number,
+          dropoff: validator.number
+        })
+      )
+    })(config);
+
+    var path = {
+      coordinates: [],
+      approach: [],
+      bearing: [],
+      radius: [],
+      distributions: []
+    };
+
+    var waypointCount = config.waypoints.length;
+    if (waypointCount < 2 || waypointCount > 12) {
+      throw new Error(
+        'waypoints must include between 2 and 12 OptimizationWaypoints'
+      );
+    }
+
+    /**
+     * @typedef {Object} OptimizationWaypoint
+     * @property {Coordinates} coordinates
+     * @property {'unrestricted'|'curb'} [approach="unrestricted"] - Used to indicate how requested routes consider from which side of the road to approach the waypoint.
+     * @property {[number, number]} [bearing] - Used to filter the road segment the waypoint will be placed on by direction and dictates the angle of approach.
+     *   This option should always be used in conjunction with a `radius`. The first value is an angle clockwise from true north between 0 and 360,
+     *   and the second is the range of degrees the angle can deviate by.
+     * @property {number|'unlimited'} [radius] - Maximum distance in meters that the coordinate is allowed to move when snapped to a nearby road segment.
+     */
+    config.waypoints.forEach(function(waypoint) {
+      path.coordinates.push(
+        waypoint.coordinates[0] + ',' + waypoint.coordinates[1]
+      );
+
+      // join props which come in pairs
+      ['bearing'].forEach(function(prop) {
+        if (waypoint.hasOwnProperty(prop) && waypoint[prop] != null) {
+          waypoint[prop] = waypoint[prop].join(',');
+        }
+      });
+
+      ['approach', 'bearing', 'radius'].forEach(function(prop) {
+        if (waypoint.hasOwnProperty(prop) && waypoint[prop] != null) {
+          path[prop].push(waypoint[prop]);
+        } else {
+          path[prop].push('');
+        }
+      });
+    });
+
+    // distributions aren't a property of OptimizationWaypoint, so join them separately
+    if (config.distributions) {
+      config.distributions.forEach(function(dist) {
+        path.distributions.push(dist.pickup + ',' + dist.dropoff);
+      });
+    }
+
+    ['approach', 'bearing', 'radius', 'distributions'].forEach(function(prop) {
+      // avoid sending params which are all `;`
+      if (
+        path[prop].every(function(char) {
+          return char === '';
+        })
+      ) {
+        delete path[prop];
+      } else {
+        path[prop] = path[prop].join(';');
+      }
+    });
+
+    var query = stringifyBooleans({
+      geometries: config.geometries,
+      language: config.language,
+      overview: config.overview,
+      roundtrip: config.roundtrip,
+      steps: config.steps,
+      source: config.source,
+      destination: config.destination,
+      distributions: path.distributions,
+      approaches: path.approach,
+      bearings: path.bearing,
+      radiuses: path.radius
+    });
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/optimized-trips/v1/mapbox/:profile/:coordinates',
+      params: {
+        profile: config.profile || 'driving',
+        coordinates: path.coordinates.join(';')
+      },
+      query: objectClean_1(query)
+    });
+  };
+
+  var optimization = createServiceFactory_1(Optimization);
+
+  var polyline_1 = createCommonjsModule(function (module) {
+
+  /**
+   * Based off of [the offical Google document](https://developers.google.com/maps/documentation/utilities/polylinealgorithm)
+   *
+   * Some parts from [this implementation](http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/PolylineEncoder.js)
+   * by [Mark McClure](http://facstaff.unca.edu/mcmcclur/)
+   *
+   * @module polyline
+   */
+
+  var polyline = {};
+
+  function py2_round(value) {
+      // Google's polyline algorithm uses the same rounding strategy as Python 2, which is different from JS for negative values
+      return Math.floor(Math.abs(value) + 0.5) * (value >= 0 ? 1 : -1);
+  }
+
+  function encode(current, previous, factor) {
+      current = py2_round(current * factor);
+      previous = py2_round(previous * factor);
+      var coordinate = current - previous;
+      coordinate <<= 1;
+      if (current - previous < 0) {
+          coordinate = ~coordinate;
+      }
+      var output = '';
+      while (coordinate >= 0x20) {
+          output += String.fromCharCode((0x20 | (coordinate & 0x1f)) + 63);
+          coordinate >>= 5;
+      }
+      output += String.fromCharCode(coordinate + 63);
+      return output;
+  }
+
+  /**
+   * Decodes to a [latitude, longitude] coordinates array.
+   *
+   * This is adapted from the implementation in Project-OSRM.
+   *
+   * @param {String} str
+   * @param {Number} precision
+   * @returns {Array}
+   *
+   * @see https://github.com/Project-OSRM/osrm-frontend/blob/master/WebContent/routing/OSRM.RoutingGeometry.js
+   */
+  polyline.decode = function(str, precision) {
+      var index = 0,
+          lat = 0,
+          lng = 0,
+          coordinates = [],
+          shift = 0,
+          result = 0,
+          byte = null,
+          latitude_change,
+          longitude_change,
+          factor = Math.pow(10, precision || 5);
+
+      // Coordinates have variable length when encoded, so just keep
+      // track of whether we've hit the end of the string. In each
+      // loop iteration, a single coordinate is decoded.
+      while (index < str.length) {
+
+          // Reset shift, result, and byte
+          byte = null;
+          shift = 0;
+          result = 0;
+
+          do {
+              byte = str.charCodeAt(index++) - 63;
+              result |= (byte & 0x1f) << shift;
+              shift += 5;
+          } while (byte >= 0x20);
+
+          latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
+
+          shift = result = 0;
+
+          do {
+              byte = str.charCodeAt(index++) - 63;
+              result |= (byte & 0x1f) << shift;
+              shift += 5;
+          } while (byte >= 0x20);
+
+          longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
+
+          lat += latitude_change;
+          lng += longitude_change;
+
+          coordinates.push([lat / factor, lng / factor]);
+      }
+
+      return coordinates;
+  };
+
+  /**
+   * Encodes the given [latitude, longitude] coordinates array.
+   *
+   * @param {Array.<Array.<Number>>} coordinates
+   * @param {Number} precision
+   * @returns {String}
+   */
+  polyline.encode = function(coordinates, precision) {
+      if (!coordinates.length) { return ''; }
+
+      var factor = Math.pow(10, precision || 5),
+          output = encode(coordinates[0][0], 0, factor) + encode(coordinates[0][1], 0, factor);
+
+      for (var i = 1; i < coordinates.length; i++) {
+          var a = coordinates[i], b = coordinates[i - 1];
+          output += encode(a[0], b[0], factor);
+          output += encode(a[1], b[1], factor);
+      }
+
+      return output;
+  };
+
+  function flipped(coords) {
+      var flipped = [];
+      for (var i = 0; i < coords.length; i++) {
+          flipped.push(coords[i].slice().reverse());
+      }
+      return flipped;
+  }
+
+  /**
+   * Encodes a GeoJSON LineString feature/geometry.
+   *
+   * @param {Object} geojson
+   * @param {Number} precision
+   * @returns {String}
+   */
+  polyline.fromGeoJSON = function(geojson, precision) {
+      if (geojson && geojson.type === 'Feature') {
+          geojson = geojson.geometry;
+      }
+      if (!geojson || geojson.type !== 'LineString') {
+          throw new Error('Input must be a GeoJSON LineString');
+      }
+      return polyline.encode(flipped(geojson.coordinates), precision);
+  };
+
+  /**
+   * Decodes to a GeoJSON LineString geometry.
+   *
+   * @param {String} str
+   * @param {Number} precision
+   * @returns {Object}
+   */
+  polyline.toGeoJSON = function(str, precision) {
+      var coords = polyline.decode(str, precision);
+      return {
+          type: 'LineString',
+          coordinates: flipped(coords)
+      };
+  };
+
+  if (module.exports) {
+      module.exports = polyline;
+  }
+  });
+
+  /**
+   * Static API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#static).
+   */
+  var Static = {};
+
+  /**
+   * Get a static map image.
+   *
+   * **If you just want the URL for the static map image, create a request
+   * and get it's URL with `MapiRequest#url`.** This is what prior versions of the
+   * SDK returned.
+   *
+   * @param {Object} config
+   * @param {string} config.ownerId - The owner of the map style.
+   * @param {string} config.styleId - The map's style ID.
+   * @param {number} config.width - Width of the image in pixels, between 1 and 1280.
+   * @param {number} config.height - Height of the image in pixels, between 1 and 1280.
+   * @param {'auto'|Object} config.position - If `"auto"`, the viewport will fit the
+   *   bounds of the overlay(s). Otherwise, the maps' position is described by an object
+   *   with the following properties:
+   *   `coordinates` (required): `[longitude, latitude]` for the center of image.
+   *   `zoom` (required): Between 0 and 20.
+   *   `bearing` (optional): Between 0 and 360.
+   *   `pitch` (optional): Between 0 and 60.
+   *
+   * @param {Array<Overlay>} [config.overlays] - Overlays should be in z-index
+   *   order: the first in the array will be on the bottom; the last will be on
+   *   the top. Overlays are objects that match one of the following types:
+   *   [`SimpleMarkerOverlay`](#simplemarkeroverlay),
+   *   [`CustomMarkerOverlay`](#custommarkeroverlay),
+   *   [`PathOverlay`](#pathoverlay),
+   *   [`GeoJsonOverlay`](#geojsonoverlay)
+   *
+   * @param {boolean} [config.highRes=false]
+   * @param {string} [config.insertOverlayBeforeLayer] - The ID of the style layer
+   *   that overlays should be inserted *before*.
+   * @param {boolean} [config.attribution=true] - Whether there is attribution
+   *   on the map image.
+   * @param {boolean} [config.logo=true] - Whether there is a Mapbox logo
+   *   on the map image.
+   * @return {MapiRequest}
+   */
+  Static.getStaticImage = function(config) {
+    validator.assertShape({
+      ownerId: validator.required(validator.string),
+      styleId: validator.required(validator.string),
+      width: validator.required(validator.range([1, 1280])),
+      height: validator.required(validator.range([1, 1280])),
+      position: validator.required(
+        validator.oneOfType(
+          validator.oneOf('auto'),
+          validator.strictShape({
+            coordinates: validator.required(validator.coordinates),
+            zoom: validator.required(validator.range([0, 20])),
+            bearing: validator.range([0, 360]),
+            pitch: validator.range([0, 60])
+          })
+        )
+      ),
+      overlays: validator.arrayOf(validator.plainObject),
+      highRes: validator.boolean,
+      insertOverlayBeforeLayer: validator.string,
+      attribution: validator.boolean,
+      logo: validator.boolean
+    })(config);
+
+    var encodedOverlay = (config.overlays || [])
+      .map(function(overlayItem) {
+        if (overlayItem.marker) {
+          return encodeMarkerOverlay(overlayItem.marker);
+        }
+        if (overlayItem.path) {
+          return encodePathOverlay(overlayItem.path);
+        }
+        return encodeGeoJsonOverlay(overlayItem.geoJson);
+      })
+      .join(',');
+
+    var encodedPosition = encodePosition(config.position);
+    var encodedDimensions = config.width + 'x' + config.height;
+    if (config.highRes) {
+      encodedDimensions += '@2x';
+    }
+
+    var preEncodedUrlParts = [encodedOverlay, encodedPosition, encodedDimensions]
+      .filter(Boolean)
+      .join('/');
+
+    var query = {};
+    if (config.attribution !== undefined) {
+      query.attribution = String(config.attribution);
+    }
+    if (config.logo !== undefined) {
+      query.logo = String(config.logo);
+    }
+    if (config.insertOverlayBeforeLayer !== undefined) {
+      query.before_layer = config.insertOverlayBeforeLayer;
+    }
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/styles/v1/:ownerId/:styleId/static/' + preEncodedUrlParts,
+      params: pick_1(config, ['ownerId', 'styleId']),
+      query: query
+    });
+  };
+
+  function encodePosition(position) {
+    if (position === 'auto') return 'auto';
+
+    return position.coordinates
+      .concat([position.zoom, position.bearing, position.pitch])
+      .filter(Boolean)
+      .join(',');
+  }
+
+  function encodeMarkerOverlay(o) {
+    if (o.url) {
+      return encodeCustomMarkerOverlay(o);
+    }
+    return encodeSimpleMarkerOverlay(o);
+  }
+
+  /**
+   * A simple marker overlay.
+   * @typedef {Object} SimpleMarkerOverlay
+   * @property {Object} marker
+   * @property {[number, number]} marker.coordinates - `[longitude, latitude]`
+   * @property {'large'|'small'} [marker.size='small']
+   * @property {string} [marker.label] - Marker symbol. Options are an alphanumeric label `a`
+   *   through `z`, `0` through `99`, or a valid [Maki](https://www.mapbox.com/maki/)
+   *   icon. If a letter is requested, it will be rendered in uppercase only.
+   * @property {string} [marker.color] - A 3- or 6-digit hexadecimal color code.
+   */
+
+  function encodeSimpleMarkerOverlay(o) {
+    validator.assertShape({
+      coordinates: validator.required(validator.coordinates),
+      size: validator.oneOf('large', 'small'),
+      label: validator.string,
+      color: validator.string
+    })(o);
+
+    var result = o.size === 'large' ? 'pin-l' : 'pin-s';
+    if (o.label) {
+      result += '-' + String(o.label).toLowerCase();
+    }
+    if (o.color) {
+      result += '+' + sanitizeHexColor(o.color);
+    }
+    result += '(' + o.coordinates.join(',') + ')';
+    return result;
+  }
+
+  /**
+   * A marker overlay with a custom image.
+   * @typedef {Object} CustomMarkerOverlay
+   * @property {Object} marker
+   * @property {[number, number]} marker.coordinates - `[longitude, latitude]`
+   * @property {string} marker.url
+   */
+
+  function encodeCustomMarkerOverlay(o) {
+    validator.assertShape({
+      coordinates: validator.required(validator.coordinates),
+      url: validator.required(validator.string)
+    })(o);
+
+    var result = 'url-' + encodeURIComponent(o.url);
+    result += '(' + o.coordinates.join(',') + ')';
+    return result;
+  }
+
+  /**
+   * A stylable line.
+   * @typedef {Object} PathOverlay
+   * @property {Object} path
+   * @property {Array<Coordinates>} path.coordinates - An array of coordinates
+   *   describing the path.
+   * @property {number} [path.strokeWidth]
+   * @property {string} [path.strokeColor]
+   * @property {number} [path.strokeOpacity] - Must be paired with strokeColor.
+   * @property {string} [path.fillColor] - Must be paired with strokeColor.
+   * @property {number} [path.fillOpacity] - Must be paired with fillColor.
+   */
+
+  function encodePathOverlay(o) {
+    validator.assertShape({
+      coordinates: validator.required(validator.arrayOf(validator.coordinates)),
+      strokeWidth: validator.number,
+      strokeColor: validator.string,
+      strokeOpacity: validator.number,
+      fillColor: validator.string,
+      fillOpacity: validator.number
+    })(o);
+
+    if (o.strokeOpacity !== undefined && o.strokeColor === undefined) {
+      throw new Error('strokeOpacity requires strokeColor');
+    }
+    if (o.fillColor !== undefined && o.strokeColor === undefined) {
+      throw new Error('fillColor requires strokeColor');
+    }
+    if (o.fillOpacity !== undefined && o.fillColor === undefined) {
+      throw new Error('fillOpacity requires fillColor');
+    }
+
+    var result = 'path';
+    if (o.strokeWidth) {
+      result += '-' + o.strokeWidth;
+    }
+    if (o.strokeColor) {
+      result += '+' + sanitizeHexColor(o.strokeColor);
+    }
+    if (o.strokeOpacity) {
+      result += '-' + o.strokeOpacity;
+    }
+    if (o.fillColor) {
+      result += '+' + sanitizeHexColor(o.fillColor);
+    }
+    if (o.fillOpacity) {
+      result += '-' + o.fillOpacity;
+    }
+    // polyline expects each coordinate to be in reversed order: [lat, lng]
+    var reversedCoordinates = o.coordinates.map(function(c) {
+      return c.reverse();
+    });
+    var encodedPolyline = polyline_1.encode(reversedCoordinates);
+    result += '(' + encodeURIComponent(encodedPolyline) + ')';
+    return result;
+  }
+
+  /**
+   * GeoJSON to overlay the map.
+   * @typedef {Object} GeoJsonOverlay
+   * @property {Object} geoJson - Valid GeoJSON.
+   */
+
+  function encodeGeoJsonOverlay(o) {
+    validator.assert(validator.required(validator.plainObject))(o);
+
+    return 'geojson(' + encodeURIComponent(JSON.stringify(o)) + ')';
+  }
+
+  function sanitizeHexColor(color) {
+    return color.replace(/^#/, '');
+  }
+
+  var _static = createServiceFactory_1(Static);
+
+  /**
+   * Styles API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#styles).
+   */
+  var Styles = {};
+
+  /**
+   * Get a style.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#retrieve-a-style).
+   *
+   * @param {Object} config
+   * @param {string} config.styleId
+   * @param {string} [config.ownerId]
+   * @return {MapiRequest}
+   */
+  Styles.getStyle = function(config) {
+    validator.assertShape({
+      styleId: validator.required(validator.string),
+      ownerId: validator.string
+    })(config);
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/styles/v1/:ownerId/:styleId',
+      params: config
+    });
+  };
+
+  /**
+   * Create a style.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#create-a-style).
+   *
+   * @param {Object} config
+   * @param {Object} config.style - Stylesheet JSON object.
+   * @param {string} [config.ownerId]
+   * @return {MapiRequest}
+   */
+  Styles.createStyle = function(config) {
+    validator.assertShape({
+      style: validator.plainObject,
+      ownerId: validator.string
+    })(config);
+
+    return this.client.createRequest({
+      method: 'POST',
+      path: '/styles/v1/:ownerId',
+      params: pick_1(config, ['ownerId']),
+      body: config.style
+    });
+  };
+
+  /**
+   * Update a style.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#update-a-style).
+   *
+   * @param {Object} config
+   * @param {string} config.styleId
+   * @param {Object} config.style - Stylesheet JSON object.
+   * @param {string | number | Date} [config.lastKnownModification] - Datetime of last
+   *   known update. Passed as 'If-Unmodified-Since' HTTP header.
+   * @param {string} [config.ownerId]
+   * @return {MapiRequest}
+   */
+  Styles.updateStyle = function(config) {
+    validator.assertShape({
+      styleId: validator.required(validator.string),
+      style: validator.required(validator.plainObject),
+      lastKnownModification: validator.date,
+      ownerId: validator.string
+    })(config);
+
+    var headers = {};
+    if (config.lastKnownModification) {
+      headers['If-Unmodified-Since'] = new Date(
+        config.lastKnownModification
+      ).toUTCString();
+    }
+    return this.client.createRequest({
+      method: 'PATCH',
+      path: '/styles/v1/:ownerId/:styleId',
+      params: pick_1(config, ['styleId', 'ownerId']),
+      headers: headers,
+      body: config.style
+    });
+  };
+
+  /**
+   * Delete a style.
+   *
+   * @param {Object} config
+   * @param {string} config.styleId
+   * @param {string} [config.ownerId]
+   * @return {MapiRequest}
+   */
+  Styles.deleteStyle = function(config) {
+    validator.assertShape({
+      styleId: validator.required(validator.string),
+      ownerId: validator.string
+    })(config);
+
+    return this.client.createRequest({
+      method: 'DELETE',
+      path: '/styles/v1/:ownerId/:styleId',
+      params: config
+    });
+  };
+
+  /**
+   * List styles in your account.
+   *
+   * @param {Object} [config]
+   * @param {string} [config.start] - The style ID to start at, for paginated results.
+   * @param {string} [config.ownerId]
+   * @return {MapiRequest}
+   */
+  Styles.listStyles = function(config) {
+    config = config || {};
+    validator.assertShape({
+      start: validator.string,
+      ownerId: validator.string
+    })(config);
+
+    var query = {};
+    if (config.start) {
+      query.start = config.start;
+    }
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/styles/v1/:ownerId',
+      params: pick_1(config, ['ownerId']),
+      query: query
+    });
+  };
+
+  /**
+   * Add an icon to a style, or update an existing one.
+   *
+   * @param {Object} config
+   * @param {string} config.styleId
+   * @param {string} config.iconId
+   * @param {UploadableFile} config.file - An SVG file.
+   * @param {string} [config.ownerId]
+   * @return {MapiRequest}
+   */
+  Styles.putStyleIcon = function(config) {
+    validator.assertShape({
+      styleId: validator.required(validator.string),
+      iconId: validator.required(validator.string),
+      file: validator.file,
+      ownerId: validator.string
+    })(config);
+
+    return this.client.createRequest({
+      method: 'PUT',
+      path: '/styles/v1/:ownerId/:styleId/sprite/:iconId',
+      params: pick_1(config, ['ownerId', 'styleId', 'iconId']),
+      file: config.file
+    });
+  };
+
+  /**
+   * Remove an icon from a style.
+   *
+   * @param {Object} config
+   * @param {string} config.styleId
+   * @param {string} config.iconId
+   * @param {string} [config.ownerId]
+   * @return {MapiRequest}
+   */
+  Styles.deleteStyleIcon = function(config) {
+    validator.assertShape({
+      styleId: validator.required(validator.string),
+      iconId: validator.required(validator.string),
+      ownerId: validator.string
+    })(config);
+
+    return this.client.createRequest({
+      method: 'DELETE',
+      path: '/styles/v1/:ownerId/:styleId/sprite/:iconId',
+      params: config
+    });
+  };
+
+  /**
+   * Get a style sprite's image or JSON document.
+   *
+   * See [the corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/?language=JavaScript#retrieve-a-sprite-image-or-json).
+   *
+   * @param {Object} config
+   * @param {string} config.styleId
+   * @param {'json' | 'png'} [config.format="json"]
+   * @param {boolean} [config.highRes] - If true, returns spritesheet with 2x
+   *   resolution.
+   * @param {string} [config.ownerId]
+   * @return {MapiRequest}
+   */
+  Styles.getStyleSprite = function(config) {
+    validator.assertShape({
+      styleId: validator.required(validator.string),
+      format: validator.oneOf('json', 'png'),
+      highRes: validator.boolean,
+      ownerId: validator.string
+    })(config);
+
+    var format = config.format || 'json';
+    var fileName = 'sprite' + (config.highRes ? '@2x' : '') + '.' + format;
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/styles/v1/:ownerId/:styleId/:fileName',
+      params: immutable(pick_1(config, ['ownerId', 'styleId']), {
+        fileName: fileName
+      })
+    });
+  };
+
+  /**
+   * Get a font glyph range.
+   *
+   * See [the corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/?language=JavaScript#retrieve-font-glyph-ranges).
+   *
+   * @param {Object} config
+   * @param {string|Array<string>} config.fonts - An array of font names.
+   * @param {number} config.start - Character code of the starting glyph.
+   * @param {number} config.end - Character code of the last glyph,
+   *   typically equivalent to`config.start + 255`.
+   * @param {string} [config.ownerId]
+   * @return {MapiRequest}
+   */
+  Styles.getFontGlyphRange = function(config) {
+    validator.assertShape({
+      fonts: validator.required(validator.oneOfType(validator.string, validator.arrayOf(validator.string))),
+      start: validator.required(validator.number),
+      end: validator.required(validator.number),
+      ownerId: validator.string
+    })(config);
+
+    var fileName = config.start + '-' + config.end + '.pbf';
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/fonts/v1/:ownerId/:fontList/:fileName',
+      params: immutable(pick_1(config, ['ownerId']), {
+        fontList: [].concat(config.fonts),
+        fileName: fileName
+      })
+    });
+  };
+
+  /**
+   * Get embeddable HTML displaying a map.
+   *
+   * See [the corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/?language=JavaScript#embed-a-style).
+   *
+   * @param {Object} config
+   * @param {string} styleId
+   * @param {boolean} [scrollZoom=true] - If `false`, zooming the map by scrolling will
+   *   be disabled.
+   * @param {boolean} [title=false] - If `true`, the map's title and owner is displayed
+   *   in the upper right corner of the map.
+   * @param {ownerId} [ownerId]
+   */
+  Styles.getEmbeddableHtml = function(config) {
+    validator.assertShape({
+      styleId: validator.required(validator.string),
+      scrollZoom: validator.boolean,
+      title: validator.boolean,
+      ownerId: validator.string
+    })(config);
+
+    var fileName = config.styleId + '.html';
+    var query = {};
+    if (config.scrollZoom !== undefined) {
+      query.zoomwheel = String(config.scrollZoom);
+    }
+    if (config.title !== undefined) {
+      query.title = String(config.title);
+    }
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/styles/v1/:ownerId/:fileName',
+      params: immutable(pick_1(config, ['ownerId']), {
+        fileName: fileName
+      }),
+      query: query
+    });
+  };
+
+  var styles = createServiceFactory_1(Styles);
+
+  /**
+   * Tilequery API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#tilequery).
+   */
+  var Tilequery = {};
+
+  /**
+   * List features within a radius of a point on a map (or several maps).
+   *
+   * @param {Object} config
+   * @param {Array<string>} config.mapIds - The maps being queried.
+   *   If you need to composite multiple layers, provide multiple map IDs.
+   * @param {Coordinates} config.coordinates - The longitude and latitude to be queried.
+   * @param {number} [config.radius=0] - The approximate distance in meters to query for features.
+   * @param {number} [config.limit=5] - The number of features to return, between 1 and 50.
+   * @param {boolean} [config.dedupe=true] - Whether or not to deduplicate results.
+   * @param {'polygon'|'linestring'|'point'} [config.geometry] - Queries for a specific geometry type.
+   * @param {Array<string>} [config.layers] - IDs of vector layers to query.
+   * @return {MapiRequest}
+   */
+  Tilequery.listFeatures = function(config) {
+    validator.assertShape({
+      mapIds: validator.required(validator.arrayOf(validator.string)),
+      coordinates: validator.required(validator.coordinates),
+      radius: validator.number,
+      limit: validator.range([1, 50]),
+      dedupe: validator.boolean,
+      layers: validator.arrayOf(validator.string)
+    })(config);
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/v4/:mapIds/tilequery/:coordinates.json',
+      params: {
+        mapIds: config.mapIds,
+        coordinates: config.coordinates
+      },
+      query: pick_1(config, ['radius', 'limit', 'dedupe', 'layers'])
+    });
+  };
+
+  var tilequery = createServiceFactory_1(Tilequery);
+
+  /**
+   * Tilesets API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#tilesets).
+   */
+  var Tilesets = {};
+
+  /**
+   * List a user's tilesets.
+   *
+   * @param {Object} [config]
+   * @param {string} [config.ownerId]
+   * @return {MapiRequest}
+   */
+  Tilesets.listTilesets = function(config) {
+    validator.assertShape({
+      ownerId: validator.string
+    })(config);
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/tilesets/v1/:ownerId',
+      params: config
+    });
+  };
+
+  var tilesets = createServiceFactory_1(Tilesets);
+
+  /**
+   * Tokens API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#tokens).
+   */
+  var Tokens = {};
+
+  /**
+   * List your access tokens.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#list-tokens).
+   *
+   * @return {MapiRequest}
+   */
+  Tokens.listTokens = function() {
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/tokens/v2/:ownerId'
+    });
+  };
+
+  /**
+   * Create a new access token.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#create-token).
+   *
+   * @param {Object} [config]
+   * @param {string} [config.note]
+   * @param {Array<string>} [config.scopes]
+   * @param {Array<string>} [config.resources]
+   * @return {MapiRequest}
+   */
+  Tokens.createToken = function(config) {
+    config = config || {};
+    validator.assertShape({
+      note: validator.string,
+      scopes: validator.arrayOf(validator.string),
+      resources: validator.arrayOf(validator.string)
+    })(config);
+
+    var body = {};
+    body.scopes = config.scopes || [];
+    if (config.note !== undefined) {
+      body.note = config.note;
+    }
+    if (config.resources) {
+      body.resources = config.resources;
+    }
+
+    return this.client.createRequest({
+      method: 'POST',
+      path: '/tokens/v2/:ownerId',
+      params: pick_1(config, ['ownerId']),
+      body: body
+    });
+  };
+
+  /**
+   * Create a new temporary access token.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#create-temporary-token).
+   *
+   * @param {Object} [config]
+   * @param {string} [config.expires]
+   * @param {Array<string>} [config.scopes]
+   * @return {MapiRequest}
+   */
+  Tokens.createTemporaryToken = function(config) {
+    config = config || {};
+    validator.assertShape({
+      expires: validator.required(validator.date),
+      scopes: validator.required(validator.arrayOf(validator.string))
+    })(config);
+
+    return this.client.createRequest({
+      method: 'POST',
+      path: '/tokens/v2/:ownerId',
+      params: pick_1(config, ['ownerId']),
+      body: {
+        expires: new Date(config.expires).toISOString(),
+        scopes: config.scopes
+      }
+    });
+  };
+
+  /**
+   * Update an access token.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#update-a-token).
+   *
+   * @param {Object} config
+   * @param {string} config.tokenId
+   * @param {string} [config.note]
+   * @param {Array<string>} [config.scopes]
+   * @param {Array<string>} [config.resources]
+   * @return {MapiRequest}
+   */
+  Tokens.updateToken = function(config) {
+    validator.assertShape({
+      tokenId: validator.required(validator.string),
+      note: validator.string,
+      scopes: validator.arrayOf(validator.string),
+      resources: validator.arrayOf(validator.string)
+    })(config);
+
+    var body = {};
+    if (config.scopes) {
+      body.scopes = config.scopes;
+    }
+    if (config.note !== undefined) {
+      body.note = config.note;
+    }
+    if (config.resources) {
+      body.resources = config.resources;
+    }
+
+    return this.client.createRequest({
+      method: 'PATCH',
+      path: '/tokens/v2/:ownerId/:tokenId',
+      params: pick_1(config, ['ownerId', 'tokenId']),
+      body: body
+    });
+  };
+
+  /**
+   * Get data about the client's access token.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#retrieve-a-token).
+   *
+   * @return {MapiRequest}
+   */
+  Tokens.getToken = function() {
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/tokens/v2'
+    });
+  };
+
+  /**
+   * Delete an access token.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/?language=cURL#delete-a-token).
+   *
+   * @param {Object} config
+   * @param {string} config.tokenId
+   * @return {MapiRequest}
+   */
+  Tokens.deleteToken = function(config) {
+    validator.assertShape({
+      tokenId: validator.required(validator.string)
+    })(config);
+
+    return this.client.createRequest({
+      method: 'DELETE',
+      path: '/tokens/v2/:ownerId/:tokenId',
+      params: pick_1(config, ['ownerId', 'tokenId'])
+    });
+  };
+
+  /**
+   * List your available scopes. Each item is a metadata
+   * object about the scope, not just the string scope.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#list-scopes).
+   *
+   * @return {MapiRequest}
+   */
+  Tokens.listScopes = function() {
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/scopes/v1/:ownerId'
+    });
+  };
+
+  var tokens = createServiceFactory_1(Tokens);
+
+  /**
+   * Uploads API service.
+   *
+   * Learn more about this service and its responses in
+   * [the HTTP service documentation](https://www.mapbox.com/api-documentation/#uploads).
+   */
+  var Uploads = {};
+
+  /**
+   * List the statuses of all recent uploads.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#retrieve-recent-upload-statuses).
+   *
+   * @param {Object} [config]
+   * @param {boolean} [config.reverse] - List uploads in chronological order, rather than reverse chronological order.
+   * @return {MapiRequest}
+   */
+  Uploads.listUploads = function(config) {
+    validator.assertShape({
+      reverse: validator.boolean
+    })(config);
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/uploads/v1/:ownerId',
+      query: config
+    });
+  };
+
+  /**
+   * Create S3 credentials.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#retrieve-s3-credentials).
+   *
+   * @return {MapiRequest}
+   */
+  Uploads.createUploadCredentials = function() {
+    return this.client.createRequest({
+      method: 'POST',
+      path: '/uploads/v1/:ownerId/credentials'
+    });
+  };
+
+  /**
+   * Create an upload.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#create-an-upload).
+   *
+   * @param {Object} config
+   * @param {string} config.mapId - The map ID to create or replace in the format `username.nameoftileset`.
+   *   Limited to 32 characters (only `-` and `_` special characters allowed; limit does not include username).
+   * @param {string} config.url - Either of the following:
+   *   - HTTPS URL of the S3 object provided by [`createUploadCredentials`](#createuploadcredentials)
+   *   - The `mapbox://` URL of an existing dataset that you'd like to export to a tileset.
+   *     This should be in the format `mapbox://datasets/{username}/{datasetId}`.
+   * @param {string} [config.tilesetName] - Name for the tileset. Limited to 64 characters.
+   * @return {MapiRequest}
+   */
+  Uploads.createUpload = function(config) {
+    validator.assertShape({
+      mapId: validator.required(validator.string),
+      url: validator.required(validator.string),
+      tilesetName: validator.string
+    })(config);
+
+    return this.client.createRequest({
+      method: 'POST',
+      path: '/uploads/v1/:ownerId',
+      body: {
+        tileset: config.mapId,
+        url: config.url,
+        name: config.tilesetName
+      }
+    });
+  };
+
+  /**
+   * Get an upload's status.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#retrieve-upload-status).
+   *
+   * @param {Object} config
+   * @param {string} config.uploadId
+   * @return {MapiRequest}
+   */
+  Uploads.getUpload = function(config) {
+    validator.assertShape({
+      uploadId: validator.required(validator.string)
+    })(config);
+
+    return this.client.createRequest({
+      method: 'GET',
+      path: '/uploads/v1/:ownerId/:uploadId',
+      params: config
+    });
+  };
+
+  /**
+   * Delete an upload.
+   *
+   * See the [corresponding HTTP service documentation](https://www.mapbox.com/api-documentation/#remove-an-upload).
+   *
+   * @param {Object} config
+   * @param {string} config.uploadId
+   * @return {MapiRequest}
+   */
+  Uploads.deleteUpload = function(config) {
+    validator.assertShape({
+      uploadId: validator.required(validator.string)
+    })(config);
+
+    return this.client.createRequest({
+      method: 'DELETE',
+      path: '/uploads/v1/:ownerId/:uploadId',
+      params: config
+    });
+  };
+
+  var uploads = createServiceFactory_1(Uploads);
+
+  function mapboxSdk(options) {
+    var client = browserClient(options);
+
+    client.datasets = datasets(client);
+    client.directions = directions(client);
+    client.geocoding = geocoding(client);
+    client.mapMatching = mapMatching(client);
+    client.matrix = matrix(client);
+    client.optimization = optimization(client);
+    client.static = _static(client);
+    client.styles = styles(client);
+    client.tilequery = tilequery(client);
+    client.tilesets = tilesets(client);
+    client.tokens = tokens(client);
+    client.uploads = uploads(client);
+
+    return client;
+  }
+
+  var bundle = mapboxSdk;
+
+  return bundle;
+
+})));
diff --git a/public/static/scripts/mapbox/mapbox-sdk.min.js b/public/static/scripts/mapbox/mapbox-sdk.min.js
new file mode 100644
index 00000000..32cc333d
--- /dev/null
+++ b/public/static/scripts/mapbox/mapbox-sdk.min.js
@@ -0,0 +1 @@
+(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):global.mapboxSdk=factory()})(this,function(){"use strict";function parseParam(param){var parts=param.match(/\s*(.+)\s*=\s*"?([^"]+)"?/);if(!parts)return null;return{key:parts[1],value:parts[2]}}function parseLink(link){var parts=link.match(/<?([^>]*)>(.*)/);if(!parts)return null;var linkUrl=parts[1];var linkParams=parts[2].split(";");var rel=null;var parsedLinkParams=linkParams.reduce(function(result,param){var parsed=parseParam(param);if(!parsed)return result;if(parsed.key==="rel"){if(!rel){rel=parsed.value}return result}result[parsed.key]=parsed.value;return result},{});if(!rel)return null;return{url:linkUrl,rel:rel,params:parsedLinkParams}}function parseLinkHeader(linkHeader){if(!linkHeader)return{};return linkHeader.split(/,\s*</).reduce(function(result,link){var parsed=parseLink(link);if(!parsed)return result;var splitRel=parsed.rel.split(/\s+/);splitRel.forEach(function(rel){if(!result[rel]){result[rel]={url:parsed.url,params:parsed.params}}});return result},{})}var parseLinkHeader_1=parseLinkHeader;function MapiResponse(request,responseData){this.request=request;this.headers=responseData.headers;this.rawBody=responseData.body;this.statusCode=responseData.statusCode;try{this.body=JSON.parse(responseData.body||"{}")}catch(parseError){this.body=responseData.body}this.links=parseLinkHeader_1(this.headers.link)}MapiResponse.prototype.hasNextPage=function hasNextPage(){return!!this.links.next};MapiResponse.prototype.nextPage=function nextPage(){if(!this.hasNextPage())return null;return this.request._extend({path:this.links.next.url})};var mapiResponse=MapiResponse;var constants={API_ORIGIN:"https://api.mapbox.com",EVENT_PROGRESS_DOWNLOAD:"downloadProgress",EVENT_PROGRESS_UPLOAD:"uploadProgress",EVENT_ERROR:"error",EVENT_RESPONSE:"response",ERROR_HTTP:"HttpError",ERROR_REQUEST_ABORTED:"RequestAbortedError"};function MapiError(options){var errorType=options.type||constants.ERROR_HTTP;var body;if(options.body){try{body=JSON.parse(options.body)}catch(e){body=options.body}}else{body=null}var message=options.message||null;if(!message){if(typeof body==="string"){message=body}else if(body&&typeof body.message==="string"){message=body.message}else if(errorType===constants.ERROR_REQUEST_ABORTED){message="Request aborted"}}this.message=message;this.type=errorType;this.statusCode=options.statusCode||null;this.request=options.request;this.body=body}var mapiError=MapiError;function parseSingleHeader(raw){var boundary=raw.indexOf(":");var name=raw.substring(0,boundary).trim().toLowerCase();var value=raw.substring(boundary+1).trim();return{name:name,value:value}}function parseHeaders(raw){var headers={};if(!raw){return headers}raw.trim().split(/[\r|\n]+/).forEach(function(rawHeader){var parsed=parseSingleHeader(rawHeader);headers[parsed.name]=parsed.value});return headers}var parseHeaders_1=parseHeaders;var requestsUnderway={};function browserAbort(request){var xhr=requestsUnderway[request.id];if(!xhr)return;xhr.abort();delete requestsUnderway[request.id]}function createResponse(request,xhr){return new mapiResponse(request,{body:xhr.response,headers:parseHeaders_1(xhr.getAllResponseHeaders()),statusCode:xhr.status})}function normalizeBrowserProgressEvent(event){var total=event.total;var transferred=event.loaded;var percent=100*transferred/total;return{total:total,transferred:transferred,percent:percent}}function sendRequestXhr(request,xhr){return new Promise(function(resolve,reject){xhr.onprogress=function(event){request.emitter.emit(constants.EVENT_PROGRESS_DOWNLOAD,normalizeBrowserProgressEvent(event))};var file=request.file;if(file){xhr.upload.onprogress=function(event){request.emitter.emit(constants.EVENT_PROGRESS_UPLOAD,normalizeBrowserProgressEvent(event))}}xhr.onerror=function(error){reject(error)};xhr.onabort=function(){var mapiError$$1=new mapiError({request:request,type:constants.ERROR_REQUEST_ABORTED});reject(mapiError$$1)};xhr.onload=function(){delete requestsUnderway[request.id];if(xhr.status<200||xhr.status>=400){var mapiError$$1=new mapiError({request:request,body:xhr.response,statusCode:xhr.status});reject(mapiError$$1);return}resolve(xhr)};var body=request.body;if(typeof body==="string"){xhr.send(body)}else if(body){xhr.send(JSON.stringify(body))}else if(file){xhr.send(file)}else{xhr.send()}requestsUnderway[request.id]=xhr}).then(function(xhr){return createResponse(request,xhr)})}function createRequestXhr(request,accessToken){var url=request.url(accessToken);var xhr=new window.XMLHttpRequest;xhr.open(request.method,url);if(request.headers){Object.keys(request.headers).forEach(function(key){xhr.setRequestHeader(key,request.headers[key])})}return xhr}function browserSend(request){return Promise.resolve().then(function(){var xhr=createRequestXhr(request,request.client.accessToken);return sendRequestXhr(request,xhr)})}var browserLayer={browserAbort:browserAbort,sendRequestXhr:sendRequestXhr,browserSend:browserSend,createRequestXhr:createRequestXhr};var commonjsGlobal=typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};function createCommonjsModule(fn,module){return module={exports:{}},fn(module,module.exports),module.exports}var base64=createCommonjsModule(function(module,exports){(function(root){var freeExports=exports;var freeModule=module&&module.exports==freeExports&&module;var freeGlobal=typeof commonjsGlobal=="object"&&commonjsGlobal;if(freeGlobal.global===freeGlobal||freeGlobal.window===freeGlobal){root=freeGlobal}var InvalidCharacterError=function(message){this.message=message};InvalidCharacterError.prototype=new Error;InvalidCharacterError.prototype.name="InvalidCharacterError";var error=function(message){throw new InvalidCharacterError(message)};var TABLE="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";var REGEX_SPACE_CHARACTERS=/[\t\n\f\r ]/g;var decode=function(input){input=String(input).replace(REGEX_SPACE_CHARACTERS,"");var length=input.length;if(length%4==0){input=input.replace(/==?$/,"");length=input.length}if(length%4==1||/[^+a-zA-Z0-9/]/.test(input)){error("Invalid character: the string to be decoded is not correctly encoded.")}var bitCounter=0;var bitStorage;var buffer;var output="";var position=-1;while(++position<length){buffer=TABLE.indexOf(input.charAt(position));bitStorage=bitCounter%4?bitStorage*64+buffer:buffer;if(bitCounter++%4){output+=String.fromCharCode(255&bitStorage>>(-2*bitCounter&6))}}return output};var encode=function(input){input=String(input);if(/[^\0-\xFF]/.test(input)){error("The string to be encoded contains characters outside of the "+"Latin1 range.")}var padding=input.length%3;var output="";var position=-1;var a;var b;var c;var buffer;var length=input.length-padding;while(++position<length){a=input.charCodeAt(position)<<16;b=input.charCodeAt(++position)<<8;c=input.charCodeAt(++position);buffer=a+b+c;output+=TABLE.charAt(buffer>>18&63)+TABLE.charAt(buffer>>12&63)+TABLE.charAt(buffer>>6&63)+TABLE.charAt(buffer&63)}if(padding==2){a=input.charCodeAt(position)<<8;b=input.charCodeAt(++position);buffer=a+b;output+=TABLE.charAt(buffer>>10)+TABLE.charAt(buffer>>4&63)+TABLE.charAt(buffer<<2&63)+"="}else if(padding==1){buffer=input.charCodeAt(position);output+=TABLE.charAt(buffer>>2)+TABLE.charAt(buffer<<4&63)+"=="}return output};var base64={encode:encode,decode:decode,version:"0.1.0"};if(freeExports&&!freeExports.nodeType){if(freeModule){freeModule.exports=base64}else{for(var key in base64){base64.hasOwnProperty(key)&&(freeExports[key]=base64[key])}}}else{root.base64=base64}})(commonjsGlobal)});var tokenCache={};function parseToken(token){if(tokenCache[token]){return tokenCache[token]}var parts=token.split(".");var usage=parts[0];var rawPayload=parts[1];if(!rawPayload){throw new Error("Invalid token")}var parsedPayload=parsePaylod(rawPayload);var result={usage:usage,user:parsedPayload.u};if(has(parsedPayload,"a"))result.authorization=parsedPayload.a;if(has(parsedPayload,"exp"))result.expires=parsedPayload.exp*1e3;if(has(parsedPayload,"iat"))result.created=parsedPayload.iat*1e3;if(has(parsedPayload,"scopes"))result.scopes=parsedPayload.scopes;if(has(parsedPayload,"client"))result.client=parsedPayload.client;if(has(parsedPayload,"ll"))result.lastLogin=parsedPayload.ll;if(has(parsedPayload,"iu"))result.impersonator=parsedPayload.iu;tokenCache[token]=result;return result}function parsePaylod(rawPayload){try{return JSON.parse(base64.decode(rawPayload))}catch(parseError){throw new Error("Invalid token")}}function has(obj,key){return Object.prototype.hasOwnProperty.call(obj,key)}var parseMapboxToken=parseToken;var immutable=extend;var hasOwnProperty=Object.prototype.hasOwnProperty;function extend(){var target={};for(var i=0;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target}var eventemitter3=createCommonjsModule(function(module){var has=Object.prototype.hasOwnProperty,prefix="~";function Events(){}if(Object.create){Events.prototype=Object.create(null);if(!(new Events).__proto__)prefix=false}function EE(fn,context,once){this.fn=fn;this.context=context;this.once=once||false}function addListener(emitter,event,fn,context,once){if(typeof fn!=="function"){throw new TypeError("The listener must be a function")}var listener=new EE(fn,context||emitter,once),evt=prefix?prefix+event:event;if(!emitter._events[evt])emitter._events[evt]=listener,emitter._eventsCount++;else if(!emitter._events[evt].fn)emitter._events[evt].push(listener);else emitter._events[evt]=[emitter._events[evt],listener];return emitter}function clearEvent(emitter,evt){if(--emitter._eventsCount===0)emitter._events=new Events;else delete emitter._events[evt]}function EventEmitter(){this._events=new Events;this._eventsCount=0}EventEmitter.prototype.eventNames=function eventNames(){var names=[],events,name;if(this._eventsCount===0)return names;for(name in events=this._events){if(has.call(events,name))names.push(prefix?name.slice(1):name)}if(Object.getOwnPropertySymbols){return names.concat(Object.getOwnPropertySymbols(events))}return names};EventEmitter.prototype.listeners=function listeners(event){var evt=prefix?prefix+event:event,handlers=this._events[evt];if(!handlers)return[];if(handlers.fn)return[handlers.fn];for(var i=0,l=handlers.length,ee=new Array(l);i<l;i++){ee[i]=handlers[i].fn}return ee};EventEmitter.prototype.listenerCount=function listenerCount(event){var evt=prefix?prefix+event:event,listeners=this._events[evt];if(!listeners)return 0;if(listeners.fn)return 1;return listeners.length};EventEmitter.prototype.emit=function emit(event,a1,a2,a3,a4,a5){var evt=prefix?prefix+event:event;if(!this._events[evt])return false;var listeners=this._events[evt],len=arguments.length,args,i;if(listeners.fn){if(listeners.once)this.removeListener(event,listeners.fn,undefined,true);switch(len){case 1:return listeners.fn.call(listeners.context),true;case 2:return listeners.fn.call(listeners.context,a1),true;case 3:return listeners.fn.call(listeners.context,a1,a2),true;case 4:return listeners.fn.call(listeners.context,a1,a2,a3),true;case 5:return listeners.fn.call(listeners.context,a1,a2,a3,a4),true;case 6:return listeners.fn.call(listeners.context,a1,a2,a3,a4,a5),true}for(i=1,args=new Array(len-1);i<len;i++){args[i-1]=arguments[i]}listeners.fn.apply(listeners.context,args)}else{var length=listeners.length,j;for(i=0;i<length;i++){if(listeners[i].once)this.removeListener(event,listeners[i].fn,undefined,true);switch(len){case 1:listeners[i].fn.call(listeners[i].context);break;case 2:listeners[i].fn.call(listeners[i].context,a1);break;case 3:listeners[i].fn.call(listeners[i].context,a1,a2);break;case 4:listeners[i].fn.call(listeners[i].context,a1,a2,a3);break;default:if(!args)for(j=1,args=new Array(len-1);j<len;j++){args[j-1]=arguments[j]}listeners[i].fn.apply(listeners[i].context,args)}}}return true};EventEmitter.prototype.on=function on(event,fn,context){return addListener(this,event,fn,context,false)};EventEmitter.prototype.once=function once(event,fn,context){return addListener(this,event,fn,context,true)};EventEmitter.prototype.removeListener=function removeListener(event,fn,context,once){var evt=prefix?prefix+event:event;if(!this._events[evt])return this;if(!fn){clearEvent(this,evt);return this}var listeners=this._events[evt];if(listeners.fn){if(listeners.fn===fn&&(!once||listeners.once)&&(!context||listeners.context===context)){clearEvent(this,evt)}}else{for(var i=0,events=[],length=listeners.length;i<length;i++){if(listeners[i].fn!==fn||once&&!listeners[i].once||context&&listeners[i].context!==context){events.push(listeners[i])}}if(events.length)this._events[evt]=events.length===1?events[0]:events;else clearEvent(this,evt)}return this};EventEmitter.prototype.removeAllListeners=function removeAllListeners(event){var evt;if(event){evt=prefix?prefix+event:event;if(this._events[evt])clearEvent(this,evt)}else{this._events=new Events;this._eventsCount=0}return this};EventEmitter.prototype.off=EventEmitter.prototype.removeListener;EventEmitter.prototype.addListener=EventEmitter.prototype.on;EventEmitter.prefixed=prefix;EventEmitter.EventEmitter=EventEmitter;{module.exports=EventEmitter}});function encodeArray(arrayValue){return arrayValue.map(encodeURIComponent).join(",")}function encodeValue(value){if(Array.isArray(value)){return encodeArray(value)}return encodeURIComponent(String(value))}function appendQueryParam(url,key,value){if(value===false||value===null){return url}var punctuation=/\?/.test(url)?"&":"?";var query=encodeURIComponent(key);if(value!==undefined&&value!==""&&value!==true){query+="="+encodeValue(value)}return""+url+punctuation+query}function appendQueryObject(url,queryObject){if(!queryObject){return url}var result=url;Object.keys(queryObject).forEach(function(key){var value=queryObject[key];if(value===undefined){return}if(Array.isArray(value)){value=value.filter(function(v){return!!v}).join(",")}result=appendQueryParam(result,key,value)});return result}function prependOrigin(url,origin){if(!origin){return url}if(url.slice(0,4)==="http"){return url}var delimiter=url[0]==="/"?"":"/";return""+origin.replace(/\/$/,"")+delimiter+url}function interpolateRouteParams(route,params){if(!params){return route}return route.replace(/\/:([a-zA-Z0-9]+)/g,function(_,paramId){var value=params[paramId];if(value===undefined){throw new Error("Unspecified route parameter "+paramId)}var preppedValue=encodeValue(value);return"/"+preppedValue})}var urlUtils={appendQueryObject:appendQueryObject,appendQueryParam:appendQueryParam,prependOrigin:prependOrigin,interpolateRouteParams:interpolateRouteParams};var requestId=1;function MapiRequest(client,options){if(!client){throw new Error("MapiRequest requires a client")}if(!options||!options.path||!options.method){throw new Error("MapiRequest requires an options object with path and method properties")}var defaultHeaders={};if(options.body){defaultHeaders["content-type"]="application/json"}var headersWithDefaults=immutable(defaultHeaders,options.headers);var headers=Object.keys(headersWithDefaults).reduce(function(memo,name){memo[name.toLowerCase()]=headersWithDefaults[name];return memo},{});this.id=requestId++;this._options=options;this.emitter=new eventemitter3;this.client=client;this.response=null;this.error=null;this.sent=false;this.aborted=false;this.path=options.path;this.method=options.method;this.origin=options.origin||client.origin;this.query=options.query||{};this.params=options.params||{};this.body=options.body||null;this.file=options.file||null;this.headers=headers}MapiRequest.prototype.url=function url(accessToken){var url=urlUtils.prependOrigin(this.path,this.origin);url=urlUtils.appendQueryObject(url,this.query);var routeParams=this.params;if(accessToken){url=urlUtils.appendQueryParam(url,"access_token",accessToken);var accessTokenOwnerId=parseMapboxToken(accessToken).user;routeParams=immutable({ownerId:accessTokenOwnerId},routeParams)}url=urlUtils.interpolateRouteParams(url,routeParams);return url};MapiRequest.prototype.send=function send(){var self=this;if(self.sent){throw new Error("This request has already been sent. Check the response and error properties. Create a new request with clone().")}self.sent=true;return self.client.sendRequest(self).then(function(response){self.response=response;self.emitter.emit(constants.EVENT_RESPONSE,response);return response},function(error){self.error=error;self.emitter.emit(constants.EVENT_ERROR,error);throw error})};MapiRequest.prototype.abort=function abort(){if(this._nextPageRequest){this._nextPageRequest.abort();delete this._nextPageRequest}if(this.response||this.error||this.aborted)return;this.aborted=true;this.client.abortRequest(this)};MapiRequest.prototype.eachPage=function eachPage(callback){var self=this;function handleResponse(response){function getNextPage(){delete self._nextPageRequest;var nextPageRequest=response.nextPage();if(nextPageRequest){self._nextPageRequest=nextPageRequest;getPage(nextPageRequest)}}callback(null,response,getNextPage)}function handleError(error){callback(error,null,function(){})}function getPage(request){request.send().then(handleResponse,handleError)}getPage(this)};MapiRequest.prototype.clone=function clone(){return this._extend()};MapiRequest.prototype._extend=function _extend(options){var extendedOptions=immutable(this._options,options);return new MapiRequest(this.client,extendedOptions)};var mapiRequest=MapiRequest;function MapiClient(options){if(!options||!options.accessToken){throw new Error("Cannot create a client without an access token")}parseMapboxToken(options.accessToken);this.accessToken=options.accessToken;this.origin=options.origin||constants.API_ORIGIN}MapiClient.prototype.createRequest=function createRequest(requestOptions){return new mapiRequest(this,requestOptions)};var mapiClient=MapiClient;function BrowserClient(options){mapiClient.call(this,options)}BrowserClient.prototype=Object.create(mapiClient.prototype);BrowserClient.prototype.constructor=BrowserClient;BrowserClient.prototype.sendRequest=browserLayer.browserSend;BrowserClient.prototype.abortRequest=browserLayer.browserAbort;function createBrowserClient(options){return new BrowserClient(options)}var browserClient=createBrowserClient;var toString=Object.prototype.toString;var isPlainObj=function(x){var prototype;return toString.call(x)==="[object Object]"&&(prototype=Object.getPrototypeOf(x),prototype===null||prototype===Object.getPrototypeOf({}))};var DEFAULT_ERROR_PATH="value";var NEWLINE_INDENT="\n  ";var v={};v.assert=function(rootValidator,options){options=options||{};return function(value){var message=validate(rootValidator,value);if(!message){return}var errorMessage=processMessage(message,options);if(options.apiName){errorMessage=options.apiName+": "+errorMessage}throw new Error(errorMessage)}};v.shape=function shape(validatorObj){var validators=objectEntries(validatorObj);return function shapeValidator(value){var validationResult=validate(v.plainObject,value);if(validationResult){return validationResult}var key,validator;var errorMessages=[];for(var i=0;i<validators.length;i++){key=validators[i].key;validator=validators[i].value;validationResult=validate(validator,value[key]);if(validationResult){errorMessages.push([key].concat(validationResult))}}if(errorMessages.length<2){return errorMessages[0]}return function(options){errorMessages=errorMessages.map(function(message){var key=message[0];var renderedMessage=processMessage(message,options).split("\n").join(NEWLINE_INDENT);return"- "+key+": "+renderedMessage});var objectId=options.path.join(".");var ofPhrase=objectId===DEFAULT_ERROR_PATH?"":" of "+objectId;return"The following properties"+ofPhrase+" have invalid values:"+NEWLINE_INDENT+errorMessages.join(NEWLINE_INDENT)}}};v.strictShape=function strictShape(validatorObj){var shapeValidator=v.shape(validatorObj);return function strictShapeValidator(value){var shapeResult=shapeValidator(value);if(shapeResult){return shapeResult}var invalidKeys=Object.keys(value).reduce(function(memo,valueKey){if(validatorObj[valueKey]===undefined){memo.push(valueKey)}return memo},[]);if(invalidKeys.length!==0){return function(){return"The following keys are invalid: "+invalidKeys.join(", ")}}}};v.arrayOf=function arrayOf(validator){return createArrayValidator(validator)};v.tuple=function tuple(){var validators=Array.isArray(arguments[0])?arguments[0]:Array.prototype.slice.call(arguments);return createArrayValidator(validators)};function createArrayValidator(validators){var validatingTuple=Array.isArray(validators);var getValidator=function(index){if(validatingTuple){return validators[index]}return validators};return function arrayValidator(value){var validationResult=validate(v.plainArray,value);if(validationResult){return validationResult}if(validatingTuple&&value.length!==validators.length){return"an array with "+validators.length+" items"}for(var i=0;i<value.length;i++){validationResult=validate(getValidator(i),value[i]);if(validationResult){return[i].concat(validationResult)}}}}v.required=function required(validator){function requiredValidator(value){if(value==null){return function(options){return formatErrorMessage(options,isArrayCulprit(options.path)?"cannot be undefined/null.":"is required.")}}return validator.apply(this,arguments)}requiredValidator.__required=true;return requiredValidator};v.oneOfType=function oneOfType(){var validators=Array.isArray(arguments[0])?arguments[0]:Array.prototype.slice.call(arguments);return function oneOfTypeValidator(value){var messages=validators.map(function(validator){return validate(validator,value)}).filter(Boolean);if(messages.length!==validators.length){return}if(messages.every(function(message){return message.length===1&&typeof message[0]==="string"})){return orList(messages.map(function(m){return m[0]}))}return messages.reduce(function(max,arr){return arr.length>max.length?arr:max})}};v.equal=function equal(compareWith){return function equalValidator(value){if(value!==compareWith){return JSON.stringify(compareWith)}}};v.oneOf=function oneOf(){var options=Array.isArray(arguments[0])?arguments[0]:Array.prototype.slice.call(arguments);var validators=options.map(function(value){return v.equal(value)});return v.oneOfType.apply(this,validators)};v.range=function range(compareWith){var min=compareWith[0];var max=compareWith[1];return function rangeValidator(value){var validationResult=validate(v.number,value);if(validationResult||value<min||value>max){return"number between "+min+" & "+max+" (inclusive)"}}};v.any=function any(){return};v.boolean=function boolean(value){if(typeof value!=="boolean"){return"boolean"}};v.number=function number(value){if(typeof value!=="number"){return"number"}};v.plainArray=function plainArray(value){if(!Array.isArray(value)){return"array"}};v.plainObject=function plainObject(value){if(!isPlainObj(value)){return"object"}};v.string=function string(value){if(typeof value!=="string"){return"string"}};v.func=function func(value){if(typeof value!=="function"){return"function"}};function validate(validator,value){if(value==null&&!validator.hasOwnProperty("__required")){return}var result=validator(value);if(result){return Array.isArray(result)?result:[result]}}function processMessage(message,options){var len=message.length;var result=message[len-1];var path=message.slice(0,len-1);if(path.length===0){path=[DEFAULT_ERROR_PATH]}options=immutable(options,{path:path});return typeof result==="function"?result(options):formatErrorMessage(options,prettifyResult(result))}function orList(list){if(list.length<2){return list[0]}if(list.length===2){return list.join(" or ")}return list.slice(0,-1).join(", ")+", or "+list.slice(-1)}function prettifyResult(result){return"must be "+addArticle(result)+"."}function addArticle(nounPhrase){if(/^an? /.test(nounPhrase)){return nounPhrase}if(/^[aeiou]/i.test(nounPhrase)){return"an "+nounPhrase}if(/^[a-z]/i.test(nounPhrase)){return"a "+nounPhrase}return nounPhrase}function formatErrorMessage(options,prettyResult){var arrayCulprit=isArrayCulprit(options.path);var output=options.path.join(".")+" "+prettyResult;var prepend=arrayCulprit?"Item at position ":"";return prepend+output}function isArrayCulprit(path){return typeof path[path.length-1]=="number"||typeof path[0]=="number"}function objectEntries(obj){return Object.keys(obj||{}).map(function(key){return{key:key,value:obj[key]}})}v.validate=validate;v.processMessage=processMessage;var lib=v;function file(value){if(typeof window!=="undefined"){if(value instanceof commonjsGlobal.Blob||value instanceof commonjsGlobal.ArrayBuffer){return}return"Blob or ArrayBuffer"}if(typeof value==="string"||value.pipe!==undefined){return}return"Filename or Readable stream"}function assertShape(validatorObj,apiName){return lib.assert(lib.strictShape(validatorObj),apiName)}function date(value){var msg="date";if(typeof value==="boolean"){return msg}try{var date=new Date(value);if(date.getTime&&isNaN(date.getTime())){return msg}}catch(e){return msg}}function coordinates(value){return lib.tuple(lib.number,lib.number)(value)}var validator=immutable(lib,{file:file,date:date,coordinates:coordinates,assertShape:assertShape});function pick(source,keys){var filter=function(key,val){return keys.indexOf(key)!==-1&&val!==undefined};if(typeof keys==="function"){filter=keys}return Object.keys(source).filter(function(key){return filter(key,source[key])}).reduce(function(result,key){result[key]=source[key];return result},{})}var pick_1=pick;function createServiceFactory(ServicePrototype){return function(clientOrConfig){var client;if(mapiClient.prototype.isPrototypeOf(clientOrConfig)){client=clientOrConfig}else{client=browserClient(clientOrConfig)}var service=Object.create(ServicePrototype);service.client=client;return service}}var createServiceFactory_1=createServiceFactory;var Datasets={};Datasets.listDatasets=function(){return this.client.createRequest({method:"GET",path:"/datasets/v1/:ownerId"})};Datasets.createDataset=function(config){validator.assertShape({name:validator.string,description:validator.string})(config);return this.client.createRequest({method:"POST",path:"/datasets/v1/:ownerId",body:config})};Datasets.getMetadata=function(config){validator.assertShape({datasetId:validator.required(validator.string),description:validator.string})(config);return this.client.createRequest({method:"GET",path:"/datasets/v1/:ownerId/:datasetId",params:config})};Datasets.updateMetadata=function(config){validator.assertShape({datasetId:validator.required(validator.string),name:validator.string,description:validator.string})(config);return this.client.createRequest({method:"PATCH",path:"/datasets/v1/:ownerId/:datasetId",params:pick_1(config,["datasetId"]),body:pick_1(config,["name","description"])})};Datasets.deleteDataset=function(config){validator.assertShape({datasetId:validator.required(validator.string)})(config);return this.client.createRequest({method:"DELETE",path:"/datasets/v1/:ownerId/:datasetId",params:config})};Datasets.listFeatures=function(config){validator.assertShape({datasetId:validator.required(validator.string),limit:validator.number,start:validator.string})(config);return this.client.createRequest({method:"GET",path:"/datasets/v1/:ownerId/:datasetId/features",params:pick_1(config,["datasetId"]),query:pick_1(config,["limit","start"])})};Datasets.putFeature=function(config){validator.assertShape({datasetId:validator.required(validator.string),featureId:validator.required(validator.string),feature:validator.required(validator.plainObject)})(config);if(config.feature.id!==undefined&&config.feature.id!==config.featureId){throw new Error("featureId must match the id property of the feature")}return this.client.createRequest({method:"PUT",path:"/datasets/v1/:ownerId/:datasetId/features/:featureId",params:pick_1(config,["datasetId","featureId"]),body:config.feature})};Datasets.getFeature=function(config){validator.assertShape({datasetId:validator.required(validator.string),featureId:validator.required(validator.string)})(config);return this.client.createRequest({method:"GET",path:"/datasets/v1/:ownerId/:datasetId/features/:featureId",params:config})};Datasets.deleteFeature=function(config){validator.assertShape({datasetId:validator.required(validator.string),featureId:validator.required(validator.string)})(config);return this.client.createRequest({method:"DELETE",path:"/datasets/v1/:ownerId/:datasetId/features/:featureId",params:config})};var datasets=createServiceFactory_1(Datasets);function objectClean(obj){return pick_1(obj,function(_,val){return val!=null})}var objectClean_1=objectClean;function objectMap(obj,cb){return Object.keys(obj).reduce(function(result,key){result[key]=cb(key,obj[key]);return result},{})}var objectMap_1=objectMap;function stringifyBoolean(obj){return objectMap_1(obj,function(_,value){return typeof value==="boolean"?JSON.stringify(value):value})}var stringifyBooleans=stringifyBoolean;var Directions={};Directions.getDirections=function(config){validator.assertShape({profile:validator.oneOf("driving-traffic","driving","walking","cycling"),waypoints:validator.required(validator.arrayOf(validator.shape({coordinates:validator.required(validator.coordinates),approach:validator.oneOf("unrestricted","curb"),bearing:validator.arrayOf(validator.range([0,360])),radius:validator.oneOfType(validator.number,validator.equal("unlimited")),waypointName:validator.string}))),alternatives:validator.boolean,annotations:validator.arrayOf(validator.oneOf("duration","distance","speed","congestion")),bannerInstructions:validator.boolean,continueStraight:validator.boolean,exclude:validator.string,geometries:validator.string,language:validator.string,overview:validator.string,roundaboutExits:validator.boolean,steps:validator.boolean,voiceInstructions:validator.boolean,voiceUnits:validator.string})(config);config.profile=config.profile||"driving";var path={coordinates:[],approach:[],bearing:[],radius:[],waypointName:[]};var waypointCount=config.waypoints.length;if(waypointCount<2||waypointCount>25){throw new Error("waypoints must include between 2 and 25 DirectionsWaypoints")}config.waypoints.forEach(function(waypoint){path.coordinates.push(waypoint.coordinates[0]+","+waypoint.coordinates[1]);["bearing"].forEach(function(prop){if(waypoint.hasOwnProperty(prop)&&waypoint[prop]!=null){waypoint[prop]=waypoint[prop].join(",")}});["approach","bearing","radius","waypointName"].forEach(function(prop){if(waypoint.hasOwnProperty(prop)&&waypoint[prop]!=null){path[prop].push(waypoint[prop])}else{path[prop].push("")}})});["approach","bearing","radius","waypointName"].forEach(function(prop){if(path[prop].every(function(char){return char===""})){delete path[prop]}else{path[prop]=path[prop].join(";")}});var query=stringifyBooleans({alternatives:config.alternatives,annotations:config.annotations,banner_instructions:config.bannerInstructions,continue_straight:config.continueStraight,exclude:config.exclude,geometries:config.geometries,language:config.language,overview:config.overview,roundabout_exits:config.roundaboutExits,steps:config.steps,voice_instructions:config.voiceInstructions,voice_units:config.voiceUnits,approaches:path.approach,bearings:path.bearing,radiuses:path.radius,waypoint_names:path.waypointName});return this.client.createRequest({method:"GET",path:"/directions/v5/mapbox/:profile/:coordinates",params:{profile:config.profile,coordinates:path.coordinates.join(";")},query:objectClean_1(query)})};var directions=createServiceFactory_1(Directions);var Geocoding={};var featureTypes=["country","region","postcode","district","place","locality","neighborhood","address","poi","poi.landmark"];Geocoding.forwardGeocode=function(config){validator.assertShape({query:validator.required(validator.string),mode:validator.oneOf("mapbox.places","mapbox.places-permanent"),countries:validator.arrayOf(validator.string),proximity:validator.coordinates,types:validator.arrayOf(validator.oneOf(featureTypes)),autocomplete:validator.boolean,bbox:validator.arrayOf(validator.number),limit:validator.number,language:validator.arrayOf(validator.string)})(config);config.mode=config.mode||"mapbox.places";var query=stringifyBooleans(immutable({country:config.countries},pick_1(config,["proximity","types","autocomplete","bbox","limit","language"])));return this.client.createRequest({method:"GET",path:"/geocoding/v5/:mode/:query.json",params:pick_1(config,["mode","query"]),query:query})};Geocoding.reverseGeocode=function(config){validator.assertShape({query:validator.required(validator.coordinates),mode:validator.oneOf("mapbox.places","mapbox.places-permanent"),countries:validator.arrayOf(validator.string),types:validator.arrayOf(validator.oneOf(featureTypes)),bbox:validator.arrayOf(validator.number),limit:validator.number,language:validator.arrayOf(validator.string),reverseMode:validator.oneOf("distance","score")})(config);config.mode=config.mode||"mapbox.places";var query=stringifyBooleans(immutable({country:config.countries},pick_1(config,["country","types","bbox","limit","language","reverseMode"])));return this.client.createRequest({method:"GET",path:"/geocoding/v5/:mode/:query.json",params:pick_1(config,["mode","query"]),query:query})};var geocoding=createServiceFactory_1(Geocoding);var MapMatching={};MapMatching.getMatch=function(config){validator.assertShape({points:validator.required(validator.arrayOf(validator.shape({coordinates:validator.required(validator.coordinates),approach:validator.oneOf("unrestricted","curb"),radius:validator.range([0,50]),isWaypoint:validator.boolean,waypointName:validator.string,timestamp:validator.date}))),profile:validator.oneOf("driving-traffic","driving","walking","cycling"),annotations:validator.arrayOf(validator.oneOf("duration","distance","speed")),geometries:validator.oneOf("geojson","polyline","polyline6"),language:validator.string,overview:validator.oneOf("full","simplified","false"),steps:validator.boolean,tidy:validator.boolean})(config);var pointCount=config.points.length;if(pointCount<2||pointCount>100){throw new Error("points must include between 2 and 100 MapMatchingPoints")}config.profile=config.profile||"driving";var path={coordinates:[],approach:[],radius:[],isWaypoint:[],waypointName:[],timestamp:[]};config.points.forEach(function(obj){path.coordinates.push(obj.coordinates[0]+","+obj.coordinates[1]);if(obj.hasOwnProperty("isWaypoint")&&obj.isWaypoint!=null){path.isWaypoint.push(obj.isWaypoint)}else{path.isWaypoint.push(true)}if(obj.hasOwnProperty("timestamp")&&obj.timestamp!=null){path.timestamp.push(Number(new Date(obj.timestamp)))}else{path.timestamp.push("")}["approach","radius","waypointName"].forEach(function(prop){if(obj.hasOwnProperty(prop)&&obj[prop]!=null){path[prop].push(obj[prop])}else{path[prop].push("")}})});["coordinates","approach","radius","waypointName","timestamp"].forEach(function(prop){if(path[prop].every(function(value){return value===""})){delete path[prop]}else{path[prop]=path[prop].join(";")}});path.isWaypoint[0]=true;path.isWaypoint[path.isWaypoint.length-1]=true;if(path.isWaypoint.every(function(value){return value===true})){delete path.isWaypoint}else{path.isWaypoint=path.isWaypoint.map(function(val,i){return val===true?i:""}).join(";")}var body=stringifyBooleans(objectClean_1({annotations:config.annotations,geometries:config.geometries,language:config.language,overview:config.overview,steps:config.steps,tidy:config.tidy,approaches:path.approach,radiuses:path.radius,waypoints:path.isWaypoint,timestamps:path.timestamp,waypoint_names:path.waypointName,coordinates:path.coordinates}));return this.client.createRequest({method:"POST",path:"/matching/v5/mapbox/:profile",params:{profile:config.profile},body:urlUtils.appendQueryObject("",body).substring(1),headers:{"content-type":"application/x-www-form-urlencoded"}})};var mapMatching=createServiceFactory_1(MapMatching);var Matrix={};Matrix.getMatrix=function(config){validator.assertShape({points:validator.required(validator.arrayOf(validator.shape({coordinates:validator.required(validator.coordinates),approach:validator.oneOf("unrestricted","curb")}))),profile:validator.oneOf("driving-traffic","driving","walking","cycling"),annotations:validator.arrayOf(validator.oneOf("duration","distance")),sources:validator.oneOfType(validator.equal("all"),validator.arrayOf(validator.number)),destinations:validator.oneOfType(validator.equal("all"),validator.arrayOf(validator.number))})(config);var pointCount=config.points.length;if(pointCount<2||pointCount>100){throw new Error("points must include between 2 and 100 MatrixPoints")}config.profile=config.profile||"driving";var path={coordinates:[],approach:[]};config.points.forEach(function(obj){path.coordinates.push(obj.coordinates[0]+","+obj.coordinates[1]);if(obj.hasOwnProperty("approach")&&obj.approach!=null){path.approach.push(obj.approach)}else{path.approach.push("")}});if(path.approach.every(function(value){return value===""})){delete path.approach}else{path.approach=path.approach.join(";")}var query={sources:Array.isArray(config.sources)?config.sources.join(";"):config.sources,destinations:Array.isArray(config.destinations)?config.destinations.join(";"):config.destinations,approaches:path.approach,annotations:config.annotations&&config.annotations.join(",")};return this.client.createRequest({method:"GET",path:"/directions-matrix/v1/mapbox/:profile/:coordinates",params:{profile:config.profile,coordinates:path.coordinates.join(";")},query:objectClean_1(query)})};var matrix=createServiceFactory_1(Matrix);var Optimization={};Optimization.getOptimization=function(config){validator.assertShape({profile:validator.oneOf("driving","walking","cycling"),waypoints:validator.required(validator.arrayOf(validator.shape({coordinates:validator.required(validator.coordinates),approach:validator.oneOf("unrestricted","curb"),bearing:validator.arrayOf(validator.range([0,360])),radius:validator.oneOfType(validator.number,validator.equal("unlimited"))}))),annotations:validator.arrayOf(validator.oneOf("duration","distance","speed")),geometries:validator.oneOf("geojson","polyline","polyline6"),language:validator.string,overview:validator.oneOf("simplified","full","false"),roundtrip:validator.boolean,steps:validator.boolean,source:validator.oneOf("any","first"),destination:validator.oneOf("any","last"),distributions:validator.arrayOf(validator.shape({pickup:validator.number,dropoff:validator.number}))})(config);var path={coordinates:[],approach:[],bearing:[],radius:[],distributions:[]};var waypointCount=config.waypoints.length;if(waypointCount<2||waypointCount>12){throw new Error("waypoints must include between 2 and 12 OptimizationWaypoints")}config.waypoints.forEach(function(waypoint){path.coordinates.push(waypoint.coordinates[0]+","+waypoint.coordinates[1]);["bearing"].forEach(function(prop){if(waypoint.hasOwnProperty(prop)&&waypoint[prop]!=null){waypoint[prop]=waypoint[prop].join(",")}});["approach","bearing","radius"].forEach(function(prop){if(waypoint.hasOwnProperty(prop)&&waypoint[prop]!=null){path[prop].push(waypoint[prop])}else{path[prop].push("")}})});if(config.distributions){config.distributions.forEach(function(dist){path.distributions.push(dist.pickup+","+dist.dropoff)})}["approach","bearing","radius","distributions"].forEach(function(prop){if(path[prop].every(function(char){return char===""})){delete path[prop]}else{path[prop]=path[prop].join(";")}});var query=stringifyBooleans({geometries:config.geometries,language:config.language,overview:config.overview,roundtrip:config.roundtrip,steps:config.steps,source:config.source,destination:config.destination,distributions:path.distributions,approaches:path.approach,bearings:path.bearing,radiuses:path.radius});return this.client.createRequest({method:"GET",path:"/optimized-trips/v1/mapbox/:profile/:coordinates",params:{profile:config.profile||"driving",coordinates:path.coordinates.join(";")},query:objectClean_1(query)})};var optimization=createServiceFactory_1(Optimization);var polyline_1=createCommonjsModule(function(module){var polyline={};function py2_round(value){return Math.floor(Math.abs(value)+.5)*(value>=0?1:-1)}function encode(current,previous,factor){current=py2_round(current*factor);previous=py2_round(previous*factor);var coordinate=current-previous;coordinate<<=1;if(current-previous<0){coordinate=~coordinate}var output="";while(coordinate>=32){output+=String.fromCharCode((32|coordinate&31)+63);coordinate>>=5}output+=String.fromCharCode(coordinate+63);return output}polyline.decode=function(str,precision){var index=0,lat=0,lng=0,coordinates=[],shift=0,result=0,byte=null,latitude_change,longitude_change,factor=Math.pow(10,precision||5);while(index<str.length){byte=null;shift=0;result=0;do{byte=str.charCodeAt(index++)-63;result|=(byte&31)<<shift;shift+=5}while(byte>=32);latitude_change=result&1?~(result>>1):result>>1;shift=result=0;do{byte=str.charCodeAt(index++)-63;result|=(byte&31)<<shift;shift+=5}while(byte>=32);longitude_change=result&1?~(result>>1):result>>1;lat+=latitude_change;lng+=longitude_change;coordinates.push([lat/factor,lng/factor])}return coordinates};polyline.encode=function(coordinates,precision){if(!coordinates.length){return""}var factor=Math.pow(10,precision||5),output=encode(coordinates[0][0],0,factor)+encode(coordinates[0][1],0,factor);for(var i=1;i<coordinates.length;i++){var a=coordinates[i],b=coordinates[i-1];output+=encode(a[0],b[0],factor);output+=encode(a[1],b[1],factor)}return output};function flipped(coords){var flipped=[];for(var i=0;i<coords.length;i++){flipped.push(coords[i].slice().reverse())}return flipped}polyline.fromGeoJSON=function(geojson,precision){if(geojson&&geojson.type==="Feature"){geojson=geojson.geometry}if(!geojson||geojson.type!=="LineString"){throw new Error("Input must be a GeoJSON LineString")}return polyline.encode(flipped(geojson.coordinates),precision)};polyline.toGeoJSON=function(str,precision){var coords=polyline.decode(str,precision);return{type:"LineString",coordinates:flipped(coords)}};if(module.exports){module.exports=polyline}});var Static={};Static.getStaticImage=function(config){validator.assertShape({ownerId:validator.required(validator.string),styleId:validator.required(validator.string),width:validator.required(validator.range([1,1280])),height:validator.required(validator.range([1,1280])),position:validator.required(validator.oneOfType(validator.oneOf("auto"),validator.strictShape({coordinates:validator.required(validator.coordinates),zoom:validator.required(validator.range([0,20])),bearing:validator.range([0,360]),pitch:validator.range([0,60])}))),overlays:validator.arrayOf(validator.plainObject),highRes:validator.boolean,insertOverlayBeforeLayer:validator.string,attribution:validator.boolean,logo:validator.boolean})(config);var encodedOverlay=(config.overlays||[]).map(function(overlayItem){if(overlayItem.marker){return encodeMarkerOverlay(overlayItem.marker)}if(overlayItem.path){return encodePathOverlay(overlayItem.path)}return encodeGeoJsonOverlay(overlayItem.geoJson)}).join(",");var encodedPosition=encodePosition(config.position);var encodedDimensions=config.width+"x"+config.height;if(config.highRes){encodedDimensions+="@2x"}var preEncodedUrlParts=[encodedOverlay,encodedPosition,encodedDimensions].filter(Boolean).join("/");var query={};if(config.attribution!==undefined){query.attribution=String(config.attribution)}if(config.logo!==undefined){query.logo=String(config.logo)}if(config.insertOverlayBeforeLayer!==undefined){query.before_layer=config.insertOverlayBeforeLayer}return this.client.createRequest({method:"GET",path:"/styles/v1/:ownerId/:styleId/static/"+preEncodedUrlParts,params:pick_1(config,["ownerId","styleId"]),query:query})};function encodePosition(position){if(position==="auto")return"auto";return position.coordinates.concat([position.zoom,position.bearing,position.pitch]).filter(Boolean).join(",")}function encodeMarkerOverlay(o){if(o.url){return encodeCustomMarkerOverlay(o)}return encodeSimpleMarkerOverlay(o)}function encodeSimpleMarkerOverlay(o){validator.assertShape({coordinates:validator.required(validator.coordinates),size:validator.oneOf("large","small"),label:validator.string,color:validator.string})(o);var result=o.size==="large"?"pin-l":"pin-s";if(o.label){result+="-"+String(o.label).toLowerCase()}if(o.color){result+="+"+sanitizeHexColor(o.color)}result+="("+o.coordinates.join(",")+")";return result}function encodeCustomMarkerOverlay(o){validator.assertShape({coordinates:validator.required(validator.coordinates),url:validator.required(validator.string)})(o);var result="url-"+encodeURIComponent(o.url);result+="("+o.coordinates.join(",")+")";return result}function encodePathOverlay(o){validator.assertShape({coordinates:validator.required(validator.arrayOf(validator.coordinates)),strokeWidth:validator.number,strokeColor:validator.string,strokeOpacity:validator.number,fillColor:validator.string,fillOpacity:validator.number})(o);if(o.strokeOpacity!==undefined&&o.strokeColor===undefined){throw new Error("strokeOpacity requires strokeColor")}if(o.fillColor!==undefined&&o.strokeColor===undefined){throw new Error("fillColor requires strokeColor")}if(o.fillOpacity!==undefined&&o.fillColor===undefined){throw new Error("fillOpacity requires fillColor")}var result="path";if(o.strokeWidth){result+="-"+o.strokeWidth}if(o.strokeColor){result+="+"+sanitizeHexColor(o.strokeColor)}if(o.strokeOpacity){result+="-"+o.strokeOpacity}if(o.fillColor){result+="+"+sanitizeHexColor(o.fillColor)}if(o.fillOpacity){result+="-"+o.fillOpacity}var reversedCoordinates=o.coordinates.map(function(c){return c.reverse()});var encodedPolyline=polyline_1.encode(reversedCoordinates);result+="("+encodeURIComponent(encodedPolyline)+")";return result}function encodeGeoJsonOverlay(o){validator.assert(validator.required(validator.plainObject))(o);return"geojson("+encodeURIComponent(JSON.stringify(o))+")"}function sanitizeHexColor(color){return color.replace(/^#/,"")}var _static=createServiceFactory_1(Static);var Styles={};Styles.getStyle=function(config){validator.assertShape({styleId:validator.required(validator.string),ownerId:validator.string})(config);return this.client.createRequest({method:"GET",path:"/styles/v1/:ownerId/:styleId",params:config})};Styles.createStyle=function(config){validator.assertShape({style:validator.plainObject,ownerId:validator.string})(config);return this.client.createRequest({method:"POST",path:"/styles/v1/:ownerId",params:pick_1(config,["ownerId"]),body:config.style})};Styles.updateStyle=function(config){validator.assertShape({styleId:validator.required(validator.string),style:validator.required(validator.plainObject),lastKnownModification:validator.date,ownerId:validator.string})(config);var headers={};if(config.lastKnownModification){headers["If-Unmodified-Since"]=new Date(config.lastKnownModification).toUTCString()}return this.client.createRequest({method:"PATCH",path:"/styles/v1/:ownerId/:styleId",params:pick_1(config,["styleId","ownerId"]),headers:headers,body:config.style})};Styles.deleteStyle=function(config){validator.assertShape({styleId:validator.required(validator.string),ownerId:validator.string})(config);return this.client.createRequest({method:"DELETE",path:"/styles/v1/:ownerId/:styleId",params:config})};Styles.listStyles=function(config){config=config||{};validator.assertShape({start:validator.string,ownerId:validator.string})(config);var query={};if(config.start){query.start=config.start}return this.client.createRequest({method:"GET",path:"/styles/v1/:ownerId",params:pick_1(config,["ownerId"]),query:query})};Styles.putStyleIcon=function(config){validator.assertShape({styleId:validator.required(validator.string),iconId:validator.required(validator.string),file:validator.file,ownerId:validator.string})(config);return this.client.createRequest({method:"PUT",path:"/styles/v1/:ownerId/:styleId/sprite/:iconId",params:pick_1(config,["ownerId","styleId","iconId"]),file:config.file})};Styles.deleteStyleIcon=function(config){validator.assertShape({styleId:validator.required(validator.string),iconId:validator.required(validator.string),ownerId:validator.string})(config);return this.client.createRequest({method:"DELETE",path:"/styles/v1/:ownerId/:styleId/sprite/:iconId",params:config})};Styles.getStyleSprite=function(config){validator.assertShape({styleId:validator.required(validator.string),format:validator.oneOf("json","png"),highRes:validator.boolean,ownerId:validator.string})(config);var format=config.format||"json";var fileName="sprite"+(config.highRes?"@2x":"")+"."+format;return this.client.createRequest({method:"GET",path:"/styles/v1/:ownerId/:styleId/:fileName",params:immutable(pick_1(config,["ownerId","styleId"]),{fileName:fileName})})};Styles.getFontGlyphRange=function(config){validator.assertShape({fonts:validator.required(validator.oneOfType(validator.string,validator.arrayOf(validator.string))),start:validator.required(validator.number),end:validator.required(validator.number),ownerId:validator.string})(config);var fileName=config.start+"-"+config.end+".pbf";return this.client.createRequest({method:"GET",path:"/fonts/v1/:ownerId/:fontList/:fileName",params:immutable(pick_1(config,["ownerId"]),{fontList:[].concat(config.fonts),fileName:fileName})})};Styles.getEmbeddableHtml=function(config){validator.assertShape({styleId:validator.required(validator.string),scrollZoom:validator.boolean,title:validator.boolean,ownerId:validator.string})(config);var fileName=config.styleId+".html";var query={};if(config.scrollZoom!==undefined){query.zoomwheel=String(config.scrollZoom)}if(config.title!==undefined){query.title=String(config.title)}return this.client.createRequest({method:"GET",path:"/styles/v1/:ownerId/:fileName",params:immutable(pick_1(config,["ownerId"]),{fileName:fileName}),query:query})};var styles=createServiceFactory_1(Styles);var Tilequery={};Tilequery.listFeatures=function(config){validator.assertShape({mapIds:validator.required(validator.arrayOf(validator.string)),coordinates:validator.required(validator.coordinates),radius:validator.number,limit:validator.range([1,50]),dedupe:validator.boolean,layers:validator.arrayOf(validator.string)})(config);return this.client.createRequest({method:"GET",path:"/v4/:mapIds/tilequery/:coordinates.json",params:{mapIds:config.mapIds,coordinates:config.coordinates},query:pick_1(config,["radius","limit","dedupe","layers"])})};var tilequery=createServiceFactory_1(Tilequery);var Tilesets={};Tilesets.listTilesets=function(config){validator.assertShape({ownerId:validator.string})(config);return this.client.createRequest({method:"GET",path:"/tilesets/v1/:ownerId",params:config})};var tilesets=createServiceFactory_1(Tilesets);var Tokens={};Tokens.listTokens=function(){return this.client.createRequest({method:"GET",path:"/tokens/v2/:ownerId"})};Tokens.createToken=function(config){config=config||{};validator.assertShape({note:validator.string,scopes:validator.arrayOf(validator.string),resources:validator.arrayOf(validator.string)})(config);var body={};body.scopes=config.scopes||[];if(config.note!==undefined){body.note=config.note}if(config.resources){body.resources=config.resources}return this.client.createRequest({method:"POST",path:"/tokens/v2/:ownerId",params:pick_1(config,["ownerId"]),body:body})};Tokens.createTemporaryToken=function(config){config=config||{};validator.assertShape({expires:validator.required(validator.date),scopes:validator.required(validator.arrayOf(validator.string))})(config);return this.client.createRequest({method:"POST",path:"/tokens/v2/:ownerId",params:pick_1(config,["ownerId"]),body:{expires:new Date(config.expires).toISOString(),scopes:config.scopes}})};Tokens.updateToken=function(config){validator.assertShape({tokenId:validator.required(validator.string),note:validator.string,scopes:validator.arrayOf(validator.string),resources:validator.arrayOf(validator.string)})(config);var body={};if(config.scopes){body.scopes=config.scopes}if(config.note!==undefined){body.note=config.note}if(config.resources){body.resources=config.resources}return this.client.createRequest({method:"PATCH",path:"/tokens/v2/:ownerId/:tokenId",params:pick_1(config,["ownerId","tokenId"]),body:body})};Tokens.getToken=function(){return this.client.createRequest({method:"GET",path:"/tokens/v2"})};Tokens.deleteToken=function(config){validator.assertShape({tokenId:validator.required(validator.string)})(config);return this.client.createRequest({method:"DELETE",path:"/tokens/v2/:ownerId/:tokenId",params:pick_1(config,["ownerId","tokenId"])})};Tokens.listScopes=function(){return this.client.createRequest({method:"GET",path:"/scopes/v1/:ownerId"})};var tokens=createServiceFactory_1(Tokens);var Uploads={};Uploads.listUploads=function(config){validator.assertShape({reverse:validator.boolean})(config);return this.client.createRequest({method:"GET",path:"/uploads/v1/:ownerId",query:config})};Uploads.createUploadCredentials=function(){return this.client.createRequest({method:"POST",path:"/uploads/v1/:ownerId/credentials"})};Uploads.createUpload=function(config){validator.assertShape({mapId:validator.required(validator.string),url:validator.required(validator.string),tilesetName:validator.string})(config);return this.client.createRequest({method:"POST",path:"/uploads/v1/:ownerId",body:{tileset:config.mapId,url:config.url,name:config.tilesetName}})};Uploads.getUpload=function(config){validator.assertShape({uploadId:validator.required(validator.string)})(config);return this.client.createRequest({method:"GET",path:"/uploads/v1/:ownerId/:uploadId",params:config})};Uploads.deleteUpload=function(config){validator.assertShape({uploadId:validator.required(validator.string)})(config);return this.client.createRequest({method:"DELETE",path:"/uploads/v1/:ownerId/:uploadId",params:config})};var uploads=createServiceFactory_1(Uploads);function mapboxSdk(options){var client=browserClient(options);client.datasets=datasets(client);client.directions=directions(client);client.geocoding=geocoding(client);client.mapMatching=mapMatching(client);client.matrix=matrix(client);client.optimization=optimization(client);client.static=_static(client);client.styles=styles(client);client.tilequery=tilequery(client);client.tilesets=tilesets(client);client.tokens=tokens(client);client.uploads=uploads(client);return client}var bundle=mapboxSdk;return bundle});
diff --git a/server/csp.js b/server/csp.js
index 6d3bd9ee..5d24c602 100644
--- a/server/csp.js
+++ b/server/csp.js
@@ -5,6 +5,7 @@ const self = "'self'";
 const unsafeInline = "'unsafe-inline'";
 const unsafeEval = "'unsafe-eval'";
 const data = 'data:';
+const blob = 'blob:';
 const devImagesMaybe = dev ? ['*.localhost:8000'] : [];
 
 // Default CSP whitelist.
@@ -14,10 +15,13 @@ const devImagesMaybe = dev ? ['*.localhost:8000'] : [];
 const defaultDirectives = {
   baseUri: [self],
   defaultSrc: [self],
+  childSrc: [blob],
   connectSrc: [
     self,
     process.env.REACT_APP_SHARETRIBE_SDK_BASE_URL,
     'maps.googleapis.com',
+    '*.tiles.mapbox.com',
+    'api.mapbox.com',
 
     // Google Analytics
     'www.google-analytics.com',
@@ -31,6 +35,7 @@ const defaultDirectives = {
   imgSrc: [
     self,
     data,
+    blob,
     ...devImagesMaybe,
     '*.imgix.net',
     'sharetribe.imgix.net', // Safari 9.1 didn't recognize asterisk rule.
@@ -39,6 +44,7 @@ const defaultDirectives = {
     'lorempixel.com',
     'via.placeholder.com',
 
+    'api.mapbox.com',
     'maps.googleapis.com',
     '*.gstatic.com',
     '*.googleapis.com',
@@ -57,10 +63,11 @@ const defaultDirectives = {
     unsafeEval,
     data,
     'maps.googleapis.com',
+    'api.mapbox.com',
     '*.google-analytics.com',
     'js.stripe.com',
   ],
-  styleSrc: [self, unsafeInline, 'fonts.googleapis.com'],
+  styleSrc: [self, unsafeInline, 'fonts.googleapis.com', 'api.mapbox.com'],
 };
 
 /**
diff --git a/src/components/LocationAutocompleteInput/GeocoderMapbox.js b/src/components/LocationAutocompleteInput/GeocoderMapbox.js
index 6a244936..f4bf37bd 100644
--- a/src/components/LocationAutocompleteInput/GeocoderMapbox.js
+++ b/src/components/LocationAutocompleteInput/GeocoderMapbox.js
@@ -6,7 +6,26 @@ const { LatLng: SDKLatLng, LatLngBounds: SDKLatLngBounds } = sdkTypes;
 
 export const CURRENT_LOCATION_ID = 'current-location';
 
+const GENERATED_BOUNDS_DEFAULT_DISTANCE = 500; // meters
+// Distances for generated bounding boxes for different Mapbox place types
+const PLACE_TYPE_BOUNDS_DISTANCES = {
+  address: 500,
+  country: 2000,
+  region: 2000,
+  postcode: 2000,
+  district: 2000,
+  place: 2000,
+  locality: 2000,
+  neighborhood: 2000,
+  poi: 2000,
+  'poi.landmark': 2000,
+};
+
 const locationBounds = (latlng, distance) => {
+  if (!latlng) {
+    return null;
+  }
+
   const bounds = new window.mapboxgl.LngLat(latlng.lng, latlng.lat).toBounds(distance);
   return new SDKLatLngBounds(
     new SDKLatLng(bounds.getNorth(), bounds.getEast()),
@@ -23,12 +42,24 @@ const placeOrigin = prediction => {
 };
 
 const placeBounds = prediction => {
-  if (prediction && Array.isArray(prediction.bbox) && prediction.bbox.length === 4) {
-    // Bounds in Mapbox features are represented as [minX, minY, maxX, maxY]
-    return new SDKLatLngBounds(
-      new SDKLatLng(prediction.bbox[3], prediction.bbox[2]),
-      new SDKLatLng(prediction.bbox[1], prediction.bbox[0])
-    );
+  if (prediction) {
+    if (Array.isArray(prediction.bbox) && prediction.bbox.length === 4) {
+      // Bounds in Mapbox features are represented as [minX, minY, maxX, maxY]
+      return new SDKLatLngBounds(
+        new SDKLatLng(prediction.bbox[3], prediction.bbox[2]),
+        new SDKLatLng(prediction.bbox[1], prediction.bbox[0])
+      );
+    } else {
+      // If bounds are not available, generate them around the origin
+
+      // Resolve bounds distance based on place type
+      const placeType = Array.isArray(prediction.place_type) && prediction.place_type[0];
+
+      const distance =
+        (placeType && PLACE_TYPE_BOUNDS_DISTANCES[placeType]) || GENERATED_BOUNDS_DEFAULT_DISTANCE;
+
+      return locationBounds(placeOrigin(prediction), distance);
+    }
   }
   return null;
 };
diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js b/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js
index 668973c8..eb9140b1 100644
--- a/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js
+++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js
@@ -5,11 +5,12 @@ import classNames from 'classnames';
 import debounce from 'lodash/debounce';
 import { IconSpinner } from '../../components';
 import { propTypes } from '../../util/types';
+import config from '../../config';
+
 import IconHourGlass from './IconHourGlass';
 import IconCurrentLocation from './IconCurrentLocation';
-import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderGoogleMaps';
-// import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderMapbox';
-import config from '../../config';
+import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderMapbox';
+// import Geocoder, { GeocoderAttribution, CURRENT_LOCATION_ID } from './GeocoderGoogleMaps';
 
 import css from './LocationAutocompleteInput.css';
 
diff --git a/src/components/Map/DynamicMapboxMap.js b/src/components/Map/DynamicMapboxMap.js
index 38e365fa..b799e267 100644
--- a/src/components/Map/DynamicMapboxMap.js
+++ b/src/components/Map/DynamicMapboxMap.js
@@ -1,5 +1,10 @@
 import React, { Component } from 'react';
 import { string, shape, number, object } from 'prop-types';
+// This MultiTouch lib is used for 2-finger panning.
+// which prevents user to experience map-scroll trap, while scrolling the page.
+// https://github.com/mapbox/mapbox-gl-js/issues/2618
+// TODO: we should add an overlay with text "use two fingers to pan".
+import MultiTouch from 'mapbox-gl-multitouch';
 import uniqueId from 'lodash/uniqueId';
 import { circlePolyline } from '../../util/maps';
 import config from '../../config';
@@ -65,7 +70,8 @@ class DynamicMapboxMap extends Component {
       zoom,
       scrollZoom: false,
     });
-    this.map.addControl(new window.mapboxgl.NavigationControl(), 'top-left');
+    this.map.addControl(new window.mapboxgl.NavigationControl({ showCompass: false }), 'top-left');
+    this.map.addControl(new MultiTouch());
 
     if (mapsConfig.fuzzy.enabled) {
       this.map.on('load', () => {
diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js
index 91012122..c43859d1 100644
--- a/src/components/Map/Map.js
+++ b/src/components/Map/Map.js
@@ -3,8 +3,8 @@ import { bool, number, object, string } from 'prop-types';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
 import config from '../../config';
-import { StaticMap, DynamicMap, isMapsLibLoaded } from './GoogleMap';
-// import { StaticMap, DynamicMap, isMapsLibLoaded } from './MapboxMap';
+import { StaticMap, DynamicMap, isMapsLibLoaded } from './MapboxMap';
+// import { StaticMap, DynamicMap, isMapsLibLoaded } from './GoogleMap';
 
 import css from './Map.css';
 
diff --git a/src/components/SearchMap/ReusableMapContainer.js b/src/components/SearchMap/ReusableMapContainer.js
index b00376e7..cbfdd49c 100644
--- a/src/components/SearchMap/ReusableMapContainer.js
+++ b/src/components/SearchMap/ReusableMapContainer.js
@@ -48,6 +48,7 @@ class ReusableMapContainer extends React.Component {
 
   componentWillUnmount() {
     this.el.classList.add(css.reusableMapHidden);
+    this.el.classList.add(this.props.reusableMapHiddenHandle);
     this.mountNode.removeChild(this.el);
     document.body.appendChild(this.el);
   }
@@ -90,6 +91,7 @@ class ReusableMapContainer extends React.Component {
       renderChildren();
     } else {
       this.el.classList.remove(css.reusableMapHidden);
+      this.el.classList.remove(this.props.reusableMapHiddenHandle);
 
       if (this.mountNode && !this.mountNode.firstChild) {
         // Move the map to correct location if we have rendered the map before
@@ -125,6 +127,7 @@ ReusableMapContainer.defaultProps = {
 ReusableMapContainer.propTypes = {
   children: node.isRequired,
   className: string,
+  reusableMapHiddenHandle: string.isRequired,
 };
 
 export default ReusableMapContainer;
diff --git a/src/components/SearchMap/SearchMap.helpers.js b/src/components/SearchMap/SearchMap.helpers.js
new file mode 100644
index 00000000..99fd3b49
--- /dev/null
+++ b/src/components/SearchMap/SearchMap.helpers.js
@@ -0,0 +1,35 @@
+import groupBy from 'lodash/groupBy';
+import reduce from 'lodash/reduce';
+
+/**
+ * hasParentWithClassName searches class name from parent elements of given target
+ * @param {Node} target - element whose parent might contain given class.
+ * @param {String} className - class name string to be found
+ */
+export const hasParentWithClassName = (target, className) => {
+  return [...document.querySelectorAll(`.${className}`)].some(
+    el => el !== target && el.contains(target)
+  );
+};
+
+/**
+ * Listings array grouped by geolocation
+ * @param {Array} mapListings - listings to be grouped on map
+ * @return {Object} - Object where coordinate pair is the key to different listings
+ */
+export const groupedByCoordinates = mapListings => {
+  return groupBy(mapListings, l => {
+    const g = l.attributes.geolocation;
+    return `${g.lat}-${g.lng}`;
+  });
+};
+
+/**
+ * Listings (in location based object literal) is mapped to array
+ * @param {Object} mapListings - listings to be grouped on map
+ * @return {Array} - An array where items are arrays of listings
+ *   (They are arrays containing all the listings in that location)
+ */
+export const reducedToArray = mapListings => {
+  return reduce(mapListings, (acc, listing) => acc.concat([listing]), []);
+};
diff --git a/src/components/SearchMap/SearchMap.js b/src/components/SearchMap/SearchMap.js
index 0c02cac8..3c7a4b6c 100644
--- a/src/components/SearchMap/SearchMap.js
+++ b/src/components/SearchMap/SearchMap.js
@@ -1,80 +1,27 @@
 import React, { Component } from 'react';
-import { arrayOf, bool, func, number, string, shape, object } from 'prop-types';
+import { arrayOf, func, number, string, shape, object } from 'prop-types';
 import { withRouter } from 'react-router-dom';
-import { withGoogleMap, GoogleMap } from 'react-google-maps';
 import classNames from 'classnames';
-import groupBy from 'lodash/groupBy';
-import isEqual from 'lodash/isEqual';
-import reduce from 'lodash/reduce';
 import routeConfiguration from '../../routeConfiguration';
 import { createResourceLocatorString } from '../../util/routes';
 import { createSlug } from '../../util/urlHelpers';
-import { types as sdkTypes } from '../../util/sdkLoader';
 import { propTypes } from '../../util/types';
 import { obfuscatedCoordinates } from '../../util/maps';
-import { googleBoundsToSDKBounds } from '../../util/googleMaps';
-import { SearchMapInfoCard, SearchMapPriceLabel, SearchMapGroupLabel } from '../../components';
 import config from '../../config';
 
+import { hasParentWithClassName } from './SearchMap.helpers.js';
+import SearchMapWithMapbox, {
+  LABEL_HANDLE,
+  INFO_CARD_HANDLE,
+  getMapBounds,
+  getMapCenter,
+  fitMapToBounds,
+  isMapsLibLoaded,
+} from './SearchMapWithMapbox';
 import ReusableMapContainer from './ReusableMapContainer';
 import css from './SearchMap.css';
 
-const LABEL_HANDLE = 'SearchMapLabel';
-const INFO_CARD_HANDLE = 'SearchMapInfoCard';
-
-/**
- * Fit part of map (descriped with bounds) to visible map-viewport
- *
- * @param {Object} map - map that needs to be centered with given bounds
- * @param {SDK.LatLngBounds} bounds - the area that needs to be visible when map loads.
- */
-const fitMapToBounds = (map, bounds, padding) => {
-  const { ne, sw } = bounds || {};
-  // map bounds as string literal for google.maps
-  const mapBounds = bounds ? { north: ne.lat, east: ne.lng, south: sw.lat, west: sw.lng } : null;
-
-  // If bounds are given, use it (defaults to center & zoom).
-  if (map && mapBounds) {
-    if (padding == null) {
-      map.fitBounds(mapBounds);
-    } else {
-      map.fitBounds(mapBounds, padding);
-    }
-  }
-};
-
-/**
- * hasParentWithClassName searches class name from parent elements of given target
- * @param {Node} target - element whose parent might contain given class.
- * @param {String} className - class name string to be found
- */
-const hasParentWithClassName = (target, className) => {
-  return [...document.querySelectorAll(`.${className}`)].some(
-    el => el !== target && el.contains(target)
-  );
-};
-
-/**
- * Listings array grouped by geolocation
- * @param {Array} mapListings - listings to be grouped on map
- * @return {Object} - Object where coordinate pair is the key to different listings
- */
-const groupedByCoordinates = mapListings => {
-  return groupBy(mapListings, l => {
-    const g = l.attributes.geolocation;
-    return `${g.lat}-${g.lng}`;
-  });
-};
-
-/**
- * Listings (in location based object literal) is mapped to array
- * @param {Object} mapListings - listings to be grouped on map
- * @return {Array} - An array where items are arrays of listings
- *   (They are arrays containing all the listings in that location)
- */
-const reducedToArray = mapListings => {
-  return reduce(mapListings, (acc, listing) => acc.concat([listing]), []);
-};
+const REUSABLE_MAP_HIDDEN_HANDLE = 'reusableMapHidden';
 
 const withCoordinatesObfuscated = listings => {
   return listings.map(listing => {
@@ -93,116 +40,24 @@ const withCoordinatesObfuscated = listings => {
   });
 };
 
-/**
- * MapWithGoogleMap uses withGoogleMap HOC.
- * It handles some of the google map initialization states.
- */
-const MapWithGoogleMap = withGoogleMap(props => {
-  const {
-    activeListingId,
-    center,
-    infoCardOpen,
-    listings,
-    onIdle,
-    onListingClicked,
-    onListingInfoCardClicked,
-    createURLToListing,
-    onMapLoad,
-    zoom,
-    mapComponentRefreshToken,
-  } = props;
-
-  const listingArraysInLocations = reducedToArray(groupedByCoordinates(listings));
-  const priceLabels = listingArraysInLocations.reverse().map(listingArr => {
-    const isActive = activeListingId
-      ? !!listingArr.find(l => activeListingId.uuid === l.id.uuid)
-      : false;
-
-    // If location contains only one listing, print price label
-    if (listingArr.length === 1) {
-      const listing = listingArr[0];
-      const infoCardOpenIds = Array.isArray(infoCardOpen) ? infoCardOpen.map(l => l.id.uuid) : [];
-
-      // if the listing is open, don't print price label
-      if (infoCardOpen != null && infoCardOpenIds.includes(listing.id.uuid)) {
-        return null;
-      }
-      return (
-        <SearchMapPriceLabel
-          isActive={isActive}
-          key={listing.id.uuid}
-          className={LABEL_HANDLE}
-          listing={listing}
-          onListingClicked={onListingClicked}
-          mapComponentRefreshToken={mapComponentRefreshToken}
-        />
-      );
-    }
-    return (
-      <SearchMapGroupLabel
-        isActive={isActive}
-        key={listingArr[0].id.uuid}
-        className={LABEL_HANDLE}
-        listings={listingArr}
-        onListingClicked={onListingClicked}
-        mapComponentRefreshToken={mapComponentRefreshToken}
-      />
-    );
-  });
-
-  const listingsArray = Array.isArray(infoCardOpen) ? infoCardOpen : [infoCardOpen];
-  const openedCard = infoCardOpen ? (
-    <SearchMapInfoCard
-      key={listingsArray[0].id.uuid}
-      mapComponentRefreshToken={mapComponentRefreshToken}
-      className={INFO_CARD_HANDLE}
-      listings={listingsArray}
-      onListingInfoCardClicked={onListingInfoCardClicked}
-      createURLToListing={createURLToListing}
-    />
-  ) : null;
-
-  const controlPosition =
-    typeof window !== 'undefined' && typeof window.google !== 'undefined'
-      ? window.google.maps.ControlPosition.LEFT_TOP
-      : 5;
-
-  return (
-    <GoogleMap
-      defaultZoom={zoom}
-      defaultCenter={center}
-      options={{
-        // Disable all controls except zoom
-        mapTypeControl: false,
-        scrollwheel: false,
-        fullscreenControl: false,
-        clickableIcons: false,
-        streetViewControl: false,
-
-        // When infoCard is open, we can't differentiate double click on top of card vs map.
-        disableDoubleClickZoom: !!infoCardOpen,
-
-        zoomControlOptions: {
-          position: controlPosition,
-        },
-      }}
-      ref={onMapLoad}
-      onIdle={onIdle}
-    >
-      {priceLabels}
-      {openedCard}
-    </GoogleMap>
-  );
-});
-
 export class SearchMapComponent extends Component {
   constructor(props) {
     super(props);
 
     this.listings = [];
-    this.googleMap = null;
-    this.mapReattachmentCount = 0;
-    this.state = { infoCardOpen: null };
+    this.mapRef = null;
+
+    let mapReattachmentCount = 0;
+
+    if (typeof window !== 'undefined') {
+      if (window.mapReattachmentCount) {
+        mapReattachmentCount = window.mapReattachmentCount;
+      } else {
+        window.mapReattachmentCount = 0;
+      }
+    }
+
+    this.state = { infoCardOpen: null, mapReattachmentCount };
 
     this.createURLToListing = this.createURLToListing.bind(this);
     this.onListingInfoCardClicked = this.onListingInfoCardClicked.bind(this);
@@ -211,19 +66,6 @@ export class SearchMapComponent extends Component {
     this.onMapLoadHandler = this.onMapLoadHandler.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.googleMap) {
-      const currentBounds = googleBoundsToSDKBounds(this.googleMap.getBounds());
-
-      // Do not call fitMapToBounds if bounds are the same.
-      // Our bounds are viewport bounds, and fitBounds will try to add margins around those bounds
-      // that would result to zoom-loop (bound change -> fitmap -> bounds change -> ...)
-      if (!isEqual(nextProps.bounds, currentBounds) && nextProps.useLocationSearchBounds) {
-        fitMapToBounds(this.googleMap, nextProps.bounds, 0);
-      }
-    }
-  }
-
   componentWillUnmount() {
     this.listings = [];
   }
@@ -262,11 +104,11 @@ export class SearchMapComponent extends Component {
   }
 
   onMapLoadHandler(map) {
-    this.googleMap = map;
+    this.mapRef = map;
 
-    if (this.googleMap) {
+    if (this.mapRef && this.state.mapReattachmentCount === 0) {
       // map is ready, let's fit search area's bounds to map's viewport
-      fitMapToBounds(this.googleMap, this.props.bounds, 0);
+      fitMapToBounds(this.mapRef, this.props.bounds, { padding: 0, isAutocompleteSearch: true });
     }
   }
 
@@ -275,17 +117,16 @@ export class SearchMapComponent extends Component {
       className,
       rootClassName,
       reusableContainerClassName,
+      bounds,
       center,
+      location,
       listings: originalListings,
-      mapRootClassName,
-      onCloseAsModal,
-      onIdle,
+      onMapMoveEnd,
       zoom,
       mapsConfig,
       activeListingId,
     } = this.props;
     const classes = classNames(rootClassName || css.root, className);
-    const mapClasses = mapRootClassName || css.mapRoot;
 
     const listingsWithLocation = originalListings.filter(l => !!l.attributes.geolocation);
     const listings = mapsConfig.fuzzy.enabled
@@ -293,45 +134,64 @@ export class SearchMapComponent extends Component {
       : listingsWithLocation;
     const infoCardOpen = this.state.infoCardOpen;
 
-    const isMapsLibLoaded = typeof window !== 'undefined' && window.google && window.google.maps;
-
     const forceUpdateHandler = () => {
-      this.mapReattachmentCount += 1;
+      // Update global reattachement count
+      window.mapReattachmentCount += 1;
+      // Initiate rerendering
+      this.setState({ mapReattachmentCount: window.mapReattachmentCount });
     };
 
-    // container element listens clicks so that opened SearchMapInfoCard can be closed
-    /* eslint-disable jsx-a11y/no-static-element-interactions */
-    return isMapsLibLoaded ? (
-      <ReusableMapContainer className={reusableContainerClassName} onReattach={forceUpdateHandler}>
-        <MapWithGoogleMap
-          containerElement={<div className={classes} onClick={this.onMapClicked} />}
-          mapElement={<div className={mapClasses} />}
+    // When changing from default map provider to Google Maps, you should use the following
+    // component instead of SearchMapWithMapbox:
+    //
+    // <SearchMapWithGoogleMap
+    //   containerElement={
+    //     <div id="search-map-container" className={classes} onClick={this.onMapClicked} />
+    //   }
+    //   mapElement={<div className={mapRootClassName || css.mapRoot} />}
+    //   bounds={bounds}
+    //   center={center}
+    //   location={location}
+    //   infoCardOpen={infoCardOpen}
+    //   listings={listings}
+    //   activeListingId={activeListingId}
+    //   mapComponentRefreshToken={this.state.mapReattachmentCount}
+    //   createURLToListing={this.createURLToListing}
+    //   onListingClicked={this.onListingClicked}
+    //   onListingInfoCardClicked={this.onListingInfoCardClicked}
+    //   onMapLoad={this.onMapLoadHandler}
+    //   onMapMoveEnd={onMapMoveEnd}
+    //   zoom={zoom}
+    // />
+
+    return isMapsLibLoaded() ? (
+      <ReusableMapContainer
+        className={reusableContainerClassName}
+        reusableMapHiddenHandle={REUSABLE_MAP_HIDDEN_HANDLE}
+        onReattach={forceUpdateHandler}
+      >
+        <SearchMapWithMapbox
+          className={classes}
+          bounds={bounds}
           center={center}
+          location={location}
+          infoCardOpen={infoCardOpen}
           listings={listings}
           activeListingId={activeListingId}
-          infoCardOpen={infoCardOpen}
+          mapComponentRefreshToken={this.state.mapReattachmentCount}
+          createURLToListing={this.createURLToListing}
           onListingClicked={this.onListingClicked}
           onListingInfoCardClicked={this.onListingInfoCardClicked}
-          createURLToListing={this.createURLToListing}
           onMapLoad={this.onMapLoadHandler}
-          onIdle={() => {
-            if (this.googleMap) {
-              onIdle(this.googleMap);
-            }
-          }}
-          onCloseAsModal={() => {
-            if (onCloseAsModal) {
-              onCloseAsModal();
-            }
-          }}
+          onClick={this.onMapClicked}
+          onMapMoveEnd={onMapMoveEnd}
           zoom={zoom}
-          mapComponentRefreshToken={this.mapReattachmentCount}
+          reusableMapHiddenHandle={REUSABLE_MAP_HIDDEN_HANDLE}
         />
       </ReusableMapContainer>
     ) : (
       <div className={classes} />
     );
-    /* eslint-enable jsx-a11y/no-static-element-interactions */
   }
 }
 
@@ -341,11 +201,10 @@ SearchMapComponent.defaultProps = {
   mapRootClassName: null,
   reusableContainerClassName: null,
   bounds: null,
-  center: new sdkTypes.LatLng(0, 0),
+  center: null,
   activeListingId: null,
   listings: [],
   onCloseAsModal: null,
-  useLocationSearchBounds: true,
   zoom: 11,
   mapsConfig: config.maps,
 };
@@ -357,11 +216,13 @@ SearchMapComponent.propTypes = {
   reusableContainerClassName: string,
   bounds: propTypes.latlngBounds,
   center: propTypes.latlng,
+  location: shape({
+    search: string.isRequired,
+  }).isRequired,
   activeListingId: propTypes.uuid,
   listings: arrayOf(propTypes.listing),
   onCloseAsModal: func,
-  onIdle: func.isRequired,
-  useLocationSearchBounds: bool, // eslint-disable-line react/no-unused-prop-types
+  onMapMoveEnd: func.isRequired,
   zoom: number,
   mapsConfig: object,
 
@@ -373,4 +234,7 @@ SearchMapComponent.propTypes = {
 
 const SearchMap = withRouter(SearchMapComponent);
 
+SearchMap.getMapBounds = getMapBounds;
+SearchMap.getMapCenter = getMapCenter;
+
 export default SearchMap;
diff --git a/src/components/SearchMap/SearchMapWithGoogleMap.js b/src/components/SearchMap/SearchMapWithGoogleMap.js
new file mode 100644
index 00000000..ab17456d
--- /dev/null
+++ b/src/components/SearchMap/SearchMapWithGoogleMap.js
@@ -0,0 +1,463 @@
+import React, { Component } from 'react';
+import { arrayOf, func, node, number, oneOfType, shape, string } from 'prop-types';
+import isEqual from 'lodash/isEqual';
+import { withGoogleMap, GoogleMap, OverlayView } from 'react-google-maps';
+import { OVERLAY_VIEW } from 'react-google-maps/lib/constants';
+import { types as sdkTypes } from '../../util/sdkLoader';
+import { parse } from '../../util/urlHelpers';
+import { propTypes } from '../../util/types';
+import { ensureListing } from '../../util/data';
+import { sdkBoundsToFixedCoordinates, hasSameSDKBounds } from '../../util/maps';
+import { SearchMapInfoCard, SearchMapPriceLabel, SearchMapGroupLabel } from '../../components';
+
+import { groupedByCoordinates, reducedToArray } from './SearchMap.helpers.js';
+
+export const LABEL_HANDLE = 'SearchMapLabel';
+export const INFO_CARD_HANDLE = 'SearchMapInfoCard';
+const BOUNDS_FIXED_PRECISION = 8;
+
+const { LatLng: SDKLatLng, LatLngBounds: SDKLatLngBounds } = sdkTypes;
+
+/**
+ * Fit part of map (descriped with bounds) to visible map-viewport
+ *
+ * @param {Object} map - map that needs to be centered with given bounds
+ * @param {SDK.LatLngBounds} bounds - the area that needs to be visible when map loads.
+ */
+export const fitMapToBounds = (map, bounds, options) => {
+  const { padding } = options;
+
+  const { ne, sw } = bounds || {};
+  // map bounds as string literal for google.maps
+  const mapBounds = bounds ? { north: ne.lat, east: ne.lng, south: sw.lat, west: sw.lng } : null;
+
+  // If bounds are given, use it (defaults to center & zoom).
+  if (map && mapBounds) {
+    if (padding == null) {
+      map.fitBounds(mapBounds);
+    } else {
+      map.fitBounds(mapBounds, padding);
+    }
+  }
+};
+
+/**
+ * Convert Google formatted LatLng object to Sharetribe SDK's LatLng coordinate format
+ *
+ * @param {LatLng} googleLatLng - Google Maps LatLng
+ *
+ * @return {SDKLatLng} - Converted latLng coordinate
+ */
+export const googleLatLngToSDKLatLng = googleLatLng => {
+  if (!googleLatLng) {
+    return null;
+  }
+  return new SDKLatLng(googleLatLng.lat(), googleLatLng.lng());
+};
+
+/**
+ * Convert Google formatted bounds object to Sharetribe SDK's bounds format
+ *
+ * @param {LatLngBounds} googleBounds - Google Maps LatLngBounds
+ *
+ * @return {SDKLatLngBounds} - Converted bounds
+ */
+export const googleBoundsToSDKBounds = googleBounds => {
+  if (!googleBounds) {
+    return null;
+  }
+  const ne = googleBounds.getNorthEast();
+  const sw = googleBounds.getSouthWest();
+  return new SDKLatLngBounds(new SDKLatLng(ne.lat(), ne.lng()), new SDKLatLng(sw.lat(), sw.lng()));
+};
+
+export const getMapBounds = map => googleBoundsToSDKBounds(map.getBounds());
+export const getMapCenter = map => googleLatLngToSDKLatLng(map.getCenter());
+
+/**
+ * Check if map library is loaded
+ */
+export const isMapsLibLoaded = () =>
+  typeof window !== 'undefined' && window.google && window.google.maps;
+
+/**
+ * FIX "TypeError: Cannot read property 'overlayMouseTarget' of null"
+ * Override draw function to catch errors with map panes being undefined to prevent console errors
+ * https://github.com/tomchentw/react-google-maps/issues/482
+ */
+class CustomOverlayView extends OverlayView {
+  draw() {
+    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
+    const mapPanes = this.state[OVERLAY_VIEW].getPanes();
+    // Add conditional to ensure panes and container exist before drawing
+    if (mapPanes && this.containerElement) {
+      super.draw();
+    }
+  }
+}
+
+/**
+ * Center label so that caret is pointing to correct pixel.
+ * (vertical positioning: height + arrow)
+ */
+const getPixelPositionOffset = (width, height) => {
+  return { x: -1 * (width / 2), y: -1 * (height + 3) };
+};
+
+/**
+ * GoogleMaps need to use Google specific OverlayView components and therefore we need to
+ * reduce flickering / rerendering of these overlays through 'shouldComponentUpdate'
+ */
+class SearchMapPriceLabelWithOverlay extends Component {
+  shouldComponentUpdate(nextProps) {
+    const currentListing = ensureListing(this.props.listing);
+    const nextListing = ensureListing(nextProps.listing);
+    const isSameListing = currentListing.id.uuid === nextListing.id.uuid;
+    const hasSamePrice = currentListing.attributes.price === nextListing.attributes.price;
+    const hasSameActiveStatus = this.props.isActive === nextProps.isActive;
+    const hasSameRefreshToken =
+      this.props.mapComponentRefreshToken === nextProps.mapComponentRefreshToken;
+
+    return !(isSameListing && hasSamePrice && hasSameActiveStatus && hasSameRefreshToken);
+  }
+
+  render() {
+    const {
+      position,
+      mapPaneName,
+      isActive,
+      className,
+      listing,
+      onListingClicked,
+      mapComponentRefreshToken,
+    } = this.props;
+
+    return (
+      <CustomOverlayView
+        position={position}
+        mapPaneName={mapPaneName}
+        getPixelPositionOffset={getPixelPositionOffset}
+      >
+        <SearchMapPriceLabel
+          isActive={isActive}
+          className={className}
+          listing={listing}
+          onListingClicked={onListingClicked}
+          mapComponentRefreshToken={mapComponentRefreshToken}
+        />
+      </CustomOverlayView>
+    );
+  }
+}
+
+/**
+ * GoogleMaps need to use Google specific OverlayView components and therefore we need to
+ * reduce flickering / rerendering of these overlays through 'shouldComponentUpdate'
+ */
+class SearchMapGroupLabelWithOverlay extends Component {
+  shouldComponentUpdate(nextProps) {
+    const hasSameAmountOfListings = nextProps.listings.length === this.props.listings.length;
+    const hasSameActiveStatus = this.props.isActive === nextProps.isActive;
+    const hasSameRefreshToken =
+      this.props.mapComponentRefreshToken === nextProps.mapComponentRefreshToken;
+
+    return !(hasSameAmountOfListings && hasSameActiveStatus && hasSameRefreshToken);
+  }
+
+  render() {
+    const {
+      position,
+      mapPaneName,
+      isActive,
+      className,
+      listings,
+      onListingClicked,
+      mapComponentRefreshToken,
+    } = this.props;
+    return (
+      <CustomOverlayView
+        position={position}
+        mapPaneName={mapPaneName}
+        getPixelPositionOffset={getPixelPositionOffset}
+      >
+        <SearchMapGroupLabel
+          isActive={isActive}
+          className={className}
+          listings={listings}
+          onListingClicked={onListingClicked}
+          mapComponentRefreshToken={mapComponentRefreshToken}
+        />
+      </CustomOverlayView>
+    );
+  }
+}
+
+const priceLabelsInLocations = (
+  listings,
+  activeListingId,
+  infoCardOpen,
+  onListingClicked,
+  mapComponentRefreshToken
+) => {
+  const listingArraysInLocations = reducedToArray(groupedByCoordinates(listings));
+  const priceLabels = listingArraysInLocations.reverse().map(listingArr => {
+    const isActive = activeListingId
+      ? !!listingArr.find(l => activeListingId.uuid === l.id.uuid)
+      : false;
+
+    // If location contains only one listing, print price label
+    if (listingArr.length === 1) {
+      const listing = listingArr[0];
+      const infoCardOpenIds = Array.isArray(infoCardOpen) ? infoCardOpen.map(l => l.id.uuid) : [];
+
+      // if the listing is open, don't print price label
+      if (infoCardOpen != null && infoCardOpenIds.includes(listing.id.uuid)) {
+        return null;
+      }
+
+      // Explicit type change to object literal for Google OverlayViews (geolocation is SDK type)
+      const { geolocation } = listing.attributes;
+      const latLngLiteral = { lat: geolocation.lat, lng: geolocation.lng };
+
+      return (
+        <SearchMapPriceLabelWithOverlay
+          key={listing.id.uuid}
+          position={latLngLiteral}
+          mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
+          isActive={isActive}
+          className={LABEL_HANDLE}
+          listing={listing}
+          onListingClicked={onListingClicked}
+          mapComponentRefreshToken={mapComponentRefreshToken}
+        />
+      );
+    }
+
+    // Explicit type change to object literal for Google OverlayViews (geolocation is SDK type)
+    const firstListing = ensureListing(listingArr[0]);
+    const geolocation = firstListing.attributes.geolocation;
+    const latLngLiteral = { lat: geolocation.lat, lng: geolocation.lng };
+
+    return (
+      <SearchMapGroupLabelWithOverlay
+        key={listingArr[0].id.uuid}
+        position={latLngLiteral}
+        mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
+        isActive={isActive}
+        className={LABEL_HANDLE}
+        listings={listingArr}
+        onListingClicked={onListingClicked}
+        mapComponentRefreshToken={mapComponentRefreshToken}
+      />
+    );
+  });
+  return priceLabels;
+};
+
+const infoCardComponent = (
+  infoCardOpen,
+  onListingInfoCardClicked,
+  createURLToListing,
+  mapComponentRefreshToken
+) => {
+  const listingsArray = Array.isArray(infoCardOpen) ? infoCardOpen : [infoCardOpen];
+
+  if (!infoCardOpen) {
+    return null;
+  }
+  // Explicit type change to object literal for Google OverlayViews (geolocation is SDK type)
+  const firstListing = ensureListing(listingsArray[0]);
+  const geolocation = firstListing.attributes.geolocation;
+  const latLngLiteral = { lat: geolocation.lat, lng: geolocation.lng };
+
+  return (
+    <CustomOverlayView
+      key={listingsArray[0].id.uuid}
+      position={latLngLiteral}
+      mapPaneName={OverlayView.FLOAT_PANE}
+      getPixelPositionOffset={getPixelPositionOffset}
+      styles={{ zIndex: 1 }}
+    >
+      <SearchMapInfoCard
+        mapComponentRefreshToken={mapComponentRefreshToken}
+        className={INFO_CARD_HANDLE}
+        listings={listingsArray}
+        onListingInfoCardClicked={onListingInfoCardClicked}
+        createURLToListing={createURLToListing}
+      />
+    </CustomOverlayView>
+  );
+};
+
+/**
+ * MapWithGoogleMap uses withGoogleMap HOC.
+ * It handles some of the google map initialization states.
+ */
+const MapWithGoogleMap = withGoogleMap(props => {
+  const {
+    center,
+    infoCardOpen,
+    listings,
+    activeListingId,
+    createURLToListing,
+    onListingClicked,
+    onListingInfoCardClicked,
+    onIdle,
+    onMapLoad,
+    zoom,
+    mapComponentRefreshToken,
+  } = props;
+
+  const controlPosition =
+    typeof window !== 'undefined' && typeof window.google !== 'undefined'
+      ? window.google.maps.ControlPosition.LEFT_TOP
+      : 5;
+
+  const priceLabels = priceLabelsInLocations(
+    listings,
+    activeListingId,
+    infoCardOpen,
+    onListingClicked,
+    mapComponentRefreshToken
+  );
+  const infoCard = infoCardComponent(
+    infoCardOpen,
+    onListingInfoCardClicked,
+    createURLToListing,
+    mapComponentRefreshToken
+  );
+
+  return (
+    <GoogleMap
+      defaultZoom={zoom}
+      defaultCenter={center}
+      options={{
+        // Disable all controls except zoom
+        mapTypeControl: false,
+        scrollwheel: false,
+        fullscreenControl: false,
+        clickableIcons: false,
+        streetViewControl: false,
+
+        // When infoCard is open, we can't differentiate double click on top of card vs map.
+        disableDoubleClickZoom: !!infoCardOpen,
+
+        zoomControlOptions: {
+          position: controlPosition,
+        },
+      }}
+      ref={onMapLoad}
+      onIdle={onIdle}
+    >
+      {priceLabels}
+      {infoCard}
+    </GoogleMap>
+  );
+});
+
+class SearchMapWithGoogleMap extends Component {
+  constructor(props) {
+    super(props);
+    this.map = null;
+    this.viewportBounds = null;
+
+    this.onMapLoad = this.onMapLoad.bind(this);
+    this.onIdle = this.onIdle.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!isEqual(this.props.location, nextProps.location)) {
+      // If no mapSearch url parameter is given, this is original location search
+      const { mapSearch } = parse(nextProps.location.search, {
+        latlng: ['origin'],
+        latlngBounds: ['bounds'],
+      });
+      if (!mapSearch) {
+        this.viewportBounds = null;
+      }
+    }
+
+    if (this.map) {
+      const currentBounds = getMapBounds(this.map);
+
+      // Do not call fitMapToBounds if bounds are the same.
+      // Our bounds are viewport bounds, and fitBounds will try to add margins around those bounds
+      // that would result to zoom-loop (bound change -> fitmap -> bounds change -> ...)
+      if (!isEqual(nextProps.bounds, currentBounds) && !this.viewportBounds) {
+        fitMapToBounds(this.map, nextProps.bounds, { padding: 0 });
+      }
+    }
+  }
+
+  onMapLoad(map) {
+    this.map = map;
+    this.props.onMapLoad(map);
+  }
+
+  onIdle(e) {
+    if (this.map) {
+      // Let's try to find the map container element
+      const mapContainer = this.props.containerElement.props.id
+        ? document.getElementById(this.props.containerElement.props.id)
+        : null;
+
+      // If reusableMapHiddenHandle is given and parent element has that class,
+      // we don't listen moveend events.
+      // This fixes mobile Chrome bug that sends map events to invisible map components.
+      const isHiddenByReusableMap =
+        this.props.reusableMapHiddenHandle &&
+        mapContainer &&
+        mapContainer.parentElement.classList.contains(this.props.reusableMapHiddenHandle);
+
+      if (!isHiddenByReusableMap) {
+        const viewportMapBounds = getMapBounds(this.map);
+        const viewportMapCenter = getMapCenter(this.map);
+        const viewportBounds = viewportMapBounds
+          ? sdkBoundsToFixedCoordinates(viewportMapBounds, BOUNDS_FIXED_PRECISION)
+          : null;
+
+        // ViewportBounds from (previous) rendering differ from viewportBounds currently set to map
+        // I.e. user has changed the map somehow: moved, panned, zoomed, resized
+        const viewportBoundsChanged =
+          this.viewportBounds &&
+          viewportBounds &&
+          !hasSameSDKBounds(this.viewportBounds, viewportBounds);
+
+        this.props.onMapMoveEnd(viewportBoundsChanged, { viewportBounds, viewportMapCenter });
+        this.viewportBounds = viewportBounds;
+      }
+    }
+  }
+
+  render() {
+    const { onMapLoad, onMapMoveEnd, ...rest } = this.props;
+    return <MapWithGoogleMap onMapLoad={this.onMapLoad} onIdle={this.onIdle} {...rest} />;
+  }
+}
+
+SearchMapWithGoogleMap.defaultProps = {
+  center: new sdkTypes.LatLng(0, 0),
+  infoCardOpen: null,
+  listings: [],
+  activeListingId: null,
+  zoom: 11,
+  reusableMapHiddenHandle: null,
+};
+
+SearchMapWithGoogleMap.propTypes = {
+  containerElement: node.isRequired,
+  center: propTypes.latlng,
+  location: shape({
+    search: string.isRequired,
+  }).isRequired,
+  infoCardOpen: oneOfType([propTypes.listing, arrayOf(propTypes.listing)]),
+  listings: arrayOf(propTypes.listing),
+  activeListingId: propTypes.uuid,
+
+  onMapMoveEnd: func.isRequired,
+  onMapLoad: func.isRequired,
+  zoom: number,
+  reusableMapHiddenHandle: string,
+};
+
+export default SearchMapWithGoogleMap;
diff --git a/src/components/SearchMap/SearchMapWithMapbox.css b/src/components/SearchMap/SearchMapWithMapbox.css
new file mode 100644
index 00000000..38edc8e0
--- /dev/null
+++ b/src/components/SearchMap/SearchMapWithMapbox.css
@@ -0,0 +1,25 @@
+.fullArea {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.activeLabel {
+  z-index: 1;
+}
+
+.labelContainer {
+  &:hover {
+    z-index: 1;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.infoCardContainer {
+  z-index: 1;
+}
diff --git a/src/components/SearchMap/SearchMapWithMapbox.js b/src/components/SearchMap/SearchMapWithMapbox.js
new file mode 100644
index 00000000..ba32f672
--- /dev/null
+++ b/src/components/SearchMap/SearchMapWithMapbox.js
@@ -0,0 +1,518 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { arrayOf, func, node, number, shape, string } from 'prop-types';
+import differenceBy from 'lodash/differenceBy';
+import isEqual from 'lodash/isEqual';
+import classNames from 'classnames';
+import { types as sdkTypes } from '../../util/sdkLoader';
+import { parse } from '../../util/urlHelpers';
+import { propTypes } from '../../util/types';
+import { ensureListing } from '../../util/data';
+import { sdkBoundsToFixedCoordinates, hasSameSDKBounds } from '../../util/maps';
+import { SearchMapInfoCard, SearchMapPriceLabel, SearchMapGroupLabel } from '../../components';
+
+import { groupedByCoordinates, reducedToArray } from './SearchMap.helpers.js';
+import css from './SearchMapWithMapbox.css';
+
+export const LABEL_HANDLE = 'SearchMapLabel';
+export const INFO_CARD_HANDLE = 'SearchMapInfoCard';
+export const SOURCE_AUTOCOMPLETE = 'autocomplete';
+const BOUNDS_FIXED_PRECISION = 8;
+
+const { LatLng: SDKLatLng, LatLngBounds: SDKLatLngBounds } = sdkTypes;
+
+/**
+ * Fit part of map (descriped with bounds) to visible map-viewport
+ *
+ * @param {Object} map - map that needs to be centered with given bounds
+ * @param {SDK.LatLngBounds} bounds - the area that needs to be visible when map loads.
+ */
+export const fitMapToBounds = (map, bounds, options) => {
+  const { padding = 0, isAutocompleteSearch = false } = options;
+
+  // map bounds as string literal for google.maps
+  const mapBounds = sdkBoundsToMapboxBounds(bounds);
+  const paddingOptionMaybe = padding == null ? { padding } : {};
+  const eventData = isAutocompleteSearch ? { searchSource: SOURCE_AUTOCOMPLETE } : {};
+
+  // If bounds are given, use it (defaults to center & zoom).
+  if (map && mapBounds) {
+    map.fitBounds(mapBounds, { ...paddingOptionMaybe, linear: true, duration: 0 }, eventData);
+  }
+};
+
+/**
+ * Convert Mapbox formatted LatLng object to Sharetribe SDK's LatLng coordinate format
+ * Longitudes > 180 and < -180 are converted to the correct corresponding value
+ * between -180 and 180.
+ *
+ * @param {LngLat} mapboxLngLat - Mapbox LngLat
+ *
+ * @return {SDKLatLng} - Converted latLng coordinate
+ */
+export const mapboxLngLatToSDKLatLng = lngLat => {
+  const mapboxLng = lngLat.lng;
+
+  // For bounding boxes that overlap the antimeridian Mapbox sometimes gives
+  // longitude values outside -180 and 180 degrees.Those values are converted
+  // so that longitude is always between -180 and 180.
+  const lng = mapboxLng > 180 ? mapboxLng - 360 : mapboxLng < -180 ? mapboxLng + 360 : mapboxLng;
+
+  return new SDKLatLng(lngLat.lat, lng);
+};
+
+/**
+ * Convert Mapbox formatted bounds object to Sharetribe SDK's bounds format
+ *
+ * @param {LngLatBounds} mapboxBounds - Mapbox LngLatBounds
+ *
+ * @return {SDKLatLngBounds} - Converted bounds
+ */
+export const mapboxBoundsToSDKBounds = mapboxBounds => {
+  if (!mapboxBounds) {
+    return null;
+  }
+
+  const ne = mapboxBounds.getNorthEast();
+  const sw = mapboxBounds.getSouthWest();
+  return new SDKLatLngBounds(mapboxLngLatToSDKLatLng(ne), mapboxLngLatToSDKLatLng(sw));
+};
+
+/**
+ * Convert sdk bounds that overlap the antimeridian into values that can
+ * be passed to Mapbox. This is achieved by converting the SW longitude into
+ * a value less than -180 that flows over the antimeridian.
+ *
+ * @param {SDKLatLng} bounds - bounds passed to the map
+ *
+ * @return {LngLatBoundsLike} a bounding box that is compatible with Mapbox
+ */
+const sdkBoundsToMapboxBounds = bounds => {
+  if (!bounds) {
+    return null;
+  }
+  const { ne, sw } = bounds;
+
+  // if sw lng is > ne lng => the bounds overlap antimeridian
+  // => flip the nw lng to the negative side so that the value
+  // is less than -180
+  const swLng = sw.lng > ne.lng ? -360 + sw.lng : sw.lng;
+
+  return [[swLng, sw.lat], [ne.lng, ne.lat]];
+};
+
+/**
+ * Return map bounds as SDKBounds
+ *
+ * @param {Mapbox} map - Mapbox map from where the bounds are asked
+ *
+ * @return {SDKLatLngBounds} - Converted bounds of given map
+ */
+export const getMapBounds = map => mapboxBoundsToSDKBounds(map.getBounds());
+
+/**
+ * Return map center as SDKLatLng
+ *
+ * @param {Mapbox} map - Mapbox map from where the center is asked
+ *
+ * @return {SDKLatLng} - Converted center of given map
+ */
+export const getMapCenter = map => mapboxLngLatToSDKLatLng(map.getCenter());
+
+/**
+ * Check if map library is loaded
+ */
+export const isMapsLibLoaded = () =>
+  typeof window !== 'undefined' && window.mapboxgl && window.mapboxgl.accessToken;
+
+/**
+ * Return price labels grouped by listing locations.
+ * This is a helper function for SearchMapWithMapbox component.
+ */
+const priceLabelsInLocations = (
+  listings,
+  activeListingId,
+  infoCardOpen,
+  onListingClicked,
+  mapComponentRefreshToken
+) => {
+  const listingArraysInLocations = reducedToArray(groupedByCoordinates(listings));
+  const priceLabels = listingArraysInLocations.reverse().map(listingArr => {
+    const isActive = activeListingId
+      ? !!listingArr.find(l => activeListingId.uuid === l.id.uuid)
+      : false;
+
+    // If location contains only one listing, print price label
+    if (listingArr.length === 1) {
+      const listing = listingArr[0];
+      const infoCardOpenIds = Array.isArray(infoCardOpen)
+        ? infoCardOpen.map(l => l.id.uuid)
+        : infoCardOpen
+          ? [infoCardOpen.id.uuid]
+          : [];
+
+      // if the listing is open, don't print price label
+      if (infoCardOpen != null && infoCardOpenIds.includes(listing.id.uuid)) {
+        return null;
+      }
+
+      // Explicit type change to object literal for Google OverlayViews (geolocation is SDK type)
+      const { geolocation } = listing.attributes;
+
+      const key = listing.id.uuid;
+      return {
+        markerId: `price_${key}`,
+        location: geolocation,
+        type: 'price',
+        componentProps: {
+          key,
+          isActive,
+          className: LABEL_HANDLE,
+          listing,
+          onListingClicked,
+          mapComponentRefreshToken,
+        },
+      };
+    }
+
+    // Explicit type change to object literal for Google OverlayViews (geolocation is SDK type)
+    const firstListing = ensureListing(listingArr[0]);
+    const geolocation = firstListing.attributes.geolocation;
+
+    const key = listingArr[0].id.uuid;
+    return {
+      markerId: `group_${key}`,
+      location: geolocation,
+      type: 'group',
+      componentProps: {
+        key,
+        isActive,
+        className: LABEL_HANDLE,
+        listings: listingArr,
+        onListingClicked,
+        mapComponentRefreshToken,
+      },
+    };
+  });
+  return priceLabels;
+};
+
+/**
+ * Return info card. This is a helper function for SearchMapWithMapbox component.
+ */
+const infoCardComponent = (
+  infoCardOpen,
+  onListingInfoCardClicked,
+  createURLToListing,
+  mapComponentRefreshToken
+) => {
+  const listingsArray = Array.isArray(infoCardOpen) ? infoCardOpen : [infoCardOpen];
+
+  if (!infoCardOpen) {
+    return null;
+  }
+
+  const firstListing = ensureListing(listingsArray[0]);
+  const key = firstListing.id.uuid;
+  const geolocation = firstListing.attributes.geolocation;
+
+  return {
+    markerId: `infoCard_${key}`,
+    location: geolocation,
+    componentProps: {
+      key,
+      mapComponentRefreshToken,
+      className: INFO_CARD_HANDLE,
+      listings: listingsArray,
+      onListingInfoCardClicked,
+      createURLToListing,
+    },
+  };
+};
+
+/**
+ * SearchMap component using Mapbox as map provider
+ */
+class SearchMapWithMapbox extends Component {
+  constructor(props) {
+    super(props);
+    this.map = typeof window !== 'undefined' && window.mapboxMap ? window.mapboxMap : null;
+    this.currentMarkers = [];
+    this.currentInfoCard = null;
+    this.state = { mapContainer: null, isMapReady: false };
+    this.viewportBounds = null;
+
+    this.onMount = this.onMount.bind(this);
+    this.onMoveend = this.onMoveend.bind(this);
+    this.initializeMap = this.initializeMap.bind(this);
+    this.handleDoubleClickOnInfoCard = this.handleDoubleClickOnInfoCard.bind(this);
+    this.handleMobilePinchZoom = this.handleMobilePinchZoom.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!isEqual(this.props.location, nextProps.location)) {
+      // If no mapSearch url parameter is given, this is original location search
+      const { mapSearch } = parse(nextProps.location.search, {
+        latlng: ['origin'],
+        latlngBounds: ['bounds'],
+      });
+      if (!mapSearch) {
+        this.viewportBounds = null;
+      }
+    }
+
+    if (this.map) {
+      const currentBounds = getMapBounds(this.map);
+
+      // Do not call fitMapToBounds if bounds are the same.
+      // Our bounds are viewport bounds, and fitBounds will try to add margins around those bounds
+      // that would result to zoom-loop (bound change -> fitmap -> bounds change -> ...)
+      if (!isEqual(nextProps.bounds, currentBounds) && !this.viewportBounds) {
+        fitMapToBounds(this.map, nextProps.bounds, { padding: 0, isAutocompleteSearch: true });
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.map && this.state.mapContainer) {
+      this.initializeMap();
+
+      /* Notify parent component that Mapbox map is loaded */
+      this.props.onMapLoad(this.map);
+    } else if (prevProps.mapComponentRefreshToken !== this.props.mapComponentRefreshToken) {
+      /* Notify parent component that Mapbox map is loaded */
+      this.props.onMapLoad(this.map);
+    }
+  }
+
+  componentWillUnmount() {
+    this.currentInfoCard.markerContainer.removeEventListener(
+      'dblclick',
+      this.handleDoubleClickOnInfoCard
+    );
+    document.removeEventListener('gesturestart', this.handleMobilePinchZoom, false);
+    document.removeEventListener('gesturechange', this.handleMobilePinchZoom, false);
+    document.removeEventListener('gestureend', this.handleMobilePinchZoom, false);
+  }
+
+  onMount(element) {
+    // This prevents pinch zoom to affect whole page on mobile Safari.
+    document.addEventListener('gesturestart', this.handleMobilePinchZoom, false);
+    document.addEventListener('gesturechange', this.handleMobilePinchZoom, false);
+    document.addEventListener('gestureend', this.handleMobilePinchZoom, false);
+
+    this.setState({ mapContainer: element });
+  }
+
+  onMoveend(e) {
+    if (this.map) {
+      // If reusableMapHiddenHandle is given and parent element has that class,
+      // we don't listen moveend events.
+      // This fixes mobile Chrome bug that sends map events to invisible map components.
+      const isHiddenByReusableMap =
+        this.props.reusableMapHiddenHandle &&
+        this.state.mapContainer.parentElement.classList.contains(
+          this.props.reusableMapHiddenHandle
+        );
+      if (!isHiddenByReusableMap) {
+        const viewportMapBounds = getMapBounds(this.map);
+        const viewportMapCenter = getMapCenter(this.map);
+        const viewportBounds = sdkBoundsToFixedCoordinates(
+          viewportMapBounds,
+          BOUNDS_FIXED_PRECISION
+        );
+
+        // ViewportBounds from (previous) rendering differ from viewportBounds currently set to map
+        // I.e. user has changed the map somehow: moved, panned, zoomed, resized
+        const viewportBoundsChanged =
+          this.viewportBounds && !hasSameSDKBounds(this.viewportBounds, viewportBounds);
+
+        this.props.onMapMoveEnd(viewportBoundsChanged, { viewportBounds, viewportMapCenter });
+        this.viewportBounds = viewportBounds;
+      }
+    }
+  }
+
+  initializeMap() {
+    const { offsetHeight, offsetWidth } = this.state.mapContainer;
+    const hasDimensions = offsetHeight > 0 && offsetWidth > 0;
+    if (hasDimensions) {
+      this.map = new window.mapboxgl.Map({
+        container: this.state.mapContainer,
+        style: 'mapbox://styles/mapbox/streets-v10',
+        scrollZoom: false,
+      });
+      window.mapboxMap = this.map;
+
+      var nav = new window.mapboxgl.NavigationControl({ showCompass: false });
+      this.map.addControl(nav, 'top-left');
+
+      this.map.on('moveend', this.onMoveend);
+
+      // Introduce rerendering after map is ready (to include labels),
+      // but keep the map out of state life cycle.
+      this.setState({ isMapReady: true });
+    }
+  }
+
+  handleMobilePinchZoom(e) {
+    e.preventDefault();
+    // A hack to prevent pinch zoom gesture in mobile Safari
+    // Otherwise, pinch zoom would zoom both map and the document.
+    document.body.style.zoom = 0.99;
+  }
+
+  handleDoubleClickOnInfoCard(e) {
+    e.stopPropagation();
+  }
+
+  render() {
+    const {
+      className,
+      listings,
+      activeListingId,
+      infoCardOpen,
+      onListingClicked,
+      onListingInfoCardClicked,
+      createURLToListing,
+      mapComponentRefreshToken,
+    } = this.props;
+
+    if (this.map) {
+      // Create markers out of price labels and grouped labels
+      const labels = priceLabelsInLocations(
+        listings,
+        activeListingId,
+        infoCardOpen,
+        onListingClicked,
+        mapComponentRefreshToken
+      );
+
+      // If map has moved or info card opened, unnecessary markers need to be removed
+      const removableMarkers = differenceBy(this.currentMarkers, labels, 'markerId');
+      removableMarkers.forEach(rm => rm.marker.remove());
+
+      // Helper function to create markers to given container
+      const createMarker = (data, markerContainer) =>
+        new window.mapboxgl.Marker(markerContainer, { anchor: 'bottom' })
+          .setLngLat([data.location.lng, data.location.lat])
+          .addTo(this.map);
+
+      // SearchMapPriceLabel and SearchMapGroupLabel:
+      // create a new marker or use existing one if markerId is among previously rendered markers
+      this.currentMarkers = labels.filter(v => v != null).map(m => {
+        const existingMarkerId = this.currentMarkers.findIndex(
+          marker => m.markerId === marker.markerId && marker.marker
+        );
+
+        if (existingMarkerId >= 0) {
+          const { marker, markerContainer, ...rest } = this.currentMarkers[existingMarkerId];
+          return { ...rest, ...m, markerContainer, marker };
+        } else {
+          const markerContainer = document.createElement('div');
+          markerContainer.setAttribute('id', m.markerId);
+          markerContainer.classList.add(css.labelContainer);
+          const marker = createMarker(m, markerContainer);
+          return { ...m, markerContainer, marker };
+        }
+      });
+
+      /* Create marker for SearchMapInfoCard component */
+      if (infoCardOpen) {
+        const infoCard = infoCardComponent(
+          infoCardOpen,
+          onListingInfoCardClicked,
+          createURLToListing,
+          mapComponentRefreshToken
+        );
+
+        // marker container and its styles
+        const infoCardContainer = document.createElement('div');
+        infoCardContainer.setAttribute('id', infoCard.markerId);
+        infoCardContainer.classList.add(css.infoCardContainer);
+        infoCardContainer.addEventListener('dblclick', this.handleDoubleClickOnInfoCard, false);
+
+        this.currentInfoCard = {
+          ...infoCard,
+          markerContainer: infoCardContainer,
+          marker: infoCard ? createMarker(infoCard, infoCardContainer) : null,
+        };
+      } else {
+        if (this.currentInfoCard) {
+          this.currentInfoCard.markerContainer.removeEventListener(
+            'dblclick',
+            this.handleDoubleClickOnInfoCard
+          );
+        }
+        this.currentInfoCard = null;
+      }
+    }
+
+    return (
+      <div
+        id="map"
+        ref={this.onMount}
+        className={classNames(className, css.fullArea)}
+        onClick={this.props.onClick}
+      >
+        {this.currentMarkers.map(m => {
+          // Remove existing activeLabel classes and add it only to the correct container
+          m.markerContainer.classList.remove(css.activeLabel);
+          if (activeListingId && activeListingId.uuid === m.componentProps.key) {
+            m.markerContainer.classList.add(css.activeLabel);
+          }
+
+          const isMapReadyForMarkers = this.map && m.markerContainer;
+          // DOM node that should be used as portal's root
+          const portalDOMContainer = isMapReadyForMarkers
+            ? document.getElementById(m.markerContainer.id)
+            : null;
+
+          // Create component portals for correct marker containers
+          if (isMapReadyForMarkers && m.type === 'price') {
+            return ReactDOM.createPortal(
+              <SearchMapPriceLabel {...m.componentProps} />,
+              portalDOMContainer
+            );
+          } else if (isMapReadyForMarkers && m.type === 'group') {
+            return ReactDOM.createPortal(
+              <SearchMapGroupLabel {...m.componentProps} />,
+              portalDOMContainer
+            );
+          }
+          return null;
+        })}
+        {this.state.mapContainer && this.currentInfoCard
+          ? ReactDOM.createPortal(
+              <SearchMapInfoCard {...this.currentInfoCard.componentProps} />,
+              this.currentInfoCard.markerContainer
+            )
+          : null}
+      </div>
+    );
+  }
+}
+
+SearchMapWithMapbox.defaultProps = {
+  center: null,
+  priceLabels: [],
+  infoCard: null,
+  zoom: 11,
+  reusableMapHiddenHandle: null,
+};
+
+SearchMapWithMapbox.propTypes = {
+  center: propTypes.latlng,
+  location: shape({
+    search: string.isRequired,
+  }).isRequired,
+  priceLabels: arrayOf(node),
+  infoCard: node,
+  onClick: func.isRequired,
+  onMapMoveEnd: func.isRequired,
+  onMapLoad: func.isRequired,
+  zoom: number,
+  reusableMapHiddenHandle: string,
+};
+
+export default SearchMapWithMapbox;
diff --git a/src/components/SearchMapGroupLabel/SearchMapGroupLabel.js b/src/components/SearchMapGroupLabel/SearchMapGroupLabel.js
index 1700471b..b2c20965 100644
--- a/src/components/SearchMapGroupLabel/SearchMapGroupLabel.js
+++ b/src/components/SearchMapGroupLabel/SearchMapGroupLabel.js
@@ -1,64 +1,32 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { OverlayView } from 'react-google-maps';
-import { OVERLAY_VIEW } from 'react-google-maps/lib/constants';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
-import { ensureListing } from '../../util/data';
 
 import css from './SearchMapGroupLabel.css';
 
-// FIX "TypeError: Cannot read property 'overlayMouseTarget' of null"
-// Override draw function to catch errors with map panes being undefined to prevent console errors
-// https://github.com/tomchentw/react-google-maps/issues/482
-class CustomOverlayView extends OverlayView {
-  draw() {
-    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
-    const mapPanes = this.state[OVERLAY_VIEW].getPanes();
-    // Add conditional to ensure panes and container exist before drawing
-    if (mapPanes && this.containerElement) {
-      super.draw();
-    }
-  }
-}
-
-// Center label so that caret is pointing to correct pixel.
-// (vertical positioning: height + arrow) */
-const getPixelPositionOffset = (width, height) => {
-  return { x: -1 * (width / 2), y: -1 * (height + 3) };
-};
-
 class SearchMapGroupLabel extends Component {
   shouldComponentUpdate(nextProps) {
     const hasSameAmountOfListings = nextProps.listings.length === this.props.listings.length;
     const hasSameActiveStatus = this.props.isActive === nextProps.isActive;
+    const hasSameRefreshToken =
+      this.props.mapComponentRefreshToken === nextProps.mapComponentRefreshToken;
 
-    return !(hasSameAmountOfListings && hasSameActiveStatus);
+    return !(hasSameAmountOfListings && hasSameActiveStatus && hasSameRefreshToken);
   }
 
   render() {
     const { className, rootClassName, listings, onListingClicked, isActive } = this.props;
-    const firstListing = ensureListing(listings[0]);
-    const geolocation = firstListing.attributes.geolocation;
-
-    // Explicit type change to object literal for Google OverlayViews (geolocation is SDK type)
-    const latLngLiteral = { lat: geolocation.lat, lng: geolocation.lng };
     const classes = classNames(rootClassName || css.root, className);
     const countLabelClasses = classNames(css.details, { [css.detailsActive]: isActive });
     const caretClasses = classNames(css.caret, { [css.caretActive]: isActive });
 
     return (
-      <CustomOverlayView
-        position={latLngLiteral}
-        mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
-        getPixelPositionOffset={getPixelPositionOffset}
-      >
-        <button className={classes} onClick={() => onListingClicked(listings)}>
-          <div className={css.caretShadow} />
-          <div className={countLabelClasses}>{listings.length}</div>
-          <div className={caretClasses} />
-        </button>
-      </CustomOverlayView>
+      <button className={classes} onClick={() => onListingClicked(listings)}>
+        <div className={css.caretShadow} />
+        <div className={countLabelClasses}>{listings.length}</div>
+        <div className={caretClasses} />
+      </button>
     );
   }
 }
diff --git a/src/components/SearchMapInfoCard/SearchMapInfoCard.js b/src/components/SearchMapInfoCard/SearchMapInfoCard.js
index 1ae2a945..1761d8ac 100644
--- a/src/components/SearchMapInfoCard/SearchMapInfoCard.js
+++ b/src/components/SearchMapInfoCard/SearchMapInfoCard.js
@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 import { arrayOf, bool, func, string } from 'prop-types';
-import { OverlayView } from 'react-google-maps';
-import { OVERLAY_VIEW } from 'react-google-maps/lib/constants';
 import { compose } from 'redux';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
@@ -13,26 +11,6 @@ import { ResponsiveImage } from '../../components';
 
 import css from './SearchMapInfoCard.css';
 
-// FIX "TypeError: Cannot read property 'overlayMouseTarget' of null"
-// Override draw function to catch errors with map panes being undefined to prevent console errors
-// https://github.com/tomchentw/react-google-maps/issues/482
-class CustomOverlayView extends OverlayView {
-  draw() {
-    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
-    const mapPanes = this.state[OVERLAY_VIEW].getPanes();
-    // Add conditional to ensure panes and container exist before drawing
-    if (mapPanes && this.containerElement) {
-      super.draw();
-    }
-  }
-}
-
-// Center label so that caret is pointing to correct pixel.
-// (vertical positioning: height + arrow) */
-const getPixelPositionOffset = (width, height) => {
-  return { x: -1 * (width / 2), y: -1 * (height + 3) };
-};
-
 // ListingCard is the listing info without overlayview or carousel controls
 const ListingCard = props => {
   const { className, clickHandler, intl, isInCarousel, listing, urlToListing } = props;
@@ -116,10 +94,6 @@ class SearchMapInfoCard extends Component {
       onListingInfoCardClicked,
     } = this.props;
     const currentListing = ensureListing(listings[this.state.currentListingIndex]);
-    const geolocation = currentListing.attributes.geolocation;
-
-    // Explicit type change to object literal for Google OverlayViews (geolocation is SDK type)
-    const latLngLiteral = { lat: geolocation.lat, lng: geolocation.lng };
     const hasCarousel = listings.length > 1;
     const pagination = hasCarousel ? (
       <div className={classNames(css.paginationInfo, css.borderRadiusInheritBottom)}>
@@ -155,25 +129,18 @@ class SearchMapInfoCard extends Component {
     const caretClass = classNames(css.caret, { [css.caretWithCarousel]: hasCarousel });
 
     return (
-      <CustomOverlayView
-        position={latLngLiteral}
-        mapPaneName={OverlayView.FLOAT_PANE}
-        getPixelPositionOffset={getPixelPositionOffset}
-        styles={{ zIndex: 1 }}
-      >
-        <div className={classes}>
-          <div className={css.caretShadow} />
-          <ListingCard
-            clickHandler={onListingInfoCardClicked}
-            urlToListing={createURLToListing(currentListing)}
-            listing={currentListing}
-            intl={intl}
-            isInCarousel={hasCarousel}
-          />
-          {pagination}
-          <div className={caretClass} />
-        </div>
-      </CustomOverlayView>
+      <div className={classes}>
+        <div className={css.caretShadow} />
+        <ListingCard
+          clickHandler={onListingInfoCardClicked}
+          urlToListing={createURLToListing(currentListing)}
+          listing={currentListing}
+          intl={intl}
+          isInCarousel={hasCarousel}
+        />
+        {pagination}
+        <div className={caretClass} />
+      </div>
     );
   }
 }
diff --git a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js
index df2214c8..3e19f37d 100644
--- a/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js
+++ b/src/components/SearchMapPriceLabel/SearchMapPriceLabel.js
@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { OverlayView } from 'react-google-maps';
-import { OVERLAY_VIEW } from 'react-google-maps/lib/constants';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
@@ -11,26 +9,6 @@ import config from '../../config';
 
 import css from './SearchMapPriceLabel.css';
 
-// FIX "TypeError: Cannot read property 'overlayMouseTarget' of null"
-// Override draw function to catch errors with map panes being undefined to prevent console errors
-// https://github.com/tomchentw/react-google-maps/issues/482
-class CustomOverlayView extends OverlayView {
-  draw() {
-    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
-    const mapPanes = this.state[OVERLAY_VIEW].getPanes();
-    // Add conditional to ensure panes and container exist before drawing
-    if (mapPanes && this.containerElement) {
-      super.draw();
-    }
-  }
-}
-
-// Center label so that caret is pointing to correct pixel.
-// (vertical positioning: height + arrow) */
-const getPixelPositionOffset = (width, height) => {
-  return { x: -1 * (width / 2), y: -1 * (height + 3) };
-};
-
 class SearchMapPriceLabel extends Component {
   shouldComponentUpdate(nextProps) {
     const currentListing = ensureListing(this.props.listing);
@@ -38,37 +16,31 @@ class SearchMapPriceLabel extends Component {
     const isSameListing = currentListing.id.uuid === nextListing.id.uuid;
     const hasSamePrice = currentListing.attributes.price === nextListing.attributes.price;
     const hasSameActiveStatus = this.props.isActive === nextProps.isActive;
+    const hasSameRefreshToken =
+      this.props.mapComponentRefreshToken === nextProps.mapComponentRefreshToken;
 
-    return !(isSameListing && hasSamePrice && hasSameActiveStatus);
+    return !(isSameListing && hasSamePrice && hasSameActiveStatus && hasSameRefreshToken);
   }
 
   render() {
     const { className, rootClassName, intl, listing, onListingClicked, isActive } = this.props;
     const currentListing = ensureListing(listing);
-    const { geolocation, price } = currentListing.attributes;
+    const { price } = currentListing.attributes;
 
     // Create formatted price if currency is known or alternatively show just the unknown currency.
     const formattedPrice =
       price && price.currency === config.currency ? formatMoney(intl, price) : price.currency;
 
-    // Explicit type change to object literal for Google OverlayViews (geolocation is SDK type)
-    const latLngLiteral = { lat: geolocation.lat, lng: geolocation.lng };
     const classes = classNames(rootClassName || css.root, className);
     const priceLabelClasses = classNames(css.priceLabel, { [css.priceLabelActive]: isActive });
     const caretClasses = classNames(css.caret, { [css.caretActive]: isActive });
 
     return (
-      <CustomOverlayView
-        position={latLngLiteral}
-        mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
-        getPixelPositionOffset={getPixelPositionOffset}
-      >
-        <button className={classes} onClick={() => onListingClicked(currentListing)}>
-          <div className={css.caretShadow} />
-          <div className={priceLabelClasses}>{formattedPrice}</div>
-          <div className={caretClasses} />
-        </button>
-      </CustomOverlayView>
+      <button className={classes} onClick={() => onListingClicked(currentListing)}>
+        <div className={css.caretShadow} />
+        <div className={priceLabelClasses}>{formattedPrice}</div>
+        <div className={caretClasses} />
+      </button>
     );
   }
 }
diff --git a/src/containers/SearchPage/SearchPage.js b/src/containers/SearchPage/SearchPage.js
index 969015c4..e90604f5 100644
--- a/src/containers/SearchPage/SearchPage.js
+++ b/src/containers/SearchPage/SearchPage.js
@@ -5,17 +5,10 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
 import debounce from 'lodash/debounce';
-import isEqual from 'lodash/isEqual';
 import unionWith from 'lodash/unionWith';
 import classNames from 'classnames';
 import config from '../../config';
 import routeConfiguration from '../../routeConfiguration';
-import {
-  googleLatLngToSDKLatLng,
-  googleBoundsToSDKBounds,
-  sdkBoundsToFixedCoordinates,
-  hasSameSDKBounds,
-} from '../../util/googleMaps';
 import { createResourceLocatorString, pathByRouteName } from '../../util/routes';
 import { parse, stringify } from '../../util/urlHelpers';
 import { propTypes } from '../../util/types';
@@ -40,7 +33,6 @@ import css from './SearchPage.css';
 const RESULT_PAGE_SIZE = 24;
 const MODAL_BREAKPOINT = 768; // Search is in modal on mobile layout
 const SEARCH_WITH_MAP_DEBOUNCE = 300; // Little bit of debounce before search is initiated.
-const BOUNDS_FIXED_PRECISION = 8;
 
 export class SearchPageComponent extends Component {
   constructor(props) {
@@ -51,17 +43,10 @@ export class SearchPageComponent extends Component {
       isMobileModalOpen: false,
     };
 
-    // Initiating map creates 'bounds_changes' event
-    // we listen to that event to make new searches
-    // So, if the search comes from location search input (this.viewportBounds == null),
-    // we need to by pass extra searches created by Google Map's 'indle' event.
-    // This is done by keeping track of map's viewport bounds (which differ from location bounds)
-    this.viewportBounds = null;
-    this.modalOpenedBoundsChange = false;
     this.searchMapListingsInProgress = false;
 
     this.filters = this.filters.bind(this);
-    this.onIdle = debounce(this.onIdle.bind(this), SEARCH_WITH_MAP_DEBOUNCE);
+    this.onMapMoveEnd = debounce(this.onMapMoveEnd.bind(this), SEARCH_WITH_MAP_DEBOUNCE);
     this.onOpenMobileModal = this.onOpenMobileModal.bind(this);
     this.onCloseMobileModal = this.onCloseMobileModal.bind(this);
   }
@@ -81,56 +66,35 @@ export class SearchPageComponent extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (!isEqual(this.props.location, nextProps.location)) {
-      // If no mapSearch url parameter is given, this is original location search
-      const { mapSearch } = parse(nextProps.location.search, {
-        latlng: ['origin'],
-        latlngBounds: ['bounds'],
-      });
-      if (!mapSearch) {
-        this.viewportBounds = null;
-      }
-    }
-  }
-
-  // We are using Google Maps idle event instead of bounds_changed, since it will not be fired
-  // too often (in the middle of map's pan or zoom activity)
-  onIdle(googleMap) {
-    const { history, location } = this.props;
-
-    // parse query parameters, including a custom attribute named category
-    const { address, bounds, mapSearch, ...rest } = parse(location.search, {
-      latlng: ['origin'],
-      latlngBounds: ['bounds'],
-    });
-
-    const viewportGMapBounds = googleMap.getBounds();
-    const viewportBounds = sdkBoundsToFixedCoordinates(
-      googleBoundsToSDKBounds(viewportGMapBounds),
-      BOUNDS_FIXED_PRECISION
-    );
-
-    // ViewportBounds from (previous) rendering differ from viewportBounds currently set to map
-    // I.e. user has changed the map somehow: moved, panned, zoomed, resized
-    const viewportBoundsChanged =
-      this.viewportBounds && !hasSameSDKBounds(this.viewportBounds, viewportBounds);
+  // Callback to determine if new search is needed
+  // when map is moved by user or viewport has changed
+  onMapMoveEnd(viewportBoundsChanged, data) {
+    const { viewportBounds, viewportCenter } = data;
 
     const routes = routeConfiguration();
     const searchPagePath = pathByRouteName('SearchPage', routes);
     const currentPath =
       typeof window !== 'undefined' && window.location && window.location.pathname;
 
-    // When using the ReusableMapContainer onIdle can fire from other pages than SearchPage too
+    // When using the ReusableMapContainer onMapMoveEnd can fire from other pages than SearchPage too
     const isSearchPage = currentPath === searchPagePath;
 
-    // If mapSearch url param is given (and we have not just opened mobile map modal)
+    // If mapSearch url param is given
     // or original location search is rendered once,
-    // we start to react to 'bounds_changed' event by generating new searches
-    if (viewportBoundsChanged && !this.modalOpenedBoundsChange && isSearchPage) {
-      const originMaybe = config.sortSearchByDistance
-        ? { origin: googleLatLngToSDKLatLng(viewportGMapBounds.getCenter()) }
-        : {};
+    // we start to react to "mapmoveend" events by generating new searches
+    // (i.e. 'moveend' event in Mapbox and 'bounds_changed' in Google Maps)
+    if (viewportBoundsChanged && isSearchPage) {
+      const { history, location } = this.props;
+
+      // parse query parameters, including a custom attribute named category
+      const { address, bounds, mapSearch, ...rest } = parse(location.search, {
+        latlng: ['origin'],
+        latlngBounds: ['bounds'],
+      });
+
+      //const viewportMapCenter = SearchMap.getMapCenter(map);
+      const originMaybe = config.sortSearchByDistance ? { origin: viewportCenter } : {};
+
       const searchParams = {
         address,
         ...originMaybe,
@@ -139,11 +103,7 @@ export class SearchPageComponent extends Component {
         ...validFilterParams(rest, this.filters()),
       };
 
-      this.viewportBounds = viewportBounds;
       history.push(createResourceLocatorString('SearchPage', routes, {}, searchParams));
-    } else {
-      this.viewportBounds = viewportBounds;
-      this.modalOpenedBoundsChange = false;
     }
   }
 
@@ -200,7 +160,6 @@ export class SearchPageComponent extends Component {
 
     const onMapIconClick = () => {
       this.useLocationSearchBounds = true;
-      this.modalOpenedBoundsChange = true;
       this.setState({ isSearchMapOpenOnMobile: true });
     };
 
@@ -263,12 +222,13 @@ export class SearchPageComponent extends Component {
                   activeListingId={activeListingId}
                   bounds={bounds}
                   center={origin}
+                  isSearchMapOpenOnMobile={this.state.isSearchMapOpenOnMobile}
+                  location={location}
                   listings={mapListings || []}
-                  onIdle={this.onIdle}
+                  onMapMoveEnd={this.onMapMoveEnd}
                   onCloseAsModal={() => {
                     onManageDisableScrolling('SearchPage.map', false);
                   }}
-                  useLocationSearchBounds={!this.viewportBounds}
                 />
               ) : null}
             </div>
diff --git a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap b/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap
index 91be51fe..453b2260 100644
--- a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap
+++ b/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap
@@ -88,10 +88,15 @@ exports[`SearchPageComponent matches snapshot 1`] = `
       <div>
         <withRouter(SearchMapComponent)
           activeListingId={null}
+          isSearchMapOpenOnMobile={false}
           listings={Array []}
+          location={
+            Object {
+              "search": "",
+            }
+          }
           onCloseAsModal={[Function]}
-          onIdle={[Function]}
-          useLocationSearchBounds={true}
+          onMapMoveEnd={[Function]}
         />
       </div>
     </withViewport(ModalInMobileComponent)>
diff --git a/src/forms/EditListingLocationForm/EditListingLocationForm.test.js b/src/forms/EditListingLocationForm/EditListingLocationForm.test.js
index 16be521b..a97b5e0b 100644
--- a/src/forms/EditListingLocationForm/EditListingLocationForm.test.js
+++ b/src/forms/EditListingLocationForm/EditListingLocationForm.test.js
@@ -1,4 +1,4 @@
-// NOTE: renderdeep doesn't work due to Google Maps API integration
+// NOTE: renderdeep doesn't work due to map integration
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
 import { fakeIntl } from '../../util/test-data';
diff --git a/src/forms/EditListingPoliciesForm/EditListingPoliciesForm.test.js b/src/forms/EditListingPoliciesForm/EditListingPoliciesForm.test.js
index 5f1ea422..61e55922 100644
--- a/src/forms/EditListingPoliciesForm/EditListingPoliciesForm.test.js
+++ b/src/forms/EditListingPoliciesForm/EditListingPoliciesForm.test.js
@@ -1,4 +1,4 @@
-// NOTE: renderdeep doesn't work due to Google Maps API integration
+// NOTE: renderdeep doesn't work due to map integration
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
 import { fakeIntl } from '../../util/test-data';
diff --git a/src/marketplace.css b/src/marketplace.css
index 6bb6f2e7..7c803687 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -118,7 +118,8 @@
 
   /* ================ LocationAutocompleteInput bottom attribution padding ================ */
 
-  --locationAutocompleteBottomPadding: 72px;
+  /* Google Maps needs 72px bottom padding to accommodate logo, Mapbox doesn't have one */
+  --locationAutocompleteBottomPadding: 8px;
 
   /* ================ Clearfix solution ================ */
 
diff --git a/src/util/googleMaps.js b/src/util/googleMaps.js
index 3153b197..f71898cb 100644
--- a/src/util/googleMaps.js
+++ b/src/util/googleMaps.js
@@ -90,33 +90,7 @@ export const getPlacePredictions = (search, sessionToken) =>
   });
 
 /**
- * Convert Google formatted LatLng object to Sharetribe SDK's LatLng coordinate format
- *
- * @param {LatLng} googleLatLng - Google Maps LatLng
- *
- * @return {SDKLatLng} - Converted latLng coordinate
- */
-export const googleLatLngToSDKLatLng = googleLatLng => {
-  return new SDKLatLng(googleLatLng.lat(), googleLatLng.lng());
-};
-
-/**
- * Convert Google formatted bounds object to Sharetribe SDK's bounds format
- *
- * @param {LatLngBounds} googleBounds - Google Maps LatLngBounds
- *
- * @return {SDKLatLngBounds} - Converted bounds
- */
-export const googleBoundsToSDKBounds = googleBounds => {
-  if (!googleBounds) {
-    return null;
-  }
-  const ne = googleBounds.getNorthEast();
-  const sw = googleBounds.getSouthWest();
-  return new SDKLatLngBounds(new SDKLatLng(ne.lat(), ne.lng()), new SDKLatLng(sw.lat(), sw.lng()));
-};
-
-/**
+ * Deprecation: use function from src/util/maps.js
  * Cut some precision from bounds coordinates to tackle subtle map movements
  * when map is moved manually
  *
@@ -134,6 +108,7 @@ export const sdkBoundsToFixedCoordinates = (sdkBounds, fixedPrecision) => {
 };
 
 /**
+ * Deprecation: use function from src/util/maps.js
  * Check if given bounds object have the same coordinates
  *
  * @param {LatLngBounds} sdkBounds1 - bounds #1 to be compared
diff --git a/src/util/maps.js b/src/util/maps.js
index 9367c44d..ac142880 100644
--- a/src/util/maps.js
+++ b/src/util/maps.js
@@ -3,7 +3,7 @@ import seedrandom from 'seedrandom';
 import { types as sdkTypes } from './sdkLoader';
 import config from '../config';
 
-const { LatLng } = sdkTypes;
+const { LatLng, LatLngBounds } = sdkTypes;
 
 const EARTH_RADIUS = 6371000; /* meters  */
 const DEG_TO_RAD = Math.PI / 180.0;
@@ -155,3 +155,40 @@ export const circlePolyline = (latlng, radius) => {
 
   return points;
 };
+
+/**
+ * Cut some precision from bounds coordinates to tackle subtle map movements
+ * when map is moved manually
+ *
+ * @param {LatLngBounds} sdkBounds - bounds to be changed to fixed precision
+ * @param {Number} fixedPrecision - integer to be used on tofixed() change.
+ *
+ * @return {LatLngBounds} - bounds cut to given fixed precision
+ */
+export const sdkBoundsToFixedCoordinates = (sdkBounds, fixedPrecision) => {
+  const fixed = n => Number.parseFloat(n.toFixed(fixedPrecision));
+  const ne = new LatLng(fixed(sdkBounds.ne.lat), fixed(sdkBounds.ne.lng));
+  const sw = new LatLng(fixed(sdkBounds.sw.lat), fixed(sdkBounds.sw.lng));
+
+  return new LatLngBounds(ne, sw);
+};
+
+/**
+ * Check if given bounds object have the same coordinates
+ *
+ * @param {LatLngBounds} sdkBounds1 - bounds #1 to be compared
+ * @param {LatLngBounds} sdkBounds2 - bounds #2 to be compared
+ *
+ * @return {boolean} - true if bounds are the same
+ */
+export const hasSameSDKBounds = (sdkBounds1, sdkBounds2) => {
+  if (!(sdkBounds1 instanceof LatLngBounds) || !(sdkBounds2 instanceof LatLngBounds)) {
+    return false;
+  }
+  return (
+    sdkBounds1.ne.lat === sdkBounds2.ne.lat &&
+    sdkBounds1.ne.lng === sdkBounds2.ne.lng &&
+    sdkBounds1.sw.lat === sdkBounds2.sw.lat &&
+    sdkBounds1.sw.lng === sdkBounds2.sw.lng
+  );
+};
diff --git a/yarn.lock b/yarn.lock
index f7895008..eb21c536 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5032,6 +5032,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+mapbox-gl-multitouch@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/mapbox-gl-multitouch/-/mapbox-gl-multitouch-1.0.3.tgz#db8bbe86a15d8398e3315d97305c9edde3f0f0d7"
+
 marker-clusterer-plus@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz#f8eff74d599dab3b7d0e3fed5264ea0e704f5d67"