All About OpenStreetMap (using React.js)

Team Project Made with OpenStreetMap

What is OpenStreetMap?

• An open source, collaborative project
• Free editable map of the world

Why use OpenStreetMap?

• Fully open source therefore free of charge (do not need to put a credit card down, as you do for GoogleMaps)
• Provides local knowledge (anyone can make edits), at a global level
• Continuously updated

What are the cons of using OpenStreetMap?

• Not as much documentation available (compared with GoogleMaps, some of the documentation is a little outdated)
• Fewer API’s available (in particular Routing API’s)

How to contribute to OpenStreetMap?

• Contributing to OpenStreetMap is very easy to do, simple instructions are available in this very well made youtube video

Simple Set-up for React App:

• Part of the instructions for setting up for setting up OpenStreetMap can be found here, however when first building it I found that it was missing a few points. Here is my simple breakdown.

1. Installation: Once you have your React App started add the following installations:

• npm install react react-dom leaflet
• npm install react-leaflet

2. Imports: Your main map container should be setup with the following imports.

import { MapContainer, TileLayer } from 'react-leaflet'

3. MapContainer: The map will render with the following code. In the MapContainer we specify the coordinates shown when the maps first loads, and the level of zoom. The TaileLayer will display the layers of the map.

<MapContainer center={[40.505, -100.09]} zoom={13} >
  
  <TileLayer
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
   />
</MapContainer>

4. App.css: CSS properties may very depending on app needs, however this is a good starting point.

.leaflet-container {
  width: 100%;
  height: 100vh;
  z-index: 1;
}

Marker & Popup:

It is also very simple to add markers, and pop-ups, additional documentation can be found here.

1. Imports: The first step is to add the following imports.

import { MapContainer, TileLayer, Marker, Popup  } from 'react-leaflet'

2. Popup with Marker: We then add the two components inside the MapContainer specifying the marker coordinates, and pop-up text.

<MapContainer center={[40.505, -100.09]} zoom={13} >
  
  <TileLayer
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
   />
 <Marker position={[40.505, -100.09]}>
      <Popup>
        I am a pop-up!
      </Popup>
  </Marker>
</MapContainer>

If you have multiple coordinates the result will look something like this….