I am trying to make a map that shows a point which is located in Tokyo by defining longitude and latitude. There is a map showed appropriately but not a point that should be there in red color. Hope someone can kindly find the reason why the point is not shown.
Below is my project repository's structure and codes.
-deck.gl
index.html
package-lock.json
package.json
webpack.config.js
-dist
bundle.js
bundle.js.LICENSE.txt
bundle.js.map
-node_modules
-src
index.js
import { Deck } from 'deck.gl';
import { ScatterplotLayer } from '@deck.gl/layers';
import { MapboxLayer } from '@deck.gl/mapbox';
import mapboxgl from 'mapbox-gl';
const INITIAL_VIEW_STATE = {
longitude: 139.6917,
latitude: 35.6895,
zoom: 10,
pitch: 0,
bearing: 0
};
const scatterplotLayer = new ScatterplotLayer({
id: 'scatterplot-layer',
data: [
{ position: [139.6917, 35.6895], size: 500 }
],
getRadius: d => d.size,
getFillColor: [255, 0, 0, 180],
getPosition: d => d.position
});
const token = "MY-TOKEN"
const map = new mapboxgl.Map({
container: 'app',
style: 'mapbox://styles/mapbox/streets-v11',
accessToken: token,
center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
zoom: INITIAL_VIEW_STATE.zoom
});
map.on('load', () => {
const deckInstance = new Deck({
mapboxApiAccessToken: token,
initialViewState: INITIAL_VIEW_STATE,
controller: true,
layers: [scatterplotLayer],
onWebGLInitialized: (gl) => {
console.log('WebGL Initialized:', gl);
}
});
map.addLayer(new MapboxLayer({ id: 'scatterplot-layer', deck: deckInstance }));
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet">
<title>deck.gl Tutorial</title>
<style>
body { margin: 0; }
#app { width: 100vw; height: 100vh; }
</style>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>