自動翻訳(Auto Translation)
- English
- 日本語
Mapboxで地図を表示するのに、必要最低限の記述を備忘録として記述。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>地図表示</title>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet" />
<script type="text/javascript" src="apikey.js"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#map{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
<style type="text/css">
#menu{
position: absolute;
background-color: #efefef;
padding: 10px;
font-family: 'Open Sans',sans-serif;
}
</style>
</head>
<body>
<div id='map'></div>
<div id="menu">
test
</div>
<script src="./map.js"></script>
</body>
</html>
map.js
const MAP_API_KEY = config.apikey;
mapboxgl.accessToken = MAP_API_KEY;
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v10',
center: [137.41963849398405, 38.071278278263236],
zoom: 4,
//minZoom: 3.5,
//maxZoom: 7,
dragRotate: false
});apikey.js
const config = {
apikey : "[APIキーをここに貼り付け]"
}
