CODEWITHSUNDEEP
twitter-bootstrapvue.jsmapboxmapbox-gl-jsbootstrap-vue
osakaP
osakaP

Reputation: 75

Mapbox Geocoder with bootstrap-vue input box - custom search box for mapbox

How do I use bootstrap with Mapbox gl Geocoder ? I am using bootstrap-vue but I am unable to make the Geocoder work on the input element. Here is my code:

<template>
  <b-container>
    <div id="map"></div>
    <div>
        <b-form-input
          id="geocoder"
          class="geocoder"
          v-model="query"
          type="search"
          placeholder="Enter your location"
        ></b-form-input>
      </div>

  </b-container>
</template>


<script>
import mapboxgl from "mapbox-gl";
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';


export default {
  name: "BaseMap",
  data() {
    return {
      accessToken: SET_ACCESS_TOKEN,
    };
  },
  mounted() {
    mapboxgl.accessToken = this.accessToken;

    var map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-79.4512, 43.6568],
      zoom: 13,
    });

    var geocoder = new MapboxGeocoder({
      accessToken: mapboxgl.accessToken,
      mapboxgl: mapboxgl,
    });

    document.getElementById("geocoder").appendChild(geocoder.onAdd(map));
  },
};
</script>

What will be the best way to build a custom search box ?

Upvotes: 3

Views: 934

Answers (1)

Tawin
Tawin

Reputation: 81

Do you want to build a custom search box in terms of looks? You could change the looks with CSS classes. In the Documentation, you can see what is available.

Here some classes I used. You can style the searchbar and the results.

.mapboxgl-ctrl-geocoder
.mapboxgl-ctrl-geocoder > div
.geocoder-dropdown-item
.geocoder-dropdown-icon
.geocoder-dropdown-text

Upvotes: 1

Related Questions