diff --git a/src/markdown/tutorial/part-1/07-reusable-components.md b/src/markdown/tutorial/part-1/07-reusable-components.md index e21970d..5702778 100644 --- a/src/markdown/tutorial/part-1/07-reusable-components.md +++ b/src/markdown/tutorial/part-1/07-reusable-components.md @@ -16,28 +16,22 @@ While adding the map, you will learn about: ## Managing Application-level Configurations -We will use the [Mapbox](https://www.mapbox.com) API to generate maps for our rental properties. You can [sign up](https://www.mapbox.com/signup/) for free and without a credit card. +We will use the [TomTom](https://developer.tomtom.com/map-display-api/documentation/product-information/introduction) API to generate maps for our rental properties. You can [sign up](https://developer.tomtom.com) for free and without a credit card. -Mapbox provides a [static map images API](https://docs.mapbox.com/api/maps/#static-images), which serves map images in PNG format. This means that we can generate the appropriate URL for the parameters we want and render the map using a standard `` tag. Pretty neat! +TomTom provides a [static map images API](https://developer.tomtom.com/map-display-api/documentation/raster/static-image), which serves map images in PNG format. This means that we can generate the appropriate URL for the parameters we want and render the map using a standard `` tag. Pretty neat! -If you're curious, you can explore the options available on Mapbox by using the [interactive playground](https://docs.mapbox.com/help/interactive-tools/static-api-playground/). - -Once you have signed up for the service, grab your *[default public token](https://account.mapbox.com/access-tokens/)* and paste it into `config/environment.js`: +Once you have signed up, grab your *[default public token](https://developer.tomtom.com/user/me/apps)* and paste it into `config/environment.js`: ```run:file:patch lang=js cwd=super-rentals filename=config/environment.js @@ -50,2 +50,4 @@ -+ ENV.MAPBOX_ACCESS_TOKEN = 'paste your Mapbox access token here'; ++ ENV.TOMTOM_ACCESS_TOKEN = 'paste your TomTom API key here'; + return ENV; ``` As its name implies, `config/environment.js` is used to *configure* our app and store API keys like these. These values can be accessed from other parts of our app, and they can have different values depending on the current environment (which might be development, test, or production). -> Zoey says... -> -> If you prefer, you can [create different Mapbox access tokens](https://account.mapbox.com/access-tokens/) for use in different environments. At a minimum, the tokens will each need to have the "styles:tiles" scope in order to use Mapbox's static images API. - ```run:command hidden=true cwd=super-rentals pnpm ember test git add config/environment.js @@ -46,8 +40,8 @@ git add config/environment.js ```run:file:patch hidden=true cwd=super-rentals filename=config/environment.js @@ -50,3 +50,3 @@ -- ENV.MAPBOX_ACCESS_TOKEN = 'paste your Mapbox access token here'; -+ ENV.MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN; +- ENV.TOMTOM_ACCESS_TOKEN = 'paste your TomTom API key here'; ++ ENV.TOMTOM_ACCESS_TOKEN = process.env.TOMTOM_ACCESS_TOKEN; ``` @@ -77,7 +71,7 @@ npm start ## Generating a Component with a Component Class -With the Mapbox API key in place, let's generate a new component for our map. +With the TomTom API key in place, let's generate a new component for our map. ```run:command cwd=super-rentals ember generate component map --component-class=@glimmer/component @@ -108,7 +102,7 @@ Let's update our component: export default class Map extends Component { + get token() { -+ return encodeURIComponent(ENV.MAPBOX_ACCESS_TOKEN); ++ return encodeURIComponent(ENV.TOMTOM_ACCESS_TOKEN); + } +