why aren't marker icons showing on the map of react mapbox?

Question

i want to include my address pinpoint in the map and i am using react-map-gl since it is free to use. i have uploaded the project for map options in codesandbox

my target is the put icons on significant institutions around my address and i rendered the icon from material-ui. the map i am using from the mapbox has been customized. and every icons should popup the adderss when mouse pointers are over the location icons.

i am copying the whole code of App.js below:

import React, { useState } from "react";
import ReactMapGL, { NavigationControl, Marker, Popup } from "react-map-gl";
import PinDropIcon from "@material-ui/icons/PinDrop";
const Token =
  "***";

const markerList = [
  {
    lat: 37.103271,
    long: -8.67322,
    name: "This is where i live in",
    info: 10
  },
  {
    lat: 37.1028,
    long: -8.67296,
    name: "Millennium bcp",
    info: 20
  },
  {
    lat: 37.10335,
    long: -8.67227,
    name: "Mercado Municipal de Lagos",
    info: 30
  }
];
const navStyle = {
  position: "absolute",
  top: 0,
  left: 0,
  padding: "10px"
};

function renderPopup({ index, popupInfo, setPopupInfo }) {
  return (
    <React.Fragment>
      {popupInfo && (
        <Popup
          tipSize={5}
          anchor="bottom-right"
          longitude={markerList[index].long}
          latitude={markerList[index].lat}
          onMouseLeave={(e) => {
            e.preventDefault();
            setPopupInfo(null);
          }}
          closeOnClick={true}
        ></Popup>
      )}
    </React.Fragment>
  );
}

export default function App() {
  const [popupInfo, setPopupInfo] = useState(null);
  const [viewport, setViewport] = useState({
    latitude: 37.103271,
    longitude: -8.67322,
    width: "100vw",
    height: "100vh",
    zoom: 15
  });

  return (
    <div className="nav" style={navStyle}>
      <ReactMapGL
        {...viewport}
        mapboxApiAccessToken={Token}
        mapStyle="mapbox://styles/rony01/ckixt8aio63dm19qm4ahve96q"
        onViewportChange={(viewport) => {
          setViewport(viewport);
        }}
      >
        <div>
          <NavigationControl
            onViewportChange={(viewport) => {
              setViewport(viewport);
            }}
          />
          {markerList.map((marker, index) => {
            <div key={index}>
              <Marker longitude={marker.long} latitude={marker.lat}>
                <PinDropIcon
                  name="Location"
                  size="small"
                  onMouseEnter={(e) => {
                    e.preventDefault();
                    setPopupInfo(true);
                  }}
                  onMouseLeave={(e) => {
                    e.preventDefault();
                    setPopupInfo(null);
                  }}
                />
              </Marker>
              {renderPopup(index)}
            </div>;
          })}
        </div>
      </ReactMapGL>
    </div>
  );
}

when i execute npm start the customized map is showing but there is no icon marker on it. what did i do the mistake? why the marker icons and their popup info's aren't rendered?

please let me know

Dean James · Answer 1 · 2020-12-23T00:09:22.780

1

Your loop is not returning the JSX. Switch it to this to fix:

          {markerList.map((marker, index) => (
            <div key={index}>
              <Marker longitude={marker.long} latitude={marker.lat}>
                <PinDropIcon
                  name="Location"
                  size="small"
                  onMouseEnter={(e) => {
                    e.preventDefault();
                    setPopupInfo(true);
                  }}
                  onMouseLeave={(e) => {
                    e.preventDefault();
                    setPopupInfo(null);
                  }}
                />
              </Marker>
              {renderPopup(index)}
            </div>
          ))}

Note: Beware the pins are dark so it's easy to miss them.

edited Dec 23 '20 at 00:09

answered Dec 21 '20 at 19:23

Dean James

2,491
4
21
29

i used style={{color:yellow[500]}} in and now marker can be seen but when i put the curser over the markers it doesn't show markerlist name. how can i do it? – rony01 Dec 21 '20 at 22:05
1

You can just add `titleAccess={marker.name}` to it. – Dean James Dec 21 '20 at 22:35
1

Did this answer your question? – Dean James Dec 23 '20 at 00:09
well i still couldn't resolve the popup title on the location icons. but yes you were right, it was the color of the icons which i couldn't see. but i used your titleAccess={marker.name} along with style color font. i will give it a shot again to resolve this issue since i am organizing the whole project but i am open to any ideas right now. all the functions are completed accept this thing. thanx again.... – rony01 Dec 23 '20 at 12:46
Good stuff! Feel free to mark this as answered :) – Dean James Dec 23 '20 at 13:42

why aren't marker icons showing on the map of react mapbox?

1 Answers1