In this article I will explain how you can create a basic web map with Leaflet and React by using functional components without any third party packages. So i will strongly recommend to have a look at the [Leaflet API reference](https://leafletjs.com/reference.html).

## React and Leaflet

First of all you need a react app which you can create with:

```js
npx create-react-app leaflet-react
cd leaflet-react
```

Then you will need the Leaflet package which you can add with ```npm install leaflet``` or ```yarn add leaflet```.
After you have installed the package you can import it with ```import L from "leaflet"``` into your App.js. The import of the leaflet.css is also important because without it the map-tiles will be misplaced.

```js
import React, { useEffect } from "react";
import L from "leaflet";
import 'leaflet/dist/leaflet.css';

const App = () => {
  
    return (
    )
  };
  
export default App;
```

Now you can create the actual map by using the UseEffect hook:

```js
useEffect(() => {
  L.map("map", mapParams);
}, []);
```

The "map" parameter is the id of the html-element in which the map will be rendered. With mapParams you can passsome basic parameters as props for the Leaflet map. These parameters can just be created in a object [Leaflet API: Map Creation)](https://leafletjs.com/reference.html#map-factory):

```js
const mapParams = {
  center: [0, 0],
  zoom: 0,
  layers: [layer]
};
```

TileLayers with OpenStreetMap Data can be created with L.tileLayer(url, options) [(Leaflet API: TileLayer)](https://leafletjs.com/reference.html#tilelayer).

```js
  const layer = L.tileLayer(`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`, {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  });
```

Now you can create some basic css in js for the map container which makes the map fullscreen and will be passed as style props:

```js
const mapStyles = {
  width: "100%",
  height: "100vh"
 };
```

In the end you just need html element in which the map will be rendered:

```js
 return (
      <div>
        <div id="map" style={mapStyles} />
      </div>
    )
```

If you are curious how to add some more features like vector layers, some controls or markers have a look at the [Leaflet API Reference](https://leafletjs.com/reference.html) and much fun playing around with your Leaflet web map created with React and functional components. In case something didn't work out as expected you can just clone the following repositiory.

Github Repositiory: [https://github.com/dietrichmax/leaflet-react-functional-component](https://github.com/dietrichmax/leaflet-react-functional-component)
Live Demo: [https://dietrichmax.github.io/leaflet-react-functional-component/](https://dietrichmax.github.io/leaflet-react-functional-component/)

All code together:

```js
import React, { useEffect } from "react";
import L from "leaflet";
import 'leaflet/dist/leaflet.css';

const Map = () => {
    const mapStyles = {
        width: "100%",
        height: "100vh"
      };
      const layer = L.tileLayer(`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`, {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      });
  

    const mapParams = {
      center: [0, 0],
      zoom: 0,
      layers: [layer]
    };
     
    // This useEffect hook runs when the component is first mounted, 
    // similar to componentDidMount() lifecycle method of class-based
    // components:
    useEffect(() => {
        L.map("map", mapParams);
    }, []);
  
    return (
      <div>
        <div id="map" style={mapStyles} />
      </div>
    )
  };
  
  export default Map;
js

How to create web maps with Leaflet, React and functional components

2021-03-02 i started tracking my current location with [OwnTracks](https://owntracks.org/ "OwnTracks") and [Strapi](https://strapi.io/ "Strapi") ([How i constantly track my location and display a web-map with all the locations](/articles/constant-location-tracking-with-owntracks-strapi-and-visualizing-data-with-deckgl "How i constantly track my location and display a web-map with all the locations")) and created a [/map](/map "map with locations") which shows all the locations i have ever been to. Recently i reached one million datasets and unfortunately that means every user had to download about 50MB of location data before the map could be rendered. So i definitely needed a much faster solution and decided to render and serve server side some tiles which will be used to display the locations. In the end i built a tile-server following [Manually building a tile server (20.04 LTS)](https://switch2osm.org/serving-tiles/manually-building-a-tile-server-20-04-lts/ "Manually building a tile server (20.04 LTS)") with a custom Mapnik stylesheet.

In this article i want to show you how you can build your own Mapnik stylesheet for displaying any data from PostgreSQL/PostGIS.

The Mapnik stylesheet XML is not very handy but fortunately there are some tools which will help you to create one. After some research i decided to go with [TileMill](https://tilemill-project.github.io/tilemill/ "TileMill") which is an open source map design studio to design maps. It offers a simple UI and (more important) the possibility to export the created map-style as Mapnik stylesheet.

Actually i couldn't get the latest version running so i decided to go with TileMill v0.10.1 which offers anything you will need to create a stylesheet. At [https://tilemill-project.github.io/tilemill/docs/win-install/](https://tilemill-project.github.io/tilemill/docs/win-install/) you can download and install TileMill.

After you have installed TileMill you can create a new project and uncheck 'default data'. Otherwise TileMill will create some kind of basemap with a default style.

![tilemill_create_project.png](/uploads/tilemill_create_project_028d3d068a.png)

Now you will have to add some data to the project. Therefore you click on the layer button and add a new layer.

![tilemill_add_layer.png](/uploads/tilemill_add_layer_9bfeb33806.png)

Switch to the **PostGIS** tab and fill out ID, Connection, Unique key field, Geometry field and SRS. It's actually pretty straight forward. 
Keep in mind that TileMill doesn't like large datasets so i would recommend you to set some extent.

In SRS you have to specify the PROJ.4 projection string. If you don't it know a look at https://epsg.io/{epsg-code} where you will replace {epsg-code} with the epsg code of your coordinate system and scroll down to PROJ.4 where you can copy the projection string. 

![proj4.png](/uploads/proj4_2c3dab1b78.png)
Afterwards save the layer and the project. You won't see your data/features yet because you need to define some style for it. You can style the map with CartoCSS which is very similiar to CSS. For example i specified my layer id as locations and i am styling points so the CartoCSS properties could look like the following.

```
#locations {
   [vel >= 0] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }
   [vel >= 50] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }
   [vel >= 100] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }
}
```


With CartoCSS you can also dynamically style your features depending on some attribute values. For more information about CartoCSS have a look at [Styling data from TileMill](https://tilemill-project.github.io/tilemill/docs/crashcourse/styling/ "Styling data").

When you are happy with your style you can export if as Mapnik-XML and use if for example for your tile-server.

![tilemill_export_mapnik_xml.png](/uploads/tilemill_export_mapnik_xml_2d50702c3b.png)
 
At [/map](/map) you can see my current stylesheet in 'action'.
 

How to create a Mapnik stylesheet for displaying any data from PostgreSQL/PostGIS

Inspired by Aaron Parecki who has been [tracking his location since 2008](https://aaronparecki.com/gps/ "location tracking") with an iPhone app ([Overland](https://overland.p3k.app/ "Overland")) and a server side tracking API ([Compass](https://github.com/aaronpk/Compass "Compass")), i decided to go for a similar approach.

I wanted to track my position constantly with my Android smartphone, save the data to a Postgres database and use the data to display an map with all locations i have ever been to.

To be able to track my position i needed an stable android app and after some tinkering around with different tracking apps i found [OwnTracks](https://owntracks.org/ "OwnTracks")  which basically has all i need (and a good [documentation](https://owntracks.org/booklet/ "OwnTracks Documentation") of it).

## OwnTracks

> The OwnTracks app runs in the background on your Android or iOS device and waits for the smart phone to tell it that the device has moved, whereupon OwnTracks sends out a message with its current coordinates (and a few other things we'll discuss in a moment).

With different settings for the app i could tailor the app exactly to my needs because i wanted the app to check my position every second and when i have moved more than two meters from my last known position it should send a POST-Request to my Strapi instance which will store the location data in a Postgres database.

In the following screenshot you can see the settings i am using for OwnTracks.

![Screenshot_OwnTracks settings.jpg](/uploads/Screenshot_Own_Tracks_settings_c7d95a33be.jpg)

The most important seetings for me are the mode **Significant location change mode**, **locatorDisplacement**, **locatorInterval**, **ignoreInaccurateLocations** and the **url** for the POST-request..

The **significant location change mode** is a mode which will let you decide in which interval you want to track your position. I am using the **locationInterval** '1' which will track my position every second with an **LocatorDisplacement** of 2 which will check if i moved away two meters away from my last known position. If i did it will send an POST-request with the location data to the given url if the position data isn't more inaccurate than 100 meters.

Because the app has to run always in the background you probably have to switch off energy saving modes for your smartphone which might disable the background functionality. 
Be warned: You probably will have to charge your smartphone more often. Also sometimes the app has some tracking error if you are using parallel some other tracking app for example for activities like strava.

The url for the POST-request is an strapi API url which looks like https://strapi.url/locationEndpoint. Strapi will then automatically handle the request and store the data in whatever database and table you have configured for Strapi. 

I am using the following attributes where the most important are **lat** (latitude), **lon** (longitude) and **alt** (altitude).

![Screenshot Location Table.png](/uploads/Screenshot_Location_Table_eee78ddafe.png)

I am also saving the velocity, battery level of the smartphone and some more data which will be displayed at my [/now](/now "/now") page. The velocity and altitude are quite inaccurate though which probably also depends on the smartphone.

## Web-Map

**Edit 25.01.2022:** 
Recently i switched to a server side approach to visualise the data because rendering about one million points on client side takes way too long. So i built a tile server which is serving PNG-tiles with the location data. Right now the [/map](/map) is created with OpenLayers.

If you are curious how you can set up a tile server which is serving data from Postgres with Mapnik, Apache and Nginx you can skip the following content and head directly to the article [Manually building a tile server (20.04 LTS)](https://switch2osm.org/serving-tiles/manually-building-a-tile-server-20-04-lts/ "Manually building a tile server (20.04 LTS)") and follow all steps except **Stylesheet configuration** because in the Mapnik stylesheet you have to create your custom style and a connection with your PostgreSQL table where your data is stored. See [How to create a Mapnik Stylesheet for displaying any data from PostgreSQL/PostGIS](/articles/how-to-create-a-mapnik-stylesheet-for-displaying-any-data-from-postgre-sql-post-gis "How to create a Mapnik Stylesheet for displaying any data from PostgreSQL/PostGIS").

If you only want to render some 'small' amount of data you can continue with the following.

At the beginning i rendered the data on client side with deck.gl. The following steps describe how to display data from PostgreSQL with deck.gl and Next.js (which is outdated for the /map page).

Due to the fact that amount of data is growing and growing i use [Prisma](https://www.prisma.io/ "Prisma") to get the data directly from postgres. If i would use the methods provided by Strapi it takes quite some time to generate the page with the map.

At the moment the [/map](/map "/map") page is built very simple:

```js
import Layout from '@/components/layout/layout'
import SEO from '@/components/seo/seo'
import Title from '@/components/title/page-title'
import styled from 'styled-components';
import media from 'styled-media-query';
import { getLocationsCount } from "@/lib/data/external/cms"
import prisma from '@/lib/utils/prisma'
import dynamic from 'next/dynamic'

const Livemap = dynamic(
  () => import('@/components/maps/deckgl/livemap'),
)

const MapContainer = styled.div`
  margin: auto;
  max-width: 1200px;
  padding: var(--space);
  ${media.lessThan('medium')`
    padding: var(--space-sm);
  `}
`

const Description = styled.p`
  max-width: 1200px;
  margin: auto;
  padding: 0 var(--space) var(--space) var(--space);
  ${media.lessThan('medium')`
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  `}
`

const InternalLink = styled.a`
  color: var(--text-color);
  border-bottom: 1px solid var(--thirdy-color);
  cursor: pointer;
  :hover {
    border-bottom: 1px solid transparent;
  }
`

export default function Map({ locations, locationsCount } ) {

  
  return (
    <Layout>
  
      <SEO   
        title="Map"
        slug="map"
      />
      <Title>Map</Title>
      
      <MapContainer>
        <Livemap data={locations} />
      </MapContainer>
      <Description>
        Since 2021-03-02 i am tracking my current location. Right now there are {locationsCount} locations displayed on the map. 
        The map is always centered at my last known position.
      </Description>
      <Description>
        If you are curious how that works have a look at the article <InternalLink href="/articles/how-i-track-my-location-and-display-the-data-on-my-website" title="How i track my location and display the data on my website">How i track my location and display the data on my website</InternalLink> where i am describing the details behind it.
      </Description>    
    </Layout>
  )
}

export async function getStaticProps() {
  const locationsCount = (await getLocationsCount()) || []
  
  const locations = await prisma.locations.findMany({
    select: {
      lat: true,
      lon: true,
      alt: true,
      vel: false,
    },
  });

  return {
    revalidate:  86400,
    props: {
      locations,
      locationsCount
    }
  }
}
  

```

Everyday it fetches all the location data and passes it to the map-component.

Performance wise i made some bad experience with the default mapping libraries Leaflet and OpenLayers because of the client side rendered data but after some research i decided to go with [deck.gl](/https://deck.gl/ "deck.gl") which is made for visualizing large scale datasets.

```js
import React, { useState } from 'react';
import {StaticMap, LinearInterpolator, WebMercatorViewport} from 'react-map-gl';
import DeckGL from '@deck.gl/react';
import {ScatterplotLayer} from '@deck.gl/layers';
import styled from 'styled-components'

const MapContainer = styled.div`
    position: relative;
    height: 600px;
`


export default function Livemap({
  data,
}) {
    const [viewport, setViewport] = useState({
        longitude: data.slice(-1)[0].lon,
        latitude: data.slice(-1)[0].lat,
        zoom: 12,
        bearing: 0,
        pitch: 0,
    });


    const layers = [
        new ScatterplotLayer({
          id: 'scatter-plot',
          data,
          opacity: 0.1,
          stroked: false,
          filled: true,
          radiusScale: 3,
          radiusMinPixels: 0.65,
          getPosition: d => [d.lon, d.lat, 0 /*d.alt*/],
          getFillColor: d => [Math.sqrt(d.vel*20), 184, 50],
        })
    ];

    
    
    return (
        <MapContainer>
            <DeckGL layers={layers} initialViewState={viewport} controller={true}>
                <StaticMap 
                    reuseMaps 
                    mapStyle="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json" 
                    preventStyleDiffing={true} 
    
                />
            </DeckGL>
        </MapContainer>
  )
}

```

I am using an scatterplot layer which will render every location as point and adjusts the color based on the velocity. The viewport is always centered at the last known location and as basemap i am using dark-matter for the both dark and light mode. 

You can find more information about the deck.gl map at the [deck.gl scatterplot example](https://deck.gl/examples/scatterplot-layer/).

How i constantly track my location and display a web-map with all the locations

With getting into the [IndieWeb](https://indieweb.org/ "IndieWeb") i started to reflect about myself and how i can actually own my data instead of giving them to so called [silos](https://indieweb.org/silo "silos").

Due to the fact I am a passionate (mountain) bike rider i was thinking about how i could use tracking/activity apps in a way to get my data back, because obviously when i am going for a ride with my bike and i am tracking the route with strava and/or komoot the data is then saved by them.
Considering that every route is tracked on a Garmin device anyway and then synchronised to the apps i decided to have a look at the Garmin Connect/Activity API.

Unfortunately the [official Garmin Activity API](https://developer.garmin.com/gc-developer-program/activity-api/ "Garmin Activity API") is only available for approved business developer.

But after some searching i found the npm-package [garmin-connect](https://github.com/Pythe1337N/garmin-connect "garmin-connect") which allows you to connect to Garmin Connect for sending and receiving activity data.

## Fetching and storing activities from Garmin Connect with Strapi

You can install the package with
```js
npm install garmin-connect
```
or

```js
yarn add garmin-connect
```
and use it like
```js
const { GarminConnect } = require('garmin-connect');
// Create a new Garmin Connect Client
const GCClient = new GarminConnect();
// Uses credentials from garmin.config.json or uses supplied params
await GCClient.login('my.email@example.com', 'MySecretPassword');
const userInfo = await GCClient.getActivities());
```
I stored the email and the password for the login in environment variables and used them with 
```js
const { GarminConnect } = require('garmin-connect');
const GCClient = new GarminConnect();
await GCClient.login(process.env.GARMIN_EMAIL ,process.env.GARMIN_PWD);
const userInfo = await GCClient.getActivities());
```

Afterwards experimented a bit with the Garmin Connect and found out there are some very low limits. 
Approximately after ~50 requests in one minute couldn't get anymore any data and had to wait for some (maybe one?; i am not sure) hours until the request was successful again.

In general you can probably do way more with Garmin Connect as you will need, like for example:
- Get user info
- Get social user info
- Get heart rate
- Set body weight
- Get list of workouts
- Add new workouts
- Add workouts to you calendar
- Remove previously added workouts
- Get list of activities
- Get details about one specific activity
- Get the step count

I used only ```GCClient.getActivities();``` to get all activities and and  ```GCClient.getActivity({ activityId: id });``` to get the details of the activity (like spatial data representing the route, start-point and end-point).

To be able to store the data in Strapi i created a new content type collection  **activities** with the following fields/attributes:

![content-type-activity.png](/uploads/content_type_activity_3b64fb0368.png)

Afterwards new entrys for activities can be created.

> Strapi has a documention which explains how to fetch external data and create entries with it: [Fetching external data](https://strapi.io/documentation/developer-docs/latest/guides/external-data.html#call-the-function "Fetching external data").

To get the data from Garmin Connect into Strapi i created a function ```getGarminConnectActivities.js```  for Strapi ([/config/functions/getGarminConnectData.js](https://github.com/dietrichmax/mxd-codes-backend/blob/master/config/functions/getGarminConnectData.js "getGarminConnectActivities.js"))

The function will take care of:
- getting existing activities in Strapi,
- get recent activites from Garmin Connect,
- checking if an activity already exists in Strapi,
- creating the activity in Strapi if it doesn't exist yet and also get the details for it.

and basically looks like this:
```js
module.exports = async () => {
  await GCClient.login(process.env.GARMIN_USERNAME, process.env.GARMIN_PWD)
  const activities = await GCClient.getActivities()
  const exisitingActivities = await getExistingActivities()
  activities ? activities.map((activity) => {
    const isExisting = exisitingActivities.includes(activity.activityId)
    isExisting ? console.log(activity.activityId + " already exists") : createEntry(activity)
  })
  : console.log("no activities found")
}
```

After all activities from Garmin are fetched, i am mapping through them to

- check if they already exist in my cms
- and create them if needed

The exisiting activities in my CMS  are fetched with
```js 
const getExistingActivities = async () => {
  const existingActivityIds = []
  const activities = await axios.get(`https://strapi.url/activities`)
  
  activities.data.map((activity) => {
    existingActivityIds.push(activity.activityID)
  })
  return existingActivityIds
}
```
and the activityIds (originally from Garmin Connect) are returned to be able to check if an entry already exists.
If the entry doesn't exist, details for the missing activity are fetched and a new entry is created with:

```js
const createEntry = async (activity) => {
  const details = await GCClient.getActivity({ activityId: activity.activityId });
  await strapi.query('activity').create({
    activityID: activity.activityId,
    activityName: activity.activityName,
    beginTimestamp: activity.beginTimestamp,
    activityType: activity.activityType,
    distance: activity.distance,
    duration: activity.duration,
    elapsedDuration:  activity.elapsedDuration,
    movingDuration: activity.movingDuration,
    elevationGain: activity.elevationGain,
    elevationLoss: activity.elevationLoss,
    minElevation: activity.minElevation,
    maxElevation: activity.minElevation,
    sportTypeId: activity.sportTypeId,
    averageSpeed: activity.averageSpeed * 3.6 //(m/s -> km/h),
    maxSpeed: activity.maxSpeed * 3.6 //(m/s -> km/h),,
    startLatitude: activity.startLatitude,
    startLongitude: activity.startLongitude,
    endLatitude: activity.endLatitude,
    endLongitude: activity.endLongitude,
    details: details
  })
}
```

You can save way more but i tried to cut it down to the ones i really need or eventually will need.

Only thing missing is some automatic triggering. For this you can use cron jobs in Strapi ([/config/functions/cron.js](https://strapi.io/documentation/developer-docs/latest/guides/external-data.html#call-the-function "cron.js")).

```js
module.exports = {
// Add your own logic here (e.g. send a queue of email, create a database backup, etc.).

    '0 0 18 * * *': () => {
      strapi.config.functions.getGarminConnectActivities();
    },
};
```

I decied to trigger the function everyday at 6 pm so i can have a look at my activites in the evening. 😎

Thats the fun from the 'backend part'.

Next step is to visualize the data in NextJS.

## Visualizing the data with NextJS

I am really liking the embeddable tours of [komoot](https://www.komoot.de/b2b/embed "komoot embed") optic-wise, so i decided to create a similiar looking option for the preview of my activities in the [posts-feed](/ "all posts") and [activites-feed](/activities).

So the preview should consist of
- an title of the activitie (+datetime),
- an symbol displaying the activity type (cycling, running, etc.)
- some basic metrics like distance, duration and average speed,
- a map displaying the line of the route with osm-data and and aerial-view,
- and optionally a graph displaying the elevation along the track (still in work).

The component looks like this at the moment:
![activity-post-preview.png](/uploads/activity_post_preview_eeca5a51b1.png)

### Showing some Metrics

In the **activityType** object you can find ```typeId``` which correlates to the type of the activity, e.g. cycling, running etc.
I created a small function which will return a icon from [react-icons](https://github.com/react-icons/react-icons "react-icons") visualizing the activity type.

``` js
import { FaRunning, FaBiking } from 'react-icons/fa';

