Getting started with Openlayers in React
Tags: react, map, openlayers, gis
Published: 2024-03-29 19:43:39

## CONTENT

1. Introduction to Maps and Openlayers
2. Openlayers
3. Attributes
4. Setting up project
5. Summary

## Introduction to Maps and OpenLayers
Ever dreamt of building interactive maps to explore or showcase data? This article dives into the powerful duo of React and OpenLayers, transforming your web pages into dynamic geo-discovery tools.

## Openlayers
Openlayers is a JavaScript library that is  used to render onto or embed maps into a webpage. It is a free and opensource library that allows users to display maps and load vector data and markers from any data source. (https://openlayers.org/)

It is a powerful and versatile tool that allows developers to build a range of applications, from simple maps to complex, and highly interactive geospatial applications with JavaScript.

## Attributes
Openlayers has 4 key components that are used to create and render maps. These are **_Map_**, **_View_**, **_Source_** and **_Layer_**.

- **Map**, in openlayers, is the map container for rendering any map. Imported from the module: _ol/map_ , it needs a target container (e.g a div) to contain the map.

```tsx
import Map from "ol/map"

const map = new Map({target: 'map'})
```
To display the map on your webpage, simply add an 'id' attribute to the container element of the map with the same name as the target in the newly created map above. Feel free to choose any name for the target as long as it matches the HTML element's ID.
```tsx
<div id="map" style="width: 100%; height: 400px"></div>
```

- **View** is the part of the map creation responsible for centering, zooming and projection of the map. It is imported from the _ol/view_ module. A View comes with a projection, which decides how coordinates are handled and what units are used for map resolutions. If you don't choose one, it defaults to Spherical Mercator (EPSG:3857), using meters as the unit for maps.
The view attribute is added as an option to the new map created in the Map column above.
```tsx
import Map from "ol/map"
import View from "ol/view"

const map = new Map({
  target: 'map', 
  view: new View({
     center: [0, 0],
     zoom: 2,
  }),
})
```
The center attribute specifies the initial center coordinate of the map view. It's an array with two elements representing the longitude and latitude of the center point on the map. In the above example, the map will be centered where both the longitude and latitude is zero (0). 

The zoom attribute sets the initial zoom level of the map. It is used to set how magnified or shrunk the map is compared to its default setting. You also have the option to define both _minZoom_ and _maxZoom_, allowing you to specify the minimum and maximum levels of zoom that users can apply to the map.

For example: let's make the Colosseum in Rome our starting point. Just plug in the EPSG:3857 coordinates, which you can find here: https://epsg.io/map#srs=4326&x=0.000000&y=0.000000&z=1&layer=streets. Then, zoom in or out as you please!

```tsx
import Map from "ol/map"
import View from "ol/view"

const map = new Map({
  target: 'map', 
  view: new View({
      center: [1390659.798668, 5144570.023792],
      zoom: 17,
  }),
})
```
The result will look like this:

![A map centered on the Colosseum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uj2mxk7gwdnyr4vwonnp.jpg)

As you can see, the map is centered on the Colosseum.

- **Source** is used to define the origin of spatial data that is displayed on the map. Openlayers support a variety of sources such as Tile sources like OpenStreetMap (OSM), Image sources like Web Map Service (WMS), Vector sources and XYZ sources.

```tsx
import OSM from 'ol/source/osm';

const source = OSM();
```
This code grabs the OpenStreetMap data and prepares it to be shown on a map.

- **Layer**, simply put is the visual representation of a data source. Examples include Tile layers, Image Layers and Vector Layers.

```tsx
import TileLayer from 'ol/layer/tile';

const layer = new TileLayer({source: source});
```
For further reading visit (https://openlayers.org/doc/tutorials/concepts.html) 

## Setting up Openlayers in React
To create a map, you can merge all the essential components into one script as shown below:

First set up openlayers in react:

```tsx
npm install ol
# or
yarn add ol
```

In the MapView component (Typescript): 
```tsx
import React, { useEffect } from "react";
import "ol/ol.css";
import Map from "ol/map";
import View from "ol/view";
import TileLayer from "ol/layer/tile";
import OSM from "ol/source/osm";

function MapView() {
  useEffect(() => {
    const map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

    return () => {
      map.setTarget(null);
    };
  }, []);
return <div id="map" style={{width: "100%", height: "400px"}}/>;
}

export default MapView
```
The return statement in the useEffect ensures proper cleanup and management of resources associated with the map, thereby maintaining system efficiency and stability.

MapView component (Javascript):
```js
import React, { useEffect } from "react";
import Map from "ol/Map.js";
import View from "ol/View.js";
import TileLayer from "ol/layer/Tile.js";
import OSM from "ol/source/OSM";
import "ol/ol.css";

function MapView() {
  useEffect(() => {
    const map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

    return () => {
      map.setTarget(null);
    };
  }, []);

  return <div id="map" style={{ width: "100%", height: "400px" }} />;
}

export default MapView;

```
The above code snippet will display a basic OpenStreetMap (OSM) like this:

![Full map render](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btr6ewt534izik14zo4f.jpg)

## Summary
In our review, we've explored OpenLayers, a tool designed for creating maps, and delved into its integration with React. Through this exploration, we've gained insights into showcasing maps on our web pages by combining OpenLayers with React.