Mapbox + Geojson + deck.gl
군더더기 없이. 잡다한 스크립트 라이브러리를 사용하는건.. 너무 싫다. 늙어서 그런갑다..
GeoJsonLayer 옵션은 여기서
https://deck.gl/docs/api-reference/layers/geojson-layer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mapbox JS & deck.gl with pure javascript</title>
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '<MAPBOX KEY>'
window.map = new mapboxgl.Map({
container: "map",
style: "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json",
center: [-100, 38],
zoom: 6,
maxZoom: 19,
})
new deck.Deck({
initialViewState: {
longitude: -100,
latitude: 38,
zoom: 4
},
onViewStateChange: function(e){
var viewState = e.viewState
window.map.jumpTo({
center: [viewState.longitude, viewState.latitude],
zoom: viewState.zoom,
bearing: viewState.bearing,
pitch: viewState.pitch
});
},
controller: true,
layers: [
new deck.GeoJsonLayer({
id: 'geojson',
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/highway/roads.json',
lineWidthMinPixels: 2,
getLineColor: [160, 0, 180, 200],
})
]
})
</script>
</body>
</html>
