public

Creating an Earthquake Map with Kepler.gl

Kepler.gl is an open-source tool for geospatial analysis. It is built to easily integrate into projects via a React component. Being a general-purpose geospatial analysis tool, Kepler.gl opens the door for analysis of large datasets.

6 months ago

Latest Post NEW - ByteUnits Membership by Tyler Moon public

Kepler.gl is an open-source tool for geospatial analysis. It is built to easily integrate into projects via a React component. Being a general purpose geospatial analysis tool, Kepler.gl opens the door for analysis of large datasets.

In this article we will see a minimal setup of Kepler.gl using plain JavaScript loading in the React and Redux component from CDNs. As an example of mapping data we will look at the USGS earthquake data from the past week. The USGS posts earthquake data here in multiple formats.

Prerequisites

Create HTML file with Kepler.gl

Create a new directory for the project and then create a file index.html. Add the following HTML to the file:

<!-- Based on example: https://github.com/keplergl/kepler.gl/blob/master/examples/umd-client/index.html -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kepler.gl Example Map</title>

    <!-- Uber Font -->
    <link rel="stylesheet" href="https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css">
    
    <!-- MapBox css-->
    <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css">

    <!-- Load React/Redux -->
    <script src="https://unpkg.com/react@16.8.4/umd/react.production.min.js" crossorign></script>
    <script src="https://unpkg.com/react-dom@16.8.4/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/redux@3.7.2/dist/redux.js" crossorigin></script>
    <script src="https://unpkg.com/react-redux@7.1.3/dist/react-redux.min.js" crossorigin></script>
    <script src="https://unpkg.com/styled-components@4.1.3/dist/styled-components.min.js" crossorigin></script>

    <!-- Load Kepler.gl -->
    <script src="https://unpkg.com/kepler.gl@2.4.0/umd/keplergl.min.js"></script>

    <style type="text/css">
        body {margin: 0; padding: 0; overflow: hidden;}
    </style>

    <!-- MapBox token -->
    <script>
        const MAPBOX_TOKEN = '<REPLACE_WITH_TOKEN>';
    </script>
</head>
<body>
    <div id="app">
        <!-- Kepler.gl map will be placed here -->
    </div>

    <script>
        /** 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([]);
        }(KeplerGl))

        const enhancers = (function createEnhancers(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 || 1920,
                            height: props.height || 1080
                        }
                    )
                )
            }
        }(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) {
            reactDOM.render(app, document.getElementById('app'));
        }(React, ReactDOM, app));

    </script>
</body>
</html>

Make sure that you replace the string on line 28 with your personal access token from mapbox.com.

Mapbox
An open source mapping platform for custom designed maps. Our APIs and SDKs are the building blocks to integrate location into any mobile or web app.

Open Site

To load the newly created Kepler.gl site open the index.html file with your browser.

Download GeoJSON Data

To download some GeoJSON data that maps out earthquakes head over to the USGS website

GeoJSON Summary Format
USGS Earthquake Hazards Program, responsible for monitoring, reporting, and researching earthquakes and earthquake hazards

On the right side download the data from the "All Earthquakes" link under the "Last 30 days" header

Loading Data

To load in the data downloaded in the last section head over to the index.html file that was opened earlier. Then on the popup menu navigate or drag in the geojson file downloaded in the last section.

Voila the last months earthquakes are now mapped!

Summary

In this article we explored running Kepler.gl locally using a single HTML file loading the React components. Then we pulled in some data from the USGS to chart all of the earthquakes that have happened in the last month.

Tyler Moon

Published 6 months ago