const getTypeIcon = activity => {
    if (activity.activityType.typeId == 5) {
        return <FaBiking/>
    } else if (activity.activityType.typeId == 15) {
      return <FaRunning/>
 }

getTypeIcon(activity)
```

Due to the fact the duration is given in seconds and i wanted it to display like 1h 10m 12s there is also a need for a workaround which looks like the following:
```js
const secondsToHms = (s) => {
    const hours = (((s - s % 3600) / 3600) % 60)
    const minutes = (((s - s % 60) / 60) % 60)  
    const seconds = (s % 60)  
    return (`${hours}h ${minutes}min ${seconds}s`)
 }
secondsToHms(activity.duration)
```

### Displaying  a Map with "react-leaflet"

Then i created a small map with [react-leaflet](https://react-leaflet.js.org/ "react-leaflet") displaying 
- the track as polyline,
- the start point and
- the end point.

Therefore i created a new map-component:
```js
import React, { useEffect, useState } from "react"
import { Marker, MapContainer, TileLayer, LayersControl, Polyline } from "react-leaflet";

const Map = (data) => {
  const geo = data.data
  const style= { 
    color: '#11a9ed',
    weight: "5"
  }

  const bounds = [[geo.maxLat, geo.maxLon], [geo.minLat, geo.minLon]]
  return (
    <MapContainer
      style={{ height: "500px", width: "100%" }}
      bounds={bounds}       
      scrollWheelZoom={false}
    >
    <LayersControl position="topright">
      <LayersControl.BaseLayer checked name="OpenStreetMap.Mapnik">
        <TileLayer 
          url='https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'
          attribution ='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'

        />
        </LayersControl.BaseLayer>
        <LayersControl.BaseLayer name="Esri World Imagery">
          <TileLayer
            attribution='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP'
            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
          />
        </LayersControl.BaseLayer>

        <Marker id="start" position={geo.startPoint}/>
        <Polyline pathOptions={style} positions={geo.polyline} />
        <Marker id="end" position={geo.endPoint}/>

      </LayersControl>
    </MapContainer>
  );
};

export default Map;
``` 
Luckily the data from the Garmin Connect has already exactly the structure we need to create the map, which are the coordinates for the polyline and the two points.

The coordinates can be found in **geoPolylineDTO** in the activitydetails 

![activity-details.png](/uploads/activity_details_a6d325373e.png)

With maxLat, maxLon, minLat and minLon i created the bounds which will set the default view for the map when passed to the MapContainer.
```js
const bounds = [[geo.maxLat, geo.maxLon], [geo.minLat, geo.minLon]]

<MapContainer
      style={{ height: "200px", width: "100%" }}
      bounds={bounds}       
      scrollWheelZoom={false}
 >
.
.

```
Then i added the LayerControl to be able to toggle between the two Tilelayers
- OSM (Carto) and
- Aerial Image (Esri)

After that i just created two markers and a polyline with the exisiting objects ```startPoint```, ```endPoint``` and ```polyline```.
```js
.
.
        <Marker id="start" position={geo.startPoint}/>
        <Polyline pathOptions={style} positions={geo.polyline} />
        <Marker id="end" position={geo.endPoint}/>
.
.
```

You can find several other tilelayers in [leaflet-providers-preview](/leaflet-extras-github/leaflet-providers/preview/ "leaflet-providers-preview").

For an example of the preview head over to [/activities](/activities  "activitites").
You can find the code for the [activity-preview](https://github.com/DaTurboD/mxd-codes-frontend/blob/v2/components/activity/activity-preview/activity-preview.js "activity-preview") in my github-repositiory.

For the actual post of the activity i made the map a bit larger and added some more metrics for now.

(osm)
![activity-post.png](/uploads/activity_post_bd91b407f4.png)

(Aerial view)
![activity-post-aerial.png](/uploads/activity_post_aerial_11e09d89bf.png)



Fetching and storing activities from Garmin Connect with Strapi and visualizing them with NextJS

## What is OpenLayers?

[OpenLayers](https://openlayers.org/) is a JavaScript library that makes it relatively easy to visualize geodata in web applications (Web-GIS).

OpenLayers is a programming interface that allows client-side development independent of the server. Map tiles, vector data and markers from various data sources can be displayed.

Open Layers was developed to promote the use of [geodata](/en/gis/geodata-what-are-geodata "What are geodata?") Of all kinds. OpenLayers is also free, open-source and is published under "2-clause BSD License".

To be able to create a map with OpenLayers, all you need is a basic general knowledge of programming languages. The missing pieces of the puzzle can be found very easily using the detailed documentation on OpenLayers.

## Create HTML file

First of all, an HTML file is required as the basic framework. The basic structure usually looks like this:

```html
    <html>
      <head>
        <title>OpenLayers Demo</title>
      </head>
      <body>
      </body>
    </html>
```

You can now copy this code and paste it into a file that you name, for example, "jsmap.html".

_If you want to learn more about HTML, you can find a few useful tutorials on [w3schools](https://www.w3schools.com/html/)._

## Insert OpenLayers Javascript library

Now the OpenLayers Javascript is integrated into the HTML. You copy for that

```html
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
```

between `<title>` and `<head>`. You can do that right away

```js
          function init() {
            map = new OpenLayers.Map("basicMap"); //create a new map
            var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview
            map.addLayer(mapnik); //add the OSM layer to the map

    		var markers = new OpenLayers.Layer.Markers( "Markers" ); //add a layer where markers can be put
    		map.addLayer(markers); //add the markers layer to the current map

    		var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84
              .transform(  //transform the location to the coordinate system of our OpenLayers map
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
            );
    		markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer

            map.setCenter(lonLat, 15); // Use maker to center the map above and set zoom level to 15
          }
```

also included in script tags. Here a function with the name init is created, the

* which creates the map and inserts it in the element "basicMap"
* created a layer with [OpenStreetMap](https://www.openstreetmap.org/#map=6/51.330/10.453) data and added it to the map
* creates a layer for markers and also adds this to the map
* Defined a marker in WGS84 and then transformed it from WGS1984 to Spherical Mercator Projection
* add this marker to the map
* and finally centered the map on this marker and set a zoom level.

Now this function must also be loaded and the card placed. For that you are replacing now

```html
    <body>
      </body>
```

with

```html
    <body onload="init();">
        <div style="width: 100%; height: 60%;" id="basicMap"></div>
    </body>
```

With `javascript onload =" init (); `the function is executed when loading the HTML file and inserted via the id` id = "basicMap" `.

Your complete file should now look like this:

```html
    <html>
      <head>
        <title>OpenLayers Demo</title>
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script>
          function init() {
            map = new OpenLayers.Map("basicMap"); //create a new map
            var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview
            map.addLayer(mapnik); //add the OSM layer to the map

    		var markers = new OpenLayers.Layer.Markers( "Markers" ); //add a layer where markers can be put
    		map.addLayer(markers); //add the markers layer to the current map

    		var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84
              .transform(  //transform the location to the coordinate system of our OpenLayers map
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
            );
    		markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer

            map.setCenter(lonLat, 15); // Use maker to center the map above and set zoom level to 15
          }
        </script>
      </head>
      <body onload="init();">
        <div style="width: 100%; height: 60%;" id="basicMap"></div>
      </body>
    </html>
```

If you save the file and open it, you will end up in the browser of your choice and your Javascript web map will be displayed with OpenLayers.

If you now want to change the position of the marker, all you have to do is change the coordinates.

## Create markers with a 'for .. of ..' loop

Normally, you often want to display several points and not just one on the map.
In theory you could

```js
    var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84
              .transform(  //transform the location to the coordinate system of our OpenLayers map
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
            );
        markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer
```

now copy for each additional marker you want to create and simply change the coordinates. But since the whole thing becomes relatively confusing, we will solve it differently.

First, we create an array of arrays.

```js
    var poi = [ // create array with point of interests
    			[ 11.557617 ,48.092757 ],
    			[ 8.558350, 50.028917 ],
    			[ 6.701660, 51.289406 ],
    			[ 13.337402, 52.496160 ]
          ];
```

All coordinates for the markers to be displayed are now stored in this array. Now we create a function that can be called to create markers and add them to the map.

```js
    function createmarker (lon,lat) {
    				var feature = new OpenLayers.LonLat( lon, lat ) // create features (locations) out of arrays in points
    						.transform(  //transform the location to the coordinate system of our OpenLayers map
    							new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
    							map.getProjectionObject() // to Spherical Mercator Projection
    						);
    				markers.addMarker(new OpenLayers.Marker(feature)); // Add new features to markers layer
          }	
```

This function should now be carried out for each pair of coordinates in the "poi" array. This can be solved with a "for .. of" loop.

```js
    for (var x of poi) { // for each array(object) in array 
    				createmarker (x[0],x[1]) // create markers
    			}
```

In this loop, a marker is now created for each coordinate pair in the array, transformed and added to the map. The "poi" array can now be expanded as required and the additional markers are automatically added to the map.

## Add markers via UI

In order to make the whole thing more user-friendly and not having to change the code manually every time, we are now creating a simple user interface to add additional markers.

The new coordinates should be entered via two input fields and created with a confirmation on a button.

The HTML framework can look like this and should be placed somewhere in the "body" area:

```html
    <div class="add_markers">
    	<div class="input_markers">	
    	  Add new markers with coordinates in WGS84!
    		<div class="row">
    			<div class="col-25">
    				<label for="lat">Latitude:</label>
    			</div>
    			<div class="col-75">
    				<input type="text" id="lat" name="firstname" placeholder="48.060614">
    			</div>
    		</div>
    		<div class="row">
    			<div class="col-25">
    				<label for="lon">Longitude:</label>
    			</div>
    			<div class="col-75">
    				<input type="text" id="lon" name="lastname" placeholder="12.190876">
    			</div>
    		</div>
    		<button id="add_marker" class="button">Add marker!</button>
    		<div id="poi_added" class="poi_added"></div>
    	</div>
    </div>
    </div>
```

The most important here are the ids via which the values of the fields are later adopted.

To create these markers we use a function that is called every time the button "Add Marker!" is clicked.

The complete function looks like this:

```js
    function addFeature() {
    			  var lat = parseFloat(document.getElementById("lat").value); // get value of input lat and parse to float
    			  var lon = parseFloat(document.getElementById("lon").value); // get value of input lon and parse to float

    			  var newFeature = [ lon, lat ] // create array "newFeature" with lon , lat
    			  poi.push(newFeature) // add NewFeature to array "poi"

    			  createmarker (lon,lat) // create marker for input lat, lon  
    			  document.getElementById('poi_added').innerHTML = "Added marker for " + "latitude: " + lat + "; longitude: " + lon; // visual feedback for added marker
    			}
```

```js
    var lat = parseFloat(document.getElementById("lat").value); // get value of input lat and parse to float
    var lon = parseFloat(document.getElementById("lon").value);
```

Are references to the elements with the ID "lat" and "lon", ie the two input fields. Here the two variables "lat" and "lon" are created, to which the value from the input fields is assigned.

Then they are merged into an array, since a marker always consists of two coordinates and is added to the "poi" array.

```js
    var newFeature = [ lon, lat ] // create array "newFeature" with lon , lat
    poi.push(newFeature) // add NewFeature to array "poi"
```

Adding it to the "poi" array is not functionally necessary, but it can be useful if, for example, you want to create popovers that show the coordinates of each marker.

The coordinates are now saved in "lat" and "lon" and they only have to be transferred to the previously created function "createmarker", which creates the markers and adds them to the map.

```js
    createmarker (lon,lat) // create marker for input lat, lon  
```

It would be nice if the user received feedback about what happened after clicking the button. This can be done with

```js
    document.getElementById('poi_added').innerHTML = "Added marker for " + "latitude: " + lat + "; longitude: " + lon; // visual feedback for added marker
```

The last thing that is missing is that the function is executed with a click on the button.

```js
    document.getElementById('add_marker').addEventListener('click', addFeature); // execute function "addFeature" when button with id "add_marjer" is clicked
```

As soon as the button with the id "add_marker" is clicked, the "addFeature" function is now executed.

With

```js
    var extent = map.zoomToExtent(markers.getDataExtent()); // get extent of markers layer
```

the extent of the "markers" layer is determined, zoomed onto it and assigned to the variable extent.

If you now save and open your file again, you should see your map with all markers and be able to add additional markers via a graphical user interface.


```html
    <html>
      <head>
        <title>OpenLayers Demo</title>
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script>
    		function init() {
    			map = new OpenLayers.Map("basicMap"); //create a new map
    			var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview
    			map.addLayer(mapnik); //add the OSM layer to the map

    			var markers = new OpenLayers.Layer.Markers( "Markers" ); //add a layer where markers can be put
    			map.addLayer(markers); //add the markers layer to the current map

    			function createmarker (lon,lat) {
    				var feature = new OpenLayers.LonLat( lon, lat ) // create features (locations) out of arrays in points
    						.transform(  //transform the location to the coordinate system of our OpenLayers map
    							new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
    							map.getProjectionObject() // to Spherical Mercator Projection
    						);
    				markers.addMarker(new OpenLayers.Marker(feature)); // Add new features to markers layer
    			}	

    			var poi = [ // create array with point of interests
    			[ 11.557617 ,48.092757 ],
    			[ 8.558350, 50.028917 ],
    			[ 6.701660, 51.289406 ],
    			[ 13.337402, 52.496160 ]
          ];

    			for (var x of poi) { // for each array(object) in array 
    				createmarker (x[0],x[1]) // create markers
    			}

    			var extent = map.zoomToExtent(markers.getDataExtent()); // get extent of markers layer

    			function addFeature() {
    			  var lat = parseFloat(document.getElementById("lat").value); // get value of input lat and parse to float
    			  var lon = parseFloat(document.getElementById("lon").value); // get value of input lon and parse to float

    			  var newFeature = [ lon, lat ] // create array "newFeature" with lon , lat
    			  poi.push(newFeature) // add NewFeature to array "poi"

    			  createmarker (lon,lat) // create marker for input lat, lon  
    			  document.getElementById('poi_added').innerHTML = "Added marker for " + "latitude: " + lat + "; longitude: " + lon; // visual feedback for added marker
    			}

    			document.getElementById('add_marker').addEventListener('click', addFeature); // execute function "addFeature" when button with id "add_marjer" is clicked
    		}

    		//  popover coordinates markers 
        </script> 
    	<style>
      /*dein style*/
    	</style>
      </head>
      <body onload="init();">
    	<div id="wrapper"  >
    		<div style="width: 100%; height: 80%" id="basicMap"></div>
    			<div class="add_markers">
    				<div class="input_markers">	
    					Add new markers with coordinates in WGS84!
    					<div class="row">
    						<div class="col-25">
    							<label for="lat">Latitude:</label>
    						</div>
    						<div class="col-75">
    							<input type="text" id="lat" name="firstname" placeholder="48.060614">
    						</div>
    					</div>
    					<div class="row">
    						<div class="col-25">
    							<label for="lon">Longitude:</label>
    						</div>
    						<div class="col-75">
    							<input type="text" id="lon" name="lastname" placeholder="12.190876">
    						</div>
    					</div>
    					<button id="add_marker" class="button">Add marker!</button>
    					<div id="poi_added" class="poi_added"></div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
      </body>
    </html>
```

How to create a web-map with OpenLayers

## What is Leaflet?

[Leaflet](https://leafletjs.com/) is a free [JavaScript](/articles/topics/javascript) library which allows us to create web-[gis](/articles/what-is-gis-geographic-information-system "GIS") applications. Leaflet uses HTML5, CSS3 and is compatible with all common browsers.

As with OpenLayers, rasters and vector data from various data sources can be integrated.

## React and Leaflet

In this article I will go into more detail on how to use [react-leaflet](/github/PaulLeCam/react-leaflet) Components and how to use a web map

* Basic map ([OpenStreetMap](/osm/)),
* Data in GeoJSON format,
* Markers and
* Popup

created.

First of all you should of course install these components first and import them into a new file.

> Since Leaflet does not support server-side rendering, you have to install a small "workaround" if you want to use Leaflet with, for example, [Gatsby](https://www.gatsbyjs.com/).

When executing `gatsby build `a webpack error will appear since there is no" window "object yet, but Leaflet needs it. These errors are fixed by checking the window object of the page before the map component arrives.

```js
    import React from "react"
    import Helmet from "react-helmet";
    import Layout from "../../src/layout";
    import config from "../../data/SiteConfig";
    import { Map, TileLayer, Marker, Popup, GeoJSON } from "react-leaflet";
    import 'leaflet/dist/leaflet.css';
    import hash from 'object-hash';

    class WebMap extends React.Component {  
        constructor() {
        super();
        this.state = {
          markers: [[51.8, 9.0]],
          center: [50.97, 10.54],
          zoom: 5,
          color: '#3f51b5',
          weight: 5,
          opacity: 0.65,
        };
      }

        render() {

            const Style = {
              color: this.state.color,
              weight: this.state.weight,
              opacity: this.state.opacity,
            };

          return (

        <Layout>
                {typeof window !== 'undefined' &&
                    {/* Map Stuff*/}
                }
        </Layout>
        );
      }
    }

    export default WebMap;
```

The style object is used to define a style that defines how the GeoJSON data is displayed. The respective values for this style are, just like

* the coordinates for a marker
* Information about centering the map and
* the "default zoom"

defined as "state objects" variables or arrays.

## Basemap

Now the map component comes first with an OpenStreetMap as the base map.

```js
    <Map>
        <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
            url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
     </Map>
```

`<TileLayer>` creates a new tile-layer in the map and with `url='https://{s}.tile.osm.org/{z}/{x}/{y}.png`  openstreetmap is used with attribution `attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>`.

## Data in GeoJSON format

Adding geodata in GeoJSON is relatively simple. It is best to insert this into a function. This is then called up on the map.

```js
    function getGeoJSON() {
      return {
        "type":"GeometryCollection", "geometries": [
          {"type":"Polygon","coordinates":[[[6.000000248663241,56.000000155530984],[7.000000192318055,56.000000155530984],[8.000000135973096,56.000000155530984],[9.000000247266257,56.000000155530984],[10.000000190921071,56.000000155530984],[11.000000134576112,56.000000155530984],[12.000000245869273,56.000000155530984],[12.000000245869273,55.000000211876],[12.000000245869273,54.00000010058284],[12.000000245869273,53.00000015692797],[12.000000245869273,52.00000021327298],[12.000000245869273,51.00000010197982],[12.000000245869273,50.00000015832478],[12.000000245869273,49.00000004703179],[12.000000245869273,48.000000103376806],[11.000000134576112,48.000000103376806],[10.000000190921071,48.000000103376806],[9.000000247266257,48.000000103376806],[8.000000135973096,48.000000103376806],[7.000000192318055,48.000000103376806],[6.000000248663241,48.000000103376806],[6.000000248663241,49.00000004703179],[6.000000248663241,50.00000015832478],[6.000000248663241,51.00000010197982],[6.000000248663241,52.00000021327298],[6.000000248663241,53.00000015692797],[6.000000248663241,54.00000010058284],[6.000000248663241,55.000000211876],[6.000000248663241,56.000000155530984]]]}
          ]
      }
    }
```

The data is then inserted into the map component with the GeoJSON component.

```js
    <GeoJSON key={hash(getGeoJSON())} data={getGeoJson()} style={Style}/>
```

So that the data is always rendered you have to assign a "unique key". This "unique key" is generated with the function `hash (getGeoJSON ())`. The data is simply transferred in GeoJSO format with the style previously defined.

## Marker with popup

Markers can be inserted with the marker component.

```js
    {this.state.markers.map((position) => 
        <Marker 
            position={position}
        >
            <Popup>
                <pre>{position}</pre>
            </Popup>
        </Marker>
    )}
```

With the "map ()" method new arrays are created from the provided array. Since there is only one marker in the "markers" array, only one marker is created when the page is called up. This actual position or the coordinates are transferred as `{position}`.

In addition, the popup component for these markers creates a popup that shows the position.

The whole thing should now look like this:

```js
    import React from "react"
    import Helmet from "react-helmet";
    import Layout from "../../src/layout";
    import { Map, TileLayer, Marker, Popup, GeoJSON } from "react-leaflet";
    import "../components/Leaflet/map.scss";
    import hash from 'object-hash';

    class OnlineKoordinaten extends React.Component {    
        constructor() {
        super();
        this.state = {
          markers: [[51.8, 9.0]],
          center: [51.8, 9.0],
          zoom: 5,
          color: '#3f51b5',
          weight: 5,
          opacity: 0.65,
        };
      }

        render() {

            const Style = {
              color: this.state.color,
              weight: this.state.weight,
              opacity: this.state.opacity,
            };

          return (
        <Layout title="React-Leaflet-Demo">
          <div className="react-leaflet-demo-container">
                  {typeof window !== 'undefined' &&
                      <Map 
                      center={this.state.center} 
                      zoom={this.state.zoom} 
                      >
                      <TileLayer
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
                        url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
                      />
                      <GeoJSON key={hash(getGeoJson())} data={getGeoJson()} style={Style}/>
                      {this.state.markers.map((position) => 
                      <Marker 
                        position={position}
                      >
                        <Popup>
                        <pre>{position}</pre>
                        </Popup>
                      </Marker>
                      )}
                    </Map>
                  }
          </div>
        </Layout>
        );
      }
    }

    export default OnlineKoordinaten;

    function getGeoJson() {
      return {
        "type":"GeometryCollection", "geometries": [
          {"type":"Polygon","coordinates":[[[6.000000248663241,56.000000155530984],[7.000000192318055,56.000000155530984],[8.000000135973096,56.000000155530984],[9.000000247266257,56.000000155530984],[10.000000190921071,56.000000155530984],[11.000000134576112,56.000000155530984],[12.000000245869273,56.000000155530984],[12.000000245869273,55.000000211876],[12.000000245869273,54.00000010058284],[12.000000245869273,53.00000015692797],[12.000000245869273,52.00000021327298],[12.000000245869273,51.00000010197982],[12.000000245869273,50.00000015832478],[12.000000245869273,49.00000004703179],[12.000000245869273,48.000000103376806],[11.000000134576112,48.000000103376806],[10.000000190921071,48.000000103376806],[9.000000247266257,48.000000103376806],[8.000000135973096,48.000000103376806],[7.000000192318055,48.000000103376806],[6.000000248663241,48.000000103376806],[6.000000248663241,49.00000004703179],[6.000000248663241,50.00000015832478],[6.000000248663241,51.00000010197982],[6.000000248663241,52.00000021327298],[6.000000248663241,53.00000015692797],[6.000000248663241,54.00000010058284],[6.000000248663241,55.000000211876],[6.000000248663241,56.000000155530984]]]}
          ]
      }
    }
```
Demo:

<LeafletDemo/>

Now, for example, you could add a function that creates a new marker each time you click on the map.

Web-Mapping

How to create web maps with Leaflet, React and functional components
Max DietrichMax Dietrich

How to create a Mapnik stylesheet for displaying any data from PostgreSQL/PostGIS
Max DietrichMax Dietrich

How i constantly track my location and display a web-map with all the locations
Max DietrichMax Dietrich

Fetching and storing activities from Garmin Connect with Strapi and visualizing them with NextJS
Max DietrichMax Dietrich

How to create a web-map with OpenLayers
Max DietrichMax Dietrich

First steps with Leaflet and React
Max DietrichMax Dietrich

Web-Mapping

How to create web maps with Leaflet, React and functional componentsMax DietrichMax Dietrich

How to create a Mapnik stylesheet for displaying any data from PostgreSQL/PostGISMax DietrichMax Dietrich

How i constantly track my location and display a web-map with all the locationsMax DietrichMax Dietrich

Fetching and storing activities from Garmin Connect with Strapi and visualizing them with NextJSMax DietrichMax Dietrich

How to create a web-map with OpenLayersMax DietrichMax Dietrich

First steps with Leaflet and ReactMax DietrichMax Dietrich