사형, 비혼출산, 안락사 허용하는 나라가 되었으면.. 인간세상이 되었으면
인간을 인간답게, 인간이 아닌자에겐 생의 마감을.
2024년 2월 11일 일요일
2023년 5월 31일 수요일
2022년 4월 2일 토요일
deck.gl with pure javascript, Mapbox GL JS, Geojson
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>
피드 구독하기:
글 (Atom)