Replace map box with TomTom #262
Conversation
|
Thanks for making this :)I've pinged @mansona personally to figure out why the build breaks |
|
We'll first merge the |
|
@tcjr what's the best way to move this change now? |
I was just thinking that I'm not entirely sure how to go about this. The bad newsI just looked at the merge conflicts and I don't think there's really any way to reconcile it in a traditional way. The nature of the changes in the base -- merging The good newsWe are very fortunate that it's just this one chapter and the changes are completely self-contained. The component signature doesn't change, so subsequent mods around the I think the best approach might be to create a new branch and manually copy the changes into the new Thoughts? @TeriyakiBomb |
|
It's just the one chapter as you say, so that's probably the easiest way to do it TBH |
mansona
force-pushed
the
replace-map-box
branch
from
c2cb99f to
e64720f
Compare
mansona
force-pushed
the
replace-map-box
branch
from
e64720f to
0be5b35
Compare
| + <img | ||
| + alt="Map image at coordinates {{@lat}},{{@lng}}" | ||
| + ...attributes | ||
| + src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/{{@lng}},{{@lat}},{{@zoom}}/{{@width}}x{{@height}}@2x?access_token={{this.token}}" |
There was a problem hiding this comment.
This needs to go to api.tomtom.com. The API is different too, so it's more than just swapping out the domain.
The src attribute should be:
src="https://api.tomtom.com/map/1/staticimage?key={{this.token}}&zoom={{@zoom}}¢er={{@lng}},{{@lat}}&width={{@width}}&height={{@height}}"
| The `src` attribute interpolates all the required parameters into the URL format for Mapbox's [static map image API](https://docs.mapbox.com/api/maps/#static-images), including the URL-escaped access token from `this.token`. | ||
| The `src` attribute interpolates all the required parameters into the URL format for TomTom's [static map image API](https://developer.tomtom.com/map-display-api/documentation/raster/static-image), including the URL-escaped access token from `this.token`. | ||
|
|
||
| Finally, since we are using the `@2x` "retina" image, we should specify the `width` and `height` attributes. Otherwise, the `<img>` will be rendered at twice the size than what we expected! |
There was a problem hiding this comment.
The @2x query param is is specific to Mapbox, so this paragraph should be removed.
| + ); | ||
| + | ||
| + assert.ok( | ||
| + src.includes('-122.4184,37.7797,10'), |
There was a problem hiding this comment.
TomTom API does this differently. These values are no longer URL segments and are now part of the center and zoom query params.
| - await render(<template><Map /></template>); | ||
| + assert.ok( | ||
| + src.includes('150x120@2x'), |
| - assert.dom().hasText(''); | ||
| + assert.ok( | ||
| + src.includes(`access_token=${token}`), |
There was a problem hiding this comment.
TomTom calls this key instead of access_token.
| + let img = find('.map img'); | ||
| + | ||
| + assert.ok( | ||
| + img.src.includes('-122.4194,37.7749,10'), |
There was a problem hiding this comment.
All these assertions have to change to reflect the TomTom API. (see above)
|
This can be closed. The other PR contains the commit from this PR (plus a couple more commits): |
4 participants
As discussed here ember-learn/guides-source#1938 Map Box no longer allows access without a credit card, but TomTom does! (There's a cute joke in there somewhere) so this replaces Map Box.
Hopefully not missed anything.