{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/ftw/how-to-set-up-mapbox-for-ftw/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"How to set up Mapbox for FTW","slug":"how-to-set-up-mapbox-for-ftw","updated":"2019-07-04T00:00:00.000Z","category":"ftw-search","ingress":"By default, Flex Template for Web (FTW) uses Mapbox for showing interactive maps. This guide will help you in creating a Mapbox account and setting up an account token in the FTW environment configuration.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"1-generate-a-mapbox-access-token","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#1-generate-a-mapbox-access-token","ariaLabel":"1 generate a mapbox access token permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"1. Generate a Mapbox access token"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://account.mapbox.com/auth/signup/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Sign up to Mapbox"}]},{"type":"text","value":" and go to\nthe "},{"type":"element","tagName":"a","properties":{"href":"https://account.mapbox.com/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"account page"}]},{"type":"text","value":". Then copy the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Default public token"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you wish to create a new one, click "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"+ Create a token"}]},{"type":"text","value":", give it a\nname and make sure all Public scopes are selected. Create the token and\ncopy its value."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can make access tokens in your web applications more secure by\nadding URL restrictions. When you add a URL restriction to a token, that\ntoken will only work for requests that originate from the URLs you\nspecify. See the Mapbox documentation for\n"},{"type":"element","tagName":"a","properties":{"href":"https://docs.mapbox.com/accounts/overview/tokens/#url-restrictions","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"URL restrictions"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"2-setup-the-application-to-use-the-access-token","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#2-setup-the-application-to-use-the-access-token","ariaLabel":"2 setup the application to use the access token permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"2. Setup the application to use the access token"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The application uses the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_MAPBOX_ACCESS_TOKEN"}]},{"type":"text","value":" environment\nvariable for the token value. For local development, you can add the\nvariable in the Gitignored "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":".env"}]},{"type":"text","value":" file in the project root:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","assign-left","variable"]},"children":[{"type":"text","value":"REACT_APP_MAPBOX_ACCESS_TOKEN"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":"my-access-token-here"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"3-setup-common-locations-to-reduce-typing","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#3-setup-common-locations-to-reduce-typing","ariaLabel":"3 setup common locations to reduce typing permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"3. Setup common locations to reduce typing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The location autocomplete input in the landing page and the topbar can\nbe configured to have specific locations shown by default when the user\nfocuses on the input and hasn't yet typed in any searches. This reduces\nthe typing required for common searches and also reduces the need to use\nMapbox geolocation API that much."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is enabled by default but it can be changed via the environment\nvariable:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","assign-left","variable"]},"children":[{"type":"text","value":"REACT_APP_DEFAULT_SEARCHES_ENABLED"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":"true"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default locations are described in\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/default-location-searches.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"src/default-location-searches.js"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The same environment variable also shows \"current location\" suggestion,\nwhich will make the browser to ask user's current location. This is a\nfast way to search listings nearby. You can specify whether to use the\ncurrent location from\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/config.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"src/config.js"}]},{"type":"text","value":".\nSearch for variables: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suggestCurrentLocation"}]},{"type":"text","value":" and\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"currentLocationBoundsDistance"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"optional-check-rare-default-configurations","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#optional-check-rare-default-configurations","ariaLabel":"optional check rare default configurations permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Optional: check rare default configurations"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Mapbox geocoding API doesn't always return bounding boxes for locations.\nWithout bounding box SearchMap component can't adjust zoom level right\nfor that particular place. Therefore there are default bounding boxes\ndefined to different place types in the Mapbox specific geocoder:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/components/LocationAutocompleteInput/GeocoderMapbox.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"src/components/LocationAutocompleteInput/GeocoderMapbox.js"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"optional-restrict-location-autocomplete-to-specific-country-or-countries","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#optional-restrict-location-autocomplete-to-specific-country-or-countries","ariaLabel":"optional restrict location autocomplete to specific country or countries permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Optional: Restrict location autocomplete to specific country or countries"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If your marketplace works only in a specific country or countries it\nmight be a good idea to limit the location autocomplete to those\ncountries. You can specify whether to use the limitation from\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/config.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"src/config.js"}]},{"type":"text","value":".\nSearch for variable "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"countryLimit"}]},{"type":"text","value":" and uncomment the line to make it\nactive. Provide the country or countries in an array using\n"},{"type":"element","tagName":"a","properties":{"href":"https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"ISO 3166 alpha 2"}]},{"type":"text","value":"\nformat (eg. GB, US, FI). If there are multiple values, separate them\nwith commas."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"changing-the-map-providers","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#changing-the-map-providers","ariaLabel":"changing the map providers permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Changing the map providers"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to use Google Map instead of the default map provider.\nRead more in the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/ftw/how-to-use-google-maps-in-ftw/"},"children":[{"type":"text","value":"How to use Google Maps in FTW"}]},{"type":"text","value":"\nguide."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"how-to-use-other-map-providers","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#how-to-use-other-map-providers","ariaLabel":"how to use other map providers permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"How to use other map providers"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default map setup of FTW uses library called\n"},{"type":"element","tagName":"a","properties":{"href":"https://docs.mapbox.com/mapbox-gl-js/api/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"mapbox-gl-js"}]},{"type":"text","value":". It supports\nquite many other map providers too. Thus, if you wish to use a map\nprovider other than Google Maps or Mapbox, first check if the map\nprovider you are considering is supporting this library. If they are,\nthe change might be quite easy. Note: if you change the map tile\nprovider you should also change geocoding API too (i.e. the API endpoint\nfor "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"LocationAutocompleteInput"}]},{"type":"text","value":" component)."}]}],"data":{"quirksMode":false}},"headings":[{"value":"1. Generate a Mapbox access token","depth":2},{"value":"2. Setup the application to use the access token","depth":2},{"value":"3. Setup common locations to reduce typing","depth":2},{"value":"Optional: check rare default configurations","depth":2},{"value":"Optional: Restrict location autocomplete to specific country or countries","depth":2},{"value":"Changing the map providers","depth":2},{"value":"How to use other map providers","depth":3}]}},"pageContext":{"slug":"how-to-set-up-mapbox-for-ftw","category":"ftw-search"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}