deck.gl-mapbox

by Akihiko Kusanagi

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/mapbox-gl.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mapbox-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.11/pako.min.js"></script>
<div id="map"></div>

CSS

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
}

JavaScript

const features = [];
for (let i = 0; i < 10000; i++) {
	const lng = 139.7670 + Math.random() * 0.02 - 0.01;
  const lat = 35.6814 + Math.random() * 0.02 - 0.01;
  features.push({
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: [
      	[lng, lat],
      	[lng + 1e-5, lat + 1e-5]
      ]
    }
  })
}
const map = new mapboxgl.Map({
  accessToken: 'pk.eyJ1IjoibmFnaXgiLCJhIjoiY2toNjZiODloMDkwczJwbnpqZDJsb3dlYiJ9.H8NBOYo-3mej8W-oQzGmDw',
  container: 'map',
  style: 'mapbox://styles/mapbox/dark-v10',
  center: [139.7670, 35.6814],
  zoom: 15,
  pitch: 45
});
map.on('load', () => {
  map.addLayer(new deck.MapboxLayer({
    id: 'layer',
    type: deck.GeoJsonLayer,
    data: {
      type: 'FeatureCollection',
      features: features
    },
    getLineColor: [255, 255, 255]
  }));
});