0

Created by
vinjin 60 about 19 days ago

React leaflet: Array.map function not rendering Marker component to Map

I'm trying to add two <Marker/> components to my map, I am using the useState hook to keep track of the markers.

When a user clicks the map it adds the current longitude and latitude of that point to an array which represents the markers.

Logging the markers array shows the two objects which do indeed contain their respective lat, lng.

[LatLng, LatLng]
0: LatLng {lat: 40.80694139700055, lng: -73.94622242203457}
1: LatLng {lat: 40.668585096493445, lng: -73.48779014853261}
length: 2

This is my Map component:

import React, { useState, useEffect, useRef } from 'react'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import LocateControl from '../LocateControl/LocateControl.jsx';
import MapboxLayer from '../MapboxLayer/MapboxLayer.jsx';
import L from "leaflet";
import LCG from 'leaflet-control-geocoder';
import "leaflet/dist/leaflet.css";

export default function MyMap({getAddressFromLatLong}) {
  var [latLng, setlatlng] = useState(null);
  var [zoom, setZoom] = useState(4);
  var [map, setData] = useState([]);
  var [animate, setAnimate] = useState(false);
  var [markers, setMarkers] = useState([])


  useEffect(() => {
    console.log("markers ", markers);
    if (latLng != null){
    var geocoder = new L.Control.geocoder();
    var latLngParser = new L.Control.Geocoder.latLng();

     geocoder.options.geocoder.reverse(latLng, 5, (address)=>{
        getAddressFromLatLong(address[0].name)
       }, null)
  }
  }, [latLng, markers]);


var customMarker = new L.icon({
  iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png",
});

function updateLatLng(e) {
  setlatlng(e.latlng);
}

function addMarker(e){
  if (markers.length < 2){
    setlatlng(e.latlng);
    setMarkers(markers => markers.concat(e.latlng))
  }
}

function toggleAnimate() {
  setAnimate(animate => !animate);
}

  var MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN;

  var locateOptions = {
    position: 'topright',
    strings: {
      title: 'Show me where I am, yo!'
    },
    onActivate: () => {} // callback before engine starts retrieving locations
  };

  return map ? (
    <>
      <label>
        <input
          className="animate-panning"
          checked={animate}
          onChange={toggleAnimate}
          type="checkbox"
        />
        Animate panning
      </label>

      <Map animate={animate} zoom={zoom} onClick={addMarker}>
         {latLng && markers.map((position, idx)=> {
          {console.log("position ", position)}
          {console.log("idx ", idx);}
          <Marker key={`marker-${idx}`} onDrag={updateLatLng} draggable={true} position={position} icon={customMarker}>
          <Popup>
            This is your starting point!
          </Popup>
        </Marker>
         })}
        <MapboxLayer
          accessToken={MAPBOX_ACCESS_TOKEN}
          style="mapbox://styles/mapbox/streets-v9"
        />
        <LocateControl options={locateOptions} startDirectly />
      </Map>
    </>
  ) : (
    'Data is Loading...'
  );
}

See task infos

Comments (1)
deepu 38 about 18 days ago

What is all this? Where's the minimal reproducible example? Have you tried hardcoding markers on to the map instead of mapping a dynamic data structure?

0

Solutions (1)

0

effizyprince 127 about 3 days ago
Awaiting decision
vinjin 60 39 minutes ago
Creator

you just copied this from here: https://stackoverflow.com/questions/54858627/map-is-not-a-function-even-though-data-is-present-react-leaflet and the answer doesn't really make sense in this context..

0