vendredi 22 novembre 2019

How to add Multiple coordinates for Markers in Leaflet charts on ReactJS

I have one arrray with Lat & Long coords for markers.

I want to display markers with this coords on the chart, but I need some help to struct the code and loop the array.

My code:

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

var markersList = [
  [41.19197,    25.33719,],
  [41.26352,    25.1471,],
  [41.26365,    25.24215,],
  [41.26369,    25.33719,],
  ];


    class Map extends React.Component {
      render() {
        return (
          <LeafletMap
            center={[42.733883, 25.485830]}
            zoom={7.4}
            maxZoom={10}
            attributionControl={true}
            zoomControl={true}
            doubleClickZoom={true}
            scrollWheelZoom={true}
            dragging={true}
            animate={true}
            easeLinearity={0.35}
          >
            <TileLayer
              url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
            />

            <Marker position={[42.013371, 24.878439]}>
              <Popup>
                Асеновград
              </Popup>
            </Marker>
          </LeafletMap>
        );
      }
    }

    export default Map

Can I get example with code How to display all markers ?




Aucun commentaire:

Enregistrer un commentaire