CODEWITHSUNDEEP
javascripthtmlsizemapboxgeocode
user35131
user35131

Reputation: 1134

How to Change Mapbox Geocoder Search bar size?

I already added the geocode search tab.

map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
bbox: [-74.390249, 40.414685, -73.519390, 40.976805] ,
zoom: 15,}));

I also tried creating a variable called geocoder and through CSS tried to style, but it didn't work. My CSS file is referenced to the HTML and js file. I believe this should be an easy fix. Hopefully, I can get some help.

var geocoder = map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
bbox: [-74.390249, 40.414685, -73.519390, 40.976805] ,
zoom: 15,}));

Image Link

Upvotes: 3

Views: 3132

Answers (2)

Joaquin Lopez
Joaquin Lopez

Reputation: 1

Way to late but targeting the input should do the trick.

.mapboxgl-ctrl-geocoder--input {
   font-size: 300px;
}

Upvotes: 0

Nate Vogel
Nate Vogel

Reputation: 33

.mapboxgl-ctrl-geocoder {
    width: 300px!important;
}

This worked for me by placing into styles.scss in my angular app.

Upvotes: 3

Related Questions