Hugging Face's logo

Spaces:
thanthamky
/
keplergl-demo
Running

App Files Community
thanthamky commited on
Commit
cd12d22
•
1 Parent(s): 26bbb63

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +133 -18
index.html CHANGED
@@ -1,19 +1,134 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Kepler.gl embedded map</title>
6
+
7
+ <!--Uber Font-->
8
+ <link
9
+ rel="stylesheet"
10
+ href="https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css"
11
+ />
12
+
13
+ <!--MapBox css-->
14
+ <link href="https:https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css" rel="stylesheet" />
15
+
16
+ <!-- Load React/Redux -->
17
+ <script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js" crossorigin></script>
18
+ <script
19
+ src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"
20
+ crossorigin
21
+ ></script>
22
+ <script src="https://unpkg.com/redux@4.2.1/dist/redux.js" crossorigin></script>
23
+ <script src="https://unpkg.com/react-redux@8.0.5/dist/react-redux.min.js" crossorigin></script>
24
+ <script
25
+ src="https://unpkg.com/styled-components@4.1.3/dist/styled-components.min.js"
26
+ crossorigin
27
+ ></script>
28
+
29
+ <!-- Load Kepler.gl-->
30
+ <script src="https://unpkg.com/kepler.gl@3.0.0-alpha.2/umd/keplergl.min.js"></script>
31
+ <!--If you want to load the build from filepath -->
32
+ <!--<script src="../../umd/keplergl.min.js"></script>-->
33
+
34
+ <style type="text/css">
35
+ body {
36
+ margin: 0;
37
+ padding: 0;
38
+ overflow: hidden;
39
+ }
40
+ </style>
41
+
42
+ <!--MapBox token-->
43
+ <script>
44
+ /**
45
+ * Provide your MapBox Token (Used in pre 3.x kepler.gl)
46
+ **/
47
+ const MAPBOX_TOKEN = "pk.eyJ1IjoibW9zaW84OSIsImEiOiJjbHRyYnI4b2cwOHRhMmtwN250cGhyam9xIn0.cWA7FjLYS63ZnDm5VRawug";
48
+ const WARNING_MESSAGE =
49
+ 'Please Provide a Mapbox Token in order to use Kepler.gl. Edit this file and fill out MAPBOX_TOKEN with your access key';
50
+ </script>
51
+ </head>
52
+ <body>
53
+ <!-- We will put our React component inside this div. -->
54
+ <div id="app">
55
+ <!-- Kepler.gl map will be placed here-->
56
+ </div>
57
+
58
+ <!-- Load our React component. -->
59
+ <script>
60
+ /* Validate Mapbox Token */
61
+ if ((MAPBOX_TOKEN || '') === '' || MAPBOX_TOKEN === 'PROVIDE_MAPBOX_TOKEN') {
62
+ alert(WARNING_MESSAGE);
63
+ }
64
+
65
+ /** STORE **/
66
+ const reducers = (function createReducers(redux, keplerGl) {
67
+ return redux.combineReducers({
68
+ // mount keplerGl reducer
69
+ keplerGl: keplerGl.keplerGlReducer
70
+ });
71
+ })(Redux, KeplerGl);
72
+
73
+ const middleWares = (function createMiddlewares(keplerGl) {
74
+ return keplerGl.enhanceReduxMiddleware([
75
+ // Add other middlewares here
76
+ ]);
77
+ })(KeplerGl);
78
+
79
+ const enhancers = (function craeteEnhancers(redux, middles) {
80
+ return redux.applyMiddleware(...middles);
81
+ })(Redux, middleWares);
82
+
83
+ const store = (function createStore(redux, enhancers) {
84
+ const initialState = {};
85
+
86
+ return redux.createStore(reducers, initialState, redux.compose(enhancers));
87
+ })(Redux, enhancers);
88
+ /** END STORE **/
89
+
90
+ /** COMPONENTS **/
91
+ const KeplerElement = (function(react, keplerGl, mapboxToken) {
92
+ return function(props) {
93
+ return react.createElement(
94
+ 'div',
95
+ {style: {position: 'absolute', left: 0, width: '100vw', height: '100vh'}},
96
+ react.createElement(keplerGl.KeplerGl, {
97
+ mapboxApiAccessToken: mapboxToken,
98
+ id: 'map',
99
+ width: props.width || 1200,
100
+ height: props.height || 800
101
+ })
102
+ );
103
+ };
104
+ })(React, KeplerGl, MAPBOX_TOKEN);
105
+
106
+ const app = (function createReactReduxProvider(react, reactRedux, KeplerElement) {
107
+ return react.createElement(
108
+ reactRedux.Provider,
109
+ {store},
110
+ react.createElement(KeplerElement, null)
111
+ );
112
+ })(React, ReactRedux, KeplerElement);
113
+ /** END COMPONENTS **/
114
+
115
+ /** Render **/
116
+ (function render(react, reactDOM, app) {
117
+ const container = document.getElementById('app');
118
+ const root = reactDOM.createRoot(container);
119
+ root.render(app);
120
+ })(React, ReactDOM, app);
121
+ </script>
122
+
123
+ <!-- The next script will show how to interact directly with Kepler map store -->
124
+ <script>
125
+ /**
126
+ * Customize map.
127
+ * Interact with map store to customize data and behavior
128
+ */
129
+ (function customize(keplerGl, store) {
130
+ // store.dispatch(keplerGl.toggleSplitMap());
131
+ })(KeplerGl, store);
132
+ </script>
133
+ </body>
134
+ </html>