Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Kepler.gl embedded map</title> | |
| <!--Uber Font--> | |
| <link | |
| rel="stylesheet" | |
| href="./superfine.css" | |
| /> | |
| <!--MapBox css--> | |
| <link href="./maplibre-gl.css" rel="stylesheet" /> | |
| <!-- Load React/Redux --> | |
| <script src="./react.production.min.js" crossorigin></script> | |
| <script | |
| src="./react-dom.production.min.js" | |
| crossorigin | |
| ></script> | |
| <script src="./redux.js" crossorigin></script> | |
| <script src="./react-redux.min.js" crossorigin></script> | |
| <script | |
| src="./styled-components.min.js" | |
| crossorigin | |
| ></script> | |
| <!-- Load Kepler.gl--> | |
| <script src="./keplergl.min.js"></script> | |
| <!--If you want to load the build from filepath --> | |
| <!--<script src="../../umd/keplergl.min.js"></script>--> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| </style> | |
| <!--MapBox token--> | |
| <script> | |
| /** | |
| * Provide your MapBox Token (Used in pre 3.x kepler.gl) | |
| **/ | |
| const MAPBOX_TOKEN = "pk.eyJ1IjoibW9zaW84OSIsImEiOiJjbHRyYnI4b2cwOHRhMmtwN250cGhyam9xIn0.cWA7FjLYS63ZnDm5VRawug"; | |
| const WARNING_MESSAGE = | |
| 'Please Provide a Mapbox Token in order to use Kepler.gl. Edit this file and fill out MAPBOX_TOKEN with your access key'; | |
| </script> | |
| </head> | |
| <body> | |
| <!-- We will put our React component inside this div. --> | |
| <div id="app"> | |
| <!-- Kepler.gl map will be placed here--> | |
| </div> | |
| <!-- Load our React component. --> | |
| <script> | |
| /* Validate Mapbox Token */ | |
| if ((MAPBOX_TOKEN || '') === '' || MAPBOX_TOKEN === 'PROVIDE_MAPBOX_TOKEN') { | |
| alert(WARNING_MESSAGE); | |
| } | |
| /** STORE **/ | |
| const reducers = (function createReducers(redux, keplerGl) { | |
| return redux.combineReducers({ | |
| // mount keplerGl reducer | |
| keplerGl: keplerGl.keplerGlReducer | |
| }); | |
| })(Redux, KeplerGl); | |
| const middleWares = (function createMiddlewares(keplerGl) { | |
| return keplerGl.enhanceReduxMiddleware([ | |
| // Add other middlewares here | |
| ]); | |
| })(KeplerGl); | |
| const enhancers = (function craeteEnhancers(redux, middles) { | |
| return redux.applyMiddleware(...middles); | |
| })(Redux, middleWares); | |
| const store = (function createStore(redux, enhancers) { | |
| const initialState = {}; | |
| return redux.createStore(reducers, initialState, redux.compose(enhancers)); | |
| })(Redux, enhancers); | |
| /** END STORE **/ | |
| /** COMPONENTS **/ | |
| const KeplerElement = (function(react, keplerGl, mapboxToken) { | |
| return function(props) { | |
| return react.createElement( | |
| 'div', | |
| {style: {position: 'absolute', left: 0, width: '100vw', height: '100vh'}}, | |
| react.createElement(keplerGl.KeplerGl, { | |
| mapboxApiAccessToken: mapboxToken, | |
| id: 'map', | |
| width: props.width || 1500, | |
| height: props.height || 800 | |
| }) | |
| ); | |
| }; | |
| })(React, KeplerGl, MAPBOX_TOKEN); | |
| const app = (function createReactReduxProvider(react, reactRedux, KeplerElement) { | |
| return react.createElement( | |
| reactRedux.Provider, | |
| {store}, | |
| react.createElement(KeplerElement, null) | |
| ); | |
| })(React, ReactRedux, KeplerElement); | |
| /** END COMPONENTS **/ | |
| /** Render **/ | |
| (function render(react, reactDOM, app) { | |
| const container = document.getElementById('app'); | |
| const root = reactDOM.createRoot(container); | |
| root.render(app); | |
| })(React, ReactDOM, app); | |
| </script> | |
| <!-- The next script will show how to interact directly with Kepler map store --> | |
| <script> | |
| /** | |
| * Customize map. | |
| * Interact with map store to customize data and behavior | |
| */ | |
| (function customize(keplerGl, store) { | |
| // store.dispatch(keplerGl.toggleSplitMap()); | |
| })(KeplerGl, store); | |
| </script> | |
| </body> | |
| </html> |