0

I'm using mapbox gl js in a react framework to create we web map app. I have added a circle layer to the map and have a problem where the clickable mouseenter area of the circle is offset to the right. Below are two images that represent this behavior. The crosshair cursor is default and the pointer cursor is on mouseenter.

enter image description here

enter image description here

I came across this github issue that kind of relates to my issue: https://github.com/mapbox/mapbox-gl-js/issues/9467

I've tried removing items from my div tags like recommended in that github post but haven't been able to work around this issue.

1 Answer 1

0

I was able to fix the issue by isolating my map reference in it's own div as some alluded to in the github issue I mentioned.

Before

  return (
      <Col className="map-container" ref={mapContainer} >
       <VerticalMenu
          changeVisibilityState={changeVisibilityState}
          changeScaleState={changeScaleState}
          geocoderNational={geocoderNational}
          geocoderAdmin={geocoderAdmin}
        />

After

  return (
      <Col className="map-container" >
        <div ref={mapContainer}></div>
        <VerticalMenu
          changeVisibilityState={changeVisibilityState}
          changeScaleState={changeScaleState}
          geocoderNational={geocoderNational}
          geocoderAdmin={geocoderAdmin}
        />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.