CODEWITHSUNDEEP
reactjsmapboxmapbox-glreact-map-gl
rachelo
rachelo

Reputation: 41

CSS on Mapbox Geocoder

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!

Upvotes: 2

Views: 3857

Answers (3)

hoogw
hoogw

Reputation: 5535

This is my working sample:

https://transparentgov.net:3200/mapbox10/default?layer_id=105&layer=Fire+Divisions&center_lat=34.049039&center_long=-118.246521&center_zoom=17&url=https%3A%2F%2Fmaps.lacity.org%2Farcgis%2Frest%2Fservices%2FMapping%2FNavigateLA%2FMapServer&panto=0

enter image description here

CSS is: enter image description here

html (I use .pug, it is same as html just different format )

enter image description here

javascript is here: enter image description here

Upvotes: 0

Raphael Cabrera
Raphael Cabrera

Reputation: 31

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.

Upvotes: 2

spockshr
spockshr

Reputation: 382

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.

Upvotes: 1

Related Questions