1

I had a question about adding CSS, since I could not find any other issues related to this. I am trying to move the Geocoder Search farther down the map than where it is positioned at 'top-right' and I cannot change it's position, whether I use inline or internal CSS:

import React from "react";
import "mapbox-gl/dist/mapbox-gl.css";
import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css";
import Geocoder from "react-map-gl-geocoder";
const geostyle {
    margin: '20px';
}

const Map = () = > {`
...
return(
<div>
...
<Geocoder
    style={geostyle}
    mapRef={myMap}
    onViewportChange={setViewport}
    mapboxApiAccessToken={MAPBOX_TOKEN}
    viewport={viewport}
    position="top-left"
  />
...
</div>
);
};

Is there a way to customize the Geocoder search bar? Would I have to edit the mapbox css that I imported from 'react-map-gl-geocoder? Thanks!

rachelo
  • 31
  • 1
  • 5

2 Answers2

1

As far as I know, unfortunately you would have to go into the styles imported from mapbox and edit those. I found this question because I'm trying to see if there is an alternative, but it looks like there's not. Styling the geocoder is really frustrating for many reasons. I suggest sticking with the vanilla styling to avoid the headache, but if you must change the styling, you should copy the css found in /@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css , paste it into another css file, and edit it there. I know i'm a year late, but have fun and good luck.

Raphael Cabrera
  • 21
  • 5
0

I am using Mapbox GL JS and I'm customizing mapbox geocoder elements by customizing the mapbox CSS.

As you can see in this Mapbox Example "Place the geocoder input outside the map", the position of the geocoder is changed by editing the Mapbox CSS.

spockshr
  • 372
  • 2
  • 14