Use The Power of Open Source Web GIS #1 How to Start?

4 min readMar 27, 2023

Geographic information systems or, in short, GIS is on a rising trend in the world. Many people may think of municipal applications or route planning when GIS is mentioned. Of course, these are basic GIS applications but little pieces of the GIS world.

If you check the applications you use daily, you can see that nearly all of them have map support. Facebook, Instagram, Twitter, all shopping applications, weather apllications etc. use maps differently. On the other hand “80% of All Information is Geospatially Referenced” is said by some researchers. (https://www.gislounge.com/80-percent-data-is-geographic)

If you are making software and using data, your data is probably valuable for use in GIS, so you should add map support to your applications and make your application more advanced. Also, please keep in mind that GIS will improve your application and make it more visually appealing.

Let’s get our hands dirty if you’ve decided to add GIS support to your app.

We have different choices for open source javascript map libraries.

OpenLayers (https://openlayers.org), Leaflet (https://leafletjs.com), or Mapbox (https://www.mapbox.com/mapbox-gljs) are some great libraries. But I continue with MapLibre (https://maplibre.org). MapLibre originated as an open-source fork of mapbox-gl-js.

I assume that you are familiar with javascript and HTML. It is not necessary for you need to know them advanced, but you need to know them at the basic level.

I start and continue with node application and react.js. In this story, we create a basic node application and add a map to this application. In the following stories, I improve this application step by step. Of course, I publish this project in my GitHub account. (https://github.com/utahemre)

First, we need node.js. If you have not installed node.js, download it from the official site (https://nodejs.org/en/download) and select your installer, depending on your operating system. After installation, you can check from the command line with the followings;

node -v 
npm -v 
npx -v

If you see the versions, you have installed node.js successfully.

After installing node.js, let’s create an empty react application. I am going to use create-react-app (https://create-react-app.dev/docs/getting-started) to create my app.

In the command line, I type “npx create-react-app maplibre-gl-example-project” to create my project.

After creating my project, I open my project in Visual Studio Code. Of course you can use different ides or editors but I recommend you to use VS Code. It is really cool editor for node.js projects. If you want to use, you can download from (https://code.visualstudio.com)

In VS Code, click “open folder” when opening IDE and select your project folder. After opening your project, in the view menu, click terminal. Then we can use the terminal inside VS Code. Type “npm start” in the terminal to start your node server. The server starts on localhost:3000. If you see this in the browser, your project is ready.

Let’s add our first map to the project. Before starting, I stop the server with Ctrl+C and run “npm install — save maplibre-gl”. This command will add maplibre packages. Then, I run “npm start” again.

I am going to follow some simple steps in (https://maplibre.org/maplibre-gl-js-docs/api). First add css link to my .html file. In the public folder there is index.html file. I simplified the file and add the following

to head. The version may change over time. Now index.html looks like this;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
    <title>MapLibre Gl Example Project</title>
  </head>
  <body>
    <div id="root" style="width :100%;height:100%"></div>
  </body>
</html>

After that I create a folder named components in src folder and inside, I create simple react component for my Map (Map.js). My component looks like this;

import { useEffect } from "react"
import maplibregl from 'maplibre-gl';

const Map = () => {
    useEffect( () => {
        const map = new maplibregl.Map({
            container: 'map',
            style: 'https://demotiles.maplibre.org/style.json', // stylesheet location
            center: [34, 40], // starting position [lng, lat]
            zoom: 4// starting zoom
            });
    }, []);

    return (
        <div id='map' style={{width: "100%", height: "100%"}}></div>
    )

}
export default Map;

I use my Map component in App.js. My App.js looks like this;

import './App.css';
import Map from './components/Map';

function App() {
  return (
    <Map></Map>
  );
}

export default App;

At last I made minor changes to the css to make the map fullscreen (I like fullscreen maps) and index.css likes this;

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

html {
  width: 100%;
  height: 100%;
}

After I made these changes my page looks like this;

As you can see, I add my first map to my project. In my following stories I will do very different and fun things on my map.

Always be scout. Leave the code more clean than you found.

Use The Power of Open Source Web GIS #1 How to Start?

Written by Yunus Emre Özkaya