Upon passing Marker="true" into geocoder, no point appears

[andrewshrout]

Expected Behavior
When marker="true", a pin appears upon search.

Actual behavior
Map transitions to the point, but no pin appears.

Context
Hard to replicate exactly what happens in a code sandbox as I'm developing in NextJS, and I've embedded the geocoder into deck.gl, but I cannot get a marker to render onto the map. The geocoder works, though I had to use the reference to put a search box over the Deck.gl component on the top. However the pin doesn't render on the static map. Do you have any ideas why this is or how I might be able to debug it? Thanks!

Map.js
NOTE: (I handle state / data with hooks in the parent component)

import React, { useRef, useCallback } from "react";
import DeckGL, { ScatterplotLayer } from "deck.gl";
import { StaticMap } from 'react-map-gl';
import dynamic from 'next/dynamic'
const Geocoder = dynamic(() => import('react-map-gl-geocoder'), {
    loading: () => <p>Loading...</p>,
    ssr: false,
});
import 'react-map-gl-geocoder/dist/mapbox-gl-geocoder.css';
import "mapbox-gl/dist/mapbox-gl.css";


const MAPBOX_TOKEN = MY_TOKEN

  const LOW_PRICE = [0, 128, 255]; //blue
  const HIGH_PRICE = [255, 0, 128]; //red

const Map = ({viewState, data, setViewState}) => {
  const mapRef = useRef();
  const geocoderContainerRef = useRef();

  const handleViewportChange = useCallback(
    (newViewstate) => setViewState(newViewstate),
    []
  );

  const handleGeocoderViewportChange = useCallback(
    (newViewstate) => {
      const geocoderDefaultOverrides = { transitionDuration: 1000};

      return handleViewportChange({...newViewstate})
    }, [handleViewportChange]
  )

  return(
  <div>
    <div className="geoRef"
        ref={geocoderContainerRef}
        style={{ position: "absolute", top: '7%', left: '17%', zIndex: 1 }}
      />
    <DeckGL
      viewState={viewState}
      pickingRadius={5}
      controller={true}
      onViewStateChange={({viewState}) => {
        setViewState(viewState)
      }}
      style={{
        left: '280px',
        width: 'calc(100vw - 280px)',
        top: '5%'
      }}
      layers={[
        new ScatterplotLayer({
            id: 'scatterplot',
            data: data.features,
            getPosition: (d) => d.geometry.coordinates,
            getFillColor: (d) => (d.properties.price > 1500 ? HIGH_PRICE : LOW_PRICE),
            getRadius: (d) => Math.sqrt(d.properties.size),
            opacity: 0.5,
            radiusScale: 10,
            pickable: true,
            radiusMinPixels: 2,
            radiusMaxPixels: 30,
            stroked: true,
        })
      ]}
    >
      <StaticMap
            viewId="map"
            viewState={viewState}
            reuseMaps
            mapStyle='mapbox://styles/mapbox/dark-v9'
            preventStyleDiffing={true}
            mapboxApiAccessToken={MAPBOX_TOKEN}
            ref={mapRef}
          >
          <Geocoder
              mapRef={mapRef}
              containerRef={geocoderContainerRef}
              viewState={viewState}
              mapboxApiAccessToken={MAPBOX_TOKEN}
              countries="us"
              onViewportChange={handleGeocoderViewportChange}
              marker="true"
            />
          </StaticMap>
    </DeckGL>
  </div>)
    };

export default Map;

[SamSamskies]

Hi @andrewshrout, the marker prop should be a boolean or an object which contains Mabox marker options and not a string. The marker prop defaults to true, so it's not required to pass the prop if you want the marker to show up.

[andrewshrout]

Ah thank you. That was a dumb mistake on my part. However, even after changing it to marker={true}, it still doesn't leave a marker. The same behavior is true if I don't add the prop at all. I realize this package isn't often used with deck.gl but do you have any idea why this might be?

[SamSamskies]

hmmmm... try removing the viewState prop. Objects that are not memoized could cause the issue and viewState is not a valid prop anyways. Also make sure you are using v2.1.0 or greater.

[andrewshrout]

That worked perfectly. Thanks so much for spending the time to help me out! Really appreciate it.