First, follow the Mapbox Quickstart Guide to register to Mapbox and obtain a Token key from them.
Then, you must register to this site and perform a channel verification on the following page: Verify Channel
An API key from thejapanmap.com is also required. Such an API key may be generated further below on this same page. Please also provide your website to the API key in the Origins column, which helps to prevent from your key being used maliciously.
In the code below, insert the Mapbox Token, the Japan Map API key and your YouTube channel id in the code below. Replace the text highlighted in red. The code will then need to be placed within your website as described further below.
<link rel="stylesheet" id="mapbox-css-css" href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" type="text/css" media="all">
<link rel="stylesheet" id="thejapanmap-css-css" href="https://storage.googleapis.com/assets.thejapanmap.com/css/thejapanmap-0.1.0.css" type="text/css" media="all">
<script type="text/javascript" src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js" id="mapbox-js-js"></script>
<script type="text/javascript" src="https://storage.googleapis.com/assets.thejapanmap.com/js/thejapanmap-0.1.0.js" id="thejapanmap-js-js"></script>
<script>
let theJapanMap = new TheJapanMap({
apiKey: "<your Japan Map API key here>",
channelId: "<your YouTube channel id here>",
heightSetting: "default",
mapBoxParams: {
container: "thejapanmap",
mapBoxToken: "<your MapBox Token here>"
}
},
);
</script>
Once you have inserted your data in the code snippet above, it needs to be added into to the <head></head> section of your website.
Now, the empty HTML container seen below will need to be added somewhere in the <body></body> section of your website. This container will be populated by The Japan Map code once the website has been loaded. Your Japan Map should then be ready to go.
<div id="thejapanmap"></div>
Here you can see a map example using just the code displayed above showing the YouTube channel Abroad in Japan.
