I have always wanted to add a map to the "About" page, but for various reasons (lazy), I never took action. Today, I have some free time, so I will work on it.
I initially thought about using services like AMap, but there are complications such as registering a developer account and real-name verification.
So, I turned my attention to foreign map service providers.
GoogleMap was excluded first due to well-known reasons. After a long selection process, I decided to use Mapbox services.
Register/Login Mapbox Account#
Click the link to go to the official website and register and log in to your account.
After logging in, the interface should look like this
Install Mapbox SDK#
- Since we are using it for a webpage, choose Web
- Select Use the Mapbox CDN
- Include the GL JS files
- Copy the CSS and JS files
- Paste them in the
<head>(adjust according to your own situation)
- Add the map to your site, also copy and paste, similar to before
Use Mapbox Studio#
-
Visit Mapbox Studio and click New Style
-
Choose a template based on your needs. Here, I selected Satellite Streets
and then Customize -
Adjust the map according to your needs, including layers, colors, tiles, and other information. Finally, publish (I used the satellite image of Beijing's Tiananmen Square as an example here)
-
Go back to the Studio interface and share the map you just created. Copy the Style URL and Access token, and replace the URL and token in the "Add the map to your site" section
Alright (●°u°●) 」, under normal circumstances, the map should be able to load now: