How do I get the ReactMapGl Popup to work

Question

I am trying to get the popup that will display a specific message when I click on the marker, but it is not working for some reason. I can log the coordinate from the clicked function, but no popup. Here is my code:

import React, {useEffect, useState} from 'react';
import Map, {Marker, Popup} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import {CiSearch} from 'react-icons/ci';
import {FaMapMarkerAlt} from 'react-icons/fa';
import geoJson from "./chicago-parks.json"

function App() {
const [selectedLocation, setSelectedLocation] = useState(null)
const [viewPort, setViewPort] = useState({
    lat: 41.801,
    long: -87.65,
    zoom: 13
})

Here is is the function that should do the popup:

function handleClick(point) {
    setSelectedLocation(point)
    console.log(selectedLocation.geometry.coordinates)
}

The JSX return code:

return (
    <div className="App">
        <div className="searchContainer">
            <CiSearch className="Icon"/>
            <input className="searchBar" type="text"/>
            <button className="searchBtn">Search</button>
        </div>
        <Map
            className="map"
          mapboxAccessToken="pk.eyJ1IjoidG9tYnJvd24zIiwiYSI6ImNsZmdteXZqYTNhZ3MzeXBjNW1xczloZDgifQ.5dnZhnEskNaSnHs92Sh2PQ"
            onViewPortChange={(newPort) => {
                setViewPort(newPort)
            }}
            style={{height: "90vh", borderRadius: "0.7rem"}}
            mapStyle="mapbox://styles/mapbox/streets-v12"
            attributionControl={true}
        >
            {geoJson.features.map((point, index) => (
                <Marker
                    key={index}
                    latitude={point.geometry.coordinates[1]}
                    longitude={point.geometry.coordinates[0]}>
                    <FaMapMarkerAlt onClick={() => handleClick(point)} className="Marker"/>
                </Marker>
            ))}

            {selectedLocation ? (
                <Popup
                    latitude={selectedLocation.geometry.coordinates[1]}
                    longitude={selectedLocation.geometry.coordinates[0]}>
                    <h4 className="Popup">Hey! you clicked me</h4>
                </Popup>
            ) : null}
        </Map>

    </div>
)}

How do I get the ReactMapGl Popup to work

0 Answers0