Whilst upgrading my project from Angular version 11 to version 18, I found that AGM for Google maps was no longer supported, so I needed to find a replacement.
I had heard some good things about Mapbox and it was cheaper, so decided to try it out, these are just some notes on my experience.
Create a new project using Angular CLI
We need to create a new Angular application to add our new map, we can do this using Angular CLI.
To create a new Angular project using Angular CLI type the below into your terminal.
ng new [project name]
cd into your new project directory and run the Angular app.
ng serve
Navigate to localhost:4200 to see your new app running.
Create a new map component
To create a new component for the map we can use Angular CLI to generate a new component.
After stopping the application CTRL + C, run the below in the terminal
ng g c [path and name of component] --dry-run
I usually add the optional --dry-run just to check the files are generated as expected. Once happy this can be removed and run again to create the files.
The new component and relevant files have been created in the components folder as expected.
Add the new component to the page to display the map component.
After running the application ng serve we can see our new map component working.
Adding Mapbox to our application
Now we will need to add the map to our application, go to the Mapbox website and create an account and make a note of your access token.
Install the Mapbox npm package
mpm install mapbox-gl --save
Add the Mapbox styles into the <head> of the index.html
Add access token to the environment constants
Open your environments.ts file and add your access token to the environment constant as below;
mapbox: {
accessToken: 'YOUR MAPBOX ACCESSTOKEN'
}
Add a <div> with an id that will match the 'container' property on our map object, and a class that will style the height and width of our map.
<div id="map" class="map"></div>
Add the relevant styles for the map to the map .scss file
.map {
height: 500px;
width: 500px;
}
Add Mapbox to the component
From the Mapbox website steps you are instructed to add the below JavaScript code, however we are using Angular so we will do things slightly differently.
Add the below code noting some of the differences.
Import the mapbox-gl library installed earlier
import * as mapboxgl from 'mapbox-gl';
Add a variable for mapbox-gl within our component class
private map!: mapboxgl.Map
Import the access key we added to the environment constant
import { environment } from '../../../environments/environment';
Add a variable to hold the map style
private style = 'mapbox://styles/mapbox/streets-v11';
Finally add variables to hold the latitude and longitude for centring the map, I have used for Oxford, UK as it is close to me.
private lat: number = 51.75222;
private lng: number = -1.25596;
I initialised the map from the AfterContentInit lifecycle hook to make sure the container div was available before loading the map into it.
ngAfterContentInit(): void {
this.map = new mapboxgl.Map({
container: 'map',
style: this.style,
zoom: 13,
center: [this.lng, this.lat],
accessToken: environment.mapbox.accessToken
});
}
Once all set-up we can run the application ng serve to see our map on the page
Troubleshooting
I had a few issues when implementing the Mapbox map that I would like to share as it may help if you come across these.
accessToken not available on mapboxgl
When viewing the code examples from the Mapbox website it instructs you to set the accessToken on the mapboxgl (mapboxgl.accessToken = 'YOUR ACCESS TOKON' ).
However for me this did not exist as an option, so after some digging, I found you could add this to the object past into Map when initialising a new mapboxgl.Map().
mapboxgl.Map({
accessToken: ‘YOUR ACCESS TOKEN’
})
Map not showing
If the map doesn’t show it may be the container div needs some explicit dimensions height, width or both.
Check that the container element is picking up the styling.
import Point from ‘@mapbox/point-geometry error
When running I get the below error.
This module is declared with 'export -' and can only be used with default import when using 'allowSyntheticDefaultImports' flag.
After some digging and comparing with another application that worked, I found that "esModuleInterop": true, was missing from the tsconfig.ts compilerOptions.
I add the below to the compilerOptions and it worked as expected.
"esModuleInterop": true,
