自動翻訳(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キーをここに貼り付け]"
}
