CODEWITHSUNDEEP
javascriptreactjsleafletreact-leaflet
Pizhev Racing
Pizhev Racing

Reputation: 486

How to display more data on Marker PopUP in leaflet ReactJS

Have two arrays coords and popUPs Use Leaflet and display on data from the first array.

I Want to know how to display on data from first and the second array ?

On the console.log I see the data from the second array, but I don't know how to input in the other map function.

Code:

import React from "react";
import { Map as LeafletMap, TileLayer, Marker, Popup } from "react-leaflet";
import L from "leaflet";

const customMarker = new L.Icon({
  iconUrl: "https://unpkg.com/browse/[email protected]/dist/images/marker-shadow.png",
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40]
});

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
 coords: [
        { lat: 41.19197, lng: 25.33719 },
        { lat: 41.26352, lng: 25.1471 },
        { lat: 41.26365, lng: 25.24215 },
        { lat: 41.26369, lng: 25.33719 },
], 
 popUPs: [
        { station: 1010, city: 'Ново село' },
        { station: 1020, city: 'Видин' },
        { station: 1030, city: 'Грамада' },
        { station: 1040, city: 'Белоградчик' },
],
      zoom: 7
    };
  }
 render() {

    const { coords, zoom, popUPs } = this.state;
    return (
      <LeafletMap
        center={[42.733883, 25.48583]}
        zoom={zoom}
        style={{ height: "100vh" }}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />

        {this.state.popUPs.map(({ station, city }, index) => (

          console.log(station, city)
        ))}

        {coords.map(({ lat, lng }, index) => (
          <Marker position={[lat, lng]} icon={customMarker} key={index}>
            <Popup>
              {index + 1} is for popup with lat: {lat} and lon {lng}
            </Popup>
          </Marker>
        ))}
      </LeafletMap>
    );
  }
}

export default Map;

Upvotes: 0

Views: 372

Answers (1)

kboul
kboul

Reputation: 14570

If we take into account that you coords array items correspond to each item on popups array then you can merge the items of both arrays like this :

const { coords, popUPs, zoom } = this.state;
    const mergedArrays = coords.map((coord, i) => ({
      ...coord,
      station: popUPs[i].station,
      city: popUPs[i].city
    }));

and then iterate over new array mergedArrays instead of coords which will have all items you want to display:

 {mergedArrays.map(({ lat, lng, station, city }, index) => (
      <Marker position={[lat, lng]} icon={customMarker} key={index}>
        <Popup>
          {index + 1} is for popup with lat <b>{lat}</b> and lon{" "}
          <b>{lng}</b> with station <b>{station}</b> at city <b>{city}</b>
        </Popup>
      </Marker>
    ))}

Demo

Upvotes: 1

Related Questions