From cd2b89906bea2e1fd92a8280038eb006cd499767 Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Wed, 8 Aug 2018 14:12:51 +0300 Subject: [PATCH 01/46] Init mapbox with the access token in env --- .env-template | 1 + public/index.html | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/.env-template b/.env-template index a541b75f..f59ad71f 100644 --- a/.env-template +++ b/.env-template @@ -3,6 +3,7 @@ # REACT_APP_SHARETRIBE_SDK_CLIENT_ID= REACT_APP_GOOGLE_MAPS_API_KEY= +REACT_APP_MAPBOX_ACCESS_TOKEN= REACT_APP_STRIPE_PUBLISHABLE_KEY= # Defaults diff --git a/public/index.html b/public/index.html index b2a9739e..617f568f 100644 --- a/public/index.html +++ b/public/index.html @@ -144,6 +144,12 @@ + + + + + - + +``` + +### 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 +// Using Google Maps as map provider should use following component +// instead of SearchMapWithMapbox: +// +// +// } +// mapElement={
} +// 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..99794387 --- /dev/null +++ b/docs/map-providers.md @@ -0,0 +1,67 @@ +# Integrating to map providers + +> After Google made significant pricing changes to their Google Map APIs, we pushed hard to reduce +> the number of calls to the Google Maps API. After careful consideration, we also decided that +> there needs to be an alternative map provider available for users of Flex Template for Web. We +> ended up to choose Mapbox since they have been a major innovator in the field. + +## 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 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`. + +### 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 to other map providers + +### How to change from Mapbox to Google Map + +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 + +Our default map setup uses library called `mapbox-gl-js`. It is supported by quite many other map +providers too. So, as a first step, check if the map provider you are considering is supporting it - +if so, the change might be quite easy. However, if you change the map tile provider you should also +change geocoding API too (i.e. the API endpoint for `LocationAutocompleteInput` component). From 3ecbb4f3b41e5908620a6be2ae01af800b016cdf Mon Sep 17 00:00:00 2001 From: Juho Makkonen Date: Fri, 14 Sep 2018 14:19:25 +0300 Subject: [PATCH 41/46] Line edits to documentation --- docs/map-providers.md | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/docs/map-providers.md b/docs/map-providers.md index 99794387..4ee6e23c 100644 --- a/docs/map-providers.md +++ b/docs/map-providers.md @@ -1,9 +1,6 @@ # Integrating to map providers -> After Google made significant pricing changes to their Google Map APIs, we pushed hard to reduce -> the number of calls to the Google Maps API. After careful consideration, we also decided that -> there needs to be an alternative map provider available for users of Flex Template for Web. We -> ended up to choose Mapbox since they have been a major innovator in the field. +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) @@ -37,7 +34,7 @@ To use default searches, another environment variable needs to be set: REACT_APP_DEFAULT_SEARCHES_ENABLED=true ``` -The default locations have been described in file: +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 @@ -52,16 +49,14 @@ SearchMap component can't adjust zoom level right for that particular place. The default bounding boxes defined to different place types in [Mapbox specific geocoder](../src/components/LocationAutocompleteInput/GeocoderMapbox.js). -## Changing to other map providers +## Changing the map providers -### How to change from Mapbox to Google Map +### 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 -Our default map setup uses library called `mapbox-gl-js`. It is supported by quite many other map -providers too. So, as a first step, check if the map provider you are considering is supporting it - -if so, the change might be quite easy. However, if you change the map tile provider you should also -change geocoding API too (i.e. the API endpoint for `LocationAutocompleteInput` component). +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). From 5606d8c457ac45ea1a2f058cbe05592cc242da47 Mon Sep 17 00:00:00 2001 From: Juho Makkonen Date: Fri, 14 Sep 2018 14:25:15 +0300 Subject: [PATCH 42/46] Line edits to documentation --- docs/google-maps.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/google-maps.md b/docs/google-maps.md index e4be55c2..91dce410 100644 --- a/docs/google-maps.md +++ b/docs/google-maps.md @@ -1,12 +1,12 @@ # Google Maps -The Flex template for web can use the Google Maps API for showing a map and in searching locations -in the search autocompletion. This document describes how to set up the API key for the API requests +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 Map, you should consider if you are OK with their current +> 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/) +> [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 @@ -53,6 +53,8 @@ whether to use the current location from [config.js](../src/config.js). Search f ## 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 From c124bcd732559750e54da8f1a97159ae1d1642e7 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Fri, 14 Sep 2018 15:21:28 +0300 Subject: [PATCH 43/46] Run Prettier for docs --- docs/google-maps.md | 17 ++++++++++------- docs/map-providers.md | 14 +++++++++++--- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/docs/google-maps.md b/docs/google-maps.md index 91dce410..d853e503 100644 --- a/docs/google-maps.md +++ b/docs/google-maps.md @@ -1,12 +1,14 @@ # Google Maps -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. +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). +> 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 @@ -53,7 +55,8 @@ whether to use the current location from [config.js](../src/config.js). Search f ## 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. +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 diff --git a/docs/map-providers.md b/docs/map-providers.md index 4ee6e23c..8906db06 100644 --- a/docs/map-providers.md +++ b/docs/map-providers.md @@ -1,6 +1,11 @@ # 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). +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) @@ -58,5 +63,8 @@ It is possible to use Google Map instead of the default map provider. Read more ### 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). +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). From 2bf0500fdf49daca51e9abc3838b8337ea963a4a Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Fri, 14 Sep 2018 16:02:37 +0300 Subject: [PATCH 44/46] Remove unnecessary Google Maps refs from docs and code comments --- .env-template | 6 ++++-- docs/README.md | 2 +- docs/env.md | 3 ++- docs/folder-structure.md | 4 ++-- docs/google-maps.md | 4 ++-- src/components/SearchMap/SearchMap.js | 4 ++-- .../EditListingLocationForm/EditListingLocationForm.test.js | 2 +- .../EditListingPoliciesForm/EditListingPoliciesForm.test.js | 2 +- 8 files changed, 15 insertions(+), 12 deletions(-) diff --git a/.env-template b/.env-template index f59ad71f..8733b0e1 100644 --- a/.env-template +++ b/.env-template @@ -2,9 +2,11 @@ # Mandatory configuration # REACT_APP_SHARETRIBE_SDK_CLIENT_ID= -REACT_APP_GOOGLE_MAPS_API_KEY= -REACT_APP_MAPBOX_ACCESS_TOKEN= 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/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/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 d853e503..8d42ed91 100644 --- a/docs/google-maps.md +++ b/docs/google-maps.md @@ -152,8 +152,8 @@ Then, in `render` method, you need to put `SearchMapWithGoogleMap` component int props is already there in the comments: ```js -// Using Google Maps as map provider should use following component -// instead of SearchMapWithMapbox: +// When changing from default map provider to Google Maps, you should use the following +// component instead of SearchMapWithMapbox: // // Date: Fri, 14 Sep 2018 16:03:39 +0300 Subject: [PATCH 45/46] Update changelog --- CHANGELOG.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 32bd7092..48778a11 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,26 @@ way to update this template, but currently, we follow a pattern: --- +## v2.0.0 2018-09-XX + +* [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. From ed879baece1917734f806fe190a223730a597124 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Wed, 19 Sep 2018 17:46:10 +0300 Subject: [PATCH 46/46] Update version and release date --- CHANGELOG.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48778a11..6546e9a1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,7 @@ way to update this template, but currently, we follow a pattern: --- -## v2.0.0 2018-09-XX +## 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) diff --git a/package.json b/package.json index e6ddeec6..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": {