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 "Leaflet API reference").

## React and Leaflet

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

```nodejs
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 "Leaflet API: Map Creation"):
```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).
```
  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 "leaflet-react-functional-component")
Live Demo: [https://dietrichmax.github.io/leaflet-react-functional-component/](https://dietrichmax.github.io/leaflet-react-functional-component/ "React Leaflet Demo") 

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;
```


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

Prism.js is a compact, expandable syntax highlighter that was developed with modern web standards in mind.

To be able to use Prism.js with Next.js, the first thing you have to do is to add Prism.js to your project with

```npm install prismjs``` 

or

 ```yarn add prismjs```


Afterwards you need to import Prism.Js into all pages where you want code to be highlighted
I am for example importing it into a layout component which wraps the whole web app:

```js
 // in Layout.js
  import React,  { useEffect } from "react"
  const prism = require("prismjs")
  require('prismjs/components/prism-python');

  function Layout(props) {
    useEffect(() => {
      prism.highlightAll();
    }, []);
    
    // ...
  }
```

With this, all code tags are highlighted via a react hook. 
I also imported highlighting for Python because it's not included by default.

Now the only thing missing is the styling theme, which can simply be imported into ``` _app.js``` with

```js
 // in _app.js

  import "prismjs/themes/prism-tomorrow.css";
  
  export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />;
  }
```

Instead of 'prism-tomorrow' you could also import the [default](https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript "default")-one or for example `[prism-okaidia](https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript "prism-okaidia"). 

Have a look at [https://prismjs.com/download.html](https://prismjs.com/download.html "https://prismjs.com/download.html") to find all premade themes. Of course you can also create a custom theme.


CSS

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

Syntax Highlighting with Prism.js and Next.js
Max DietrichMax Dietrich

CSS

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

Syntax Highlighting with Prism.js and Next.jsMax DietrichMax Dietrich

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

Syntax Highlighting with Prism.js and Next.js
Max DietrichMax Dietrich