Skip to content

Commit 75ce394

Browse files
mkahlstrommkahlstrom
authored
Update index.html
1 parent b7aea58 commit 75ce394

1 file changed

Lines changed: 39 additions & 55 deletions

File tree

‎index.html‎

Lines changed: 39 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5,71 +5,55 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Kepler.gl Demo</title>
77

8-
<!-- Kepler.gl CSS -->
9-
<link href="https://unpkg.com/@kepler.gl/styles@3.0.0/dist/kepler.gl.min.css" rel="stylesheet" type="text/css">
10-
11-
<!-- Additional Styles -->
8+
<!-- Load Mapbox and Deck.gl -->
9+
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
10+
<script src="https://unpkg.com/@loaders.gl/core@latest/dist.min.js"></script>
11+
<script src="https://unpkg.com/@loaders.gl/json@latest/dist.min.js"></script>
12+
13+
<!-- Styles -->
1214
<style>
13-
body {
14-
margin: 0;
15-
padding: 0;
16-
height: 100vh;
17-
}
18-
#kepler-gl-container {
19-
width: 100%;
20-
height: 100%;
21-
}
15+
body, html { margin: 0; padding: 0; width: 100%; height: 100vh; }
16+
#map { width: 100%; height: 100%; }
2217
</style>
2318
</head>
2419
<body>
2520

26-
<!-- Container for Kepler.gl Map -->
27-
<div id="kepler-gl-container"></div>
21+
<!-- Map Container -->
22+
<div id="map"></div>
2823

29-
<!-- Kepler.gl and other dependencies -->
30-
<script src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
31-
<script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
32-
<script src="https://unpkg.com/redux@4.0.1/dist/redux.min.js"></script>
33-
<script src="https://unpkg.com/@kepler.gl/core@3.0.0/dist/kepler.gl.min.js"></script>
34-
<script src="https://unpkg.com/@kepler.gl/react@3.0.0/dist/kepler.gl.min.js"></script>
35-
36-
<!-- Dummy Data -->
24+
<!-- Load Dummy Data -->
3725
<script src="data.js"></script>
3826

3927
<script>
40-
// Initialize Kepler.gl with dummy data
41-
const {KeplerGl} = window['@kepler.gl/react'];
42-
const {createStore} = window['redux'];
43-
44-
// Redux store for Kepler.gl
45-
const store = createStore(window['@kepler.gl/core'].keplerGlReducer);
46-
47-
// Set up Kepler.gl container
48-
const keplerGlContainer = document.getElementById('kepler-gl-container');
49-
50-
// Create Kepler.gl component
51-
const keplerMap = React.createElement(KeplerGl, {
52-
id: 'demo-map',
53-
mapboxApiAccessToken: 'your-mapbox-access-token-here',
54-
store: store
28+
// Replace with your Mapbox token (Get one for free at mapbox.com)
29+
const MAPBOX_ACCESS_TOKEN = 'your-mapbox-access-token-here';
30+
31+
// Create a deck.gl map
32+
const deck = new deck.DeckGL({
33+
container: 'map',
34+
mapStyle: 'mapbox://styles/mapbox/dark-v10',
35+
mapboxAccessToken: MAPBOX_ACCESS_TOKEN,
36+
initialViewState: {
37+
longitude: -98.35, // Center of the US
38+
latitude: 39.50,
39+
zoom: 4,
40+
pitch: 0,
41+
bearing: 0
42+
},
43+
controller: true,
44+
layers: [
45+
new deck.ScatterplotLayer({
46+
id: 'scatter-layer',
47+
data: dummyData.features,
48+
getPosition: d => d.geometry.coordinates,
49+
getRadius: 50000, // Adjust point size
50+
getColor: [255, 0, 0], // Red color
51+
radiusScale: 100,
52+
pickable: true
53+
})
54+
]
5555
});
56-
57-
ReactDOM.render(keplerMap, keplerGlContainer);
58-
59-
// Load dummy data
60-
store.dispatch(window['@kepler.gl/core'].addDataToMap({
61-
datasets: [{
62-
data: dummyData,
63-
info: {
64-
label: 'Dummy Dataset',
65-
id: 'dummy_data'
66-
}
67-
}],
68-
options: {
69-
centerMap: true,
70-
zoom: 10
71-
}
72-
}));
7356
</script>
57+
7458
</body>
7559
</html>

0 commit comments

Comments
 (0)