ol-kit-blog-image

Add a Map To Your React App — For Free

This blog was originally posted on JavaScript in Plain English.

The ol-kit is a minimally-complicated open-source React and OpenLayers mapping component toolkit. It hits the perfect trifecta of component libraries — easy, good, and cheap. Most only achieve two of those three qualities, but ol-kit accomplishes this by:

  1. abstracting OpenLayers into familiar-looking React components and utility functions (easy)
  2. providing a versatile, flexible, and tested package (good), and
  3. being open source (free = as cheap as it gets).

Add To Existing Apps

Add @bayer/ol-kit and its peer dependencies to your app.

npm i @bayer/ol-kit ol react react-dom styled-components @material-ui/core @material-ui/icons @material-ui/styles --save

Then use the Map component to render a simple map.

import React from 'react'
import { Map } from '@bayer/ol-kit'

const myComponent = () => <Map />
export default myComponent

It’s that easy!

Bootstrap New Apps

Based on the create-react-app bootstrapper, ol-kit offers a one-line bootstrap command (it’ll take a minute or two to run).

npx @bayer/ol-kit create-map

You’ll need to have Node.js installed on your machine for this to work.

Load Map Data

Looking at a map isn’t very useful if there’s no data on it. ol-kit comes with a data loader that can handle most different types of data: GeoJSON, KML, shapefiles, vector tiles, etc.

import React from 'react'
import { Map, loadDataLayer } from '@bayer/ol-kit'

const App = () => {
  const onMapInit = async map => {
    // nice to have map set on the window while debugging
    window.map = map
    // find a geojson or kml dataset (url or file) to load on the map
    const data = {
      url: 'https://data.nasa.gov/api/geospatial/7zbq-j77a?method=export&format=KML',
      id: 'world_country_boundaries',
      name: 'World Country Boundaries'
    }
    const dataLayer = await loadDataLayer(map, data.url)
    
    // set the title and id on the layer to show in LayerPanel
    dataLayer.set('title', data.name)
    dataLayer.set('id', data.name)
  }

  return <Map onMapInit={this.onMapInit} fullScreen />
}
export default App

Note the onMapInit callback. This is an async callback that will block the map (and other children) from rendering until the promise is resolved, to help prevent other components that might depend on that data from crashing the app.

If you want some unique data to display on the map, check out these free maintained data sources.

Add Map Controls

Default basemap controls

There are a few UI components that add utility to your map, and the most basic of these are the map controls. Include them on your map by adding the <Controls /> component inside of Map. The actual OpenLayers map instance is passed down via context to all the children of Map, so it does not need to be passed down manually.

import React from 'react'
import { Map, Controls } from '@bayer/ol-kit'
const App = () => {
  return (
    <Map>
      <Controls />
    </Map>
  )
}
export default App

The default OpenLayers zoom controls are much uglier and far less useful.

Change Basemaps

For this, you have two options: 1. a prebuilt basemap switcher, or 2. a utility function. First, the component option:

Basemap options included in the BasemapContainer
import React from 'react'
import { Map, BasemapContainer } from '@bayer/ol-kit'
const App = () => {
  return (
    <Map>
      <BasemapContainer />
    </Map>
  )
}
export default App

Or, use the utility:

import React from 'react'
import { Map, loadBasemapLayer } from '@bayer/ol-kit'

const App = () => {
  const onMapInit = async map => {
    loadBasemapLayer(map, stamenTonerLite')
  }
  return <Map onMapInit={this.onMapInit} fullScreen />
}
export default App

Enable Popups

A popup is an easy way to provide contextual information on a per-feature basis. The ol-kit allows you to use the default Popup (shown above) that displays all the information on the feature, along with customizable actions, or you can use the PopupBase to build your own, fully-custom popup.

Here’s how to include the popup on your map:

import React from 'react'
import { Map, Popup } from '@bayer/ol-kit'

const App = () => {
  return (
    <Map>
      <Popup />
    </Map>
  )
}
export default App

Takeaways

The ol-kit offers a lot of customizable components and tools while maintaining a plug-and-play level of ease-of-use. This briefly touches on some of their plug-and-play components; feel free to subscribe to keep up-to-date on more complex implementations.

Here’s the code for the demo app that includes MapPopupBasemapContainerControls, and a few more cool things.

import React from 'react'
import {
  Map,
  BasemapContainer,
  ContextMenu,
  Controls,
  LayerPanel,
  Popup,
  loadDataLayer
} from '@bayer/ol-kit'

const App = () => {
  const onMapInit = async map => {
    console.log('we got a map!', map)
    // nice to have map set on the window while debugging
    window.map = map

    // find a geojson or kml dataset (url or file) to load on the map
    const data = 'https://data.nasa.gov/api/geospatial/7zbq-j77a?method=export&format=KML'
    const dataLayer = await loadDataLayer(map, data)
    // set the title on the layer to show in LayerPanel
    dataLayer.set('title', 'NASA Data')
  }

  return (
    <Map onMapInit={this.onMapInit} fullScreen>
      <BasemapContainer />
      <ContextMenu />
      <Controls />
      <LayerPanel />
      <Popup />
    </Map>
  )
}

export default App

Again, check the ol-kit documentation for more information — feel free to reach out with any questions.

Thank you for reading.

Other Insights

Customer service is broken
Customer service is broken - but the technology is now available to fix it. That was the key message when
Read Full Story »
Scapes Tickled Pink Award Winner
At 1904labs, we publicly recognize the efforts of our coworkers with a pink feather. Feathers can be given whenever someone
Read Full Story »
g2i-promo-blog
We’re sponsoring Gateway to Innovation 2022. We’ll also be presenting again this year and hope you'll join us!
Read Full Story »
Is your RFP process sidetracking your end goals? Here are two ways the process breaks down - and how to
Read Full Story »
Contact center customer insights cover image
Learn how leveraging AI in your contact center opens a world of data and gives you customer insights that extend
Read Full Story »
potbangerz3
As part of our employee holiday gifts this year, 1904labs donated 240 blankets to Potbangerz, an organization helping the unhoused
Read Full Story »