Enzyklopädie

A B C D E F G H I J K L M N O P Q R S T U V W X Z
Rd Re
Rea Rec Ref Rel

React-leaflet

Basic Introduction

React Leaflet provides bindings between React and Leaflet. It does not replace Leaflet but leverages it to abstract Leaflet layers as React components.

React Leaflet uses React’s context API to make some Leaflet elements instances available to children’s elements that need it.

Each Leaflet map instance has its own React context, created by the MapContainer component. Other components and hooks provided by React Leaflet can only be used as descendants of a MapContainer.

Lifecycle process​

  1. The MapContainer renders a container <div> element for the map. If the placeholder prop is set, it will be rendered inside the container <div>.
  2. The MapContainer instantiates a Leaflet Map for the created <div> with the component properties and creates the React context containing the map instance.
  3. The MapContainer renders its children components.
  4. Each child component instantiates the matching Leaflet instance for the element using the component properties and context, and adds it to the map.
  5. When a child component is rendered again, changes to its supported mutable props are applied to the map.
  6. When a component is removed from the render tree, it removes its layer from the map as needed.

Installation

’npm‘ can be used to install React leaflet and its dependencies.

React, React DOM and Leaflet are required peer dependencies. We must add them to our project if they are not already installed:

npm install react react-dom leaflet

Then we can install React Leaflet:

npm install react-leaflet

Modules can then be imported using bare specifiers when supported by a bundler such as webpack

import { MapContainer } from ‚react-leaflet/MapContainer‘
import { TileLayer } from ‚react-leaflet/TileLayer‘
import { useMap } from ‚react-leaflet/hooks‘

Alternatively, all the components and hooks can be imported from the module entry-point:

import { MapContainer, TileLayer, useMap } from ‚react-leaflet‘

Setup

Use the following code:

<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution=’&copy; <a href=“https://www.openstreetmap.org/copyright“>OpenStreetMap</a> contributors‘
url=“https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png“
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>

Result

 

 

Example to visualize multiple locations with markers

 

return (
    <div style={{ height: ’50px‘ }} id=“map“>
      <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
        <TileLayer
          attribution=’&copy; <a href=“https://www.openstreetmap.org/copyright“>OpenStreetMap</a> contributors‘
          url=“https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png“
        />
        {
          markerData.features.map((data) => {
            return (
              <Marker position={[data.geometry.coordinates[1], data.geometry.coordinates[0]]}>
                <Popup>
                  {data.properties.country}
                </Popup>
                <Polyline
                  positions={mapData}
                />
              </Marker>
            )
          })
        }
        <LocationMarker />
      </MapContainer>
    </div>
  );

Output

 

Still having trouble? Use the react-leaflet tag on Stack Overflow. 😉

 

 

 

 

React.js frontend und PHP backend

https://www.techvariable.com/blog/integrating-react-js-into-a-php-application/

„Now can we use React js with Php ?

Yes. This is possible. Reactjs is just the ‘V’ in MVC. React doesn’t care what you are using at backend. One can render React’s components on server side in PHP using V8Js PHP extension, but this is not necessary. Server side rendering in Reactjs is optional. Here are some things you can do:
1. Compile your whole reactjs JSX code using babel. It would be better if you make use of some module bundler like webpack and compile your reactjs code into a single file. Upload that single file on your server.
2. You can populate default states in your react code using php.
The best way to use PHP as backend with React Js as front end is to keep both seperate. Make a stand alone front-end and use PHP to create APIs which interacts with the database. Then consume the API through HTTP AJAX or whatever mechanism React Js contains.„