Can I use the mapbox geocoder on a bootstrap form?

98
September 01, 2021, at 08:10 AM

I am new and way outside of my wheelhouse but I'm hoping to use the mapbox geocoder on my form that "creates" an event. I followed the mapbox docs and a video to structure the map display once the event has been created, but the geocoder wasn't covered in the video and the docs only show one variation of the coder outside the map but it looks nothing like what I'm trying to do.

Here's my form page (new.ejs):

<% layout('layouts/boilerplate') %> 
<script src="/javascripts/geocoder.js"></script>
<div class="row">
    <h1 class="text-center">Create Event</h1>
    <div class="col-6 offset-3">
        <form action="/events/new" method="POST" novalidate class="validated-form">
            <div class="mb-3">
                <label class="form-label" for="event_name">Event name</label>
                <input class="form-control" type="text" id="event[event_name]" name="event[event_name]" required autofocus>
                <div class="valid-feedback">
                    Looks good!
                </div>
               // *below is where I'm looking to add the geocode (for "location")* //
                <div class="mb-3">
                    <label class="form-label" for="location">Location/Venue</label>
                    <input class="form-control" type="text" id="event[location]" name="event[location]" required autofocus>
                    <div class="valid-feedback">
                        Looks good!
                    </div>
                <div class="mb-3">
                    <label class="form-label" for="event[description]">Event description</label>
                    <input class="form-control" type="text" id="event[description]" name="event[description]">
                    <div class="valid-feedback">
                        Looks good!
                    </div>   
                    <div class="mb-3">
                        <label class="form-label" for="image">Image Url</label>
                        <input class="form-control" type="text" id="image" name="event[image]">
                            <div class="valid-feedback">
                         Looks good!
                            </div>
                    </div>                 
            <div class="mb-3">
                <button class="btn btn-success">Create Event</button>
            </div>
            <a href="/events">Event</a>
        </form>        
    </div>
</div>
<script>
    const mapToken = '<%-process.env.MAPBOX_TOKEN%>';
</script>

Below is my geocoder.js file.

mapboxgl.accessToken = mapToken;
map.addControl(
    new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    mapboxgl: mapboxgl
    })
 );mapboxgl.accessToken = mapToken;

Nothing is working and I'm not really sure where to even begin. Have been trying to find something similar on youtube or stackoverflow without any luck. Any direction would be helpful - thank you!

Rent Charter Buses Company
READ ALSO
Jetpack Compose transparent NavBackStackEntry

Jetpack Compose transparent NavBackStackEntry

When I use Compose Navigation library, even if I set my root view and NavHost to have transparent background color, I see white background

143
How do I make my bot automatically create the channels and roles required for my bot to work as soon as it joins a server?

How do I make my bot automatically create the channels and roles required for my bot to work as soon as it joins a server?

So I do know how to make my bot create a role and a channelBut what is the event called when my bot is added to a server? thats all I want to know (the event name when my bot joins a server) I tried searching up in the documentations of discord

144
How can I update Text column that represents JSON in MySQL

How can I update Text column that represents JSON in MySQL

I have a column (TEXT) which stores json textI need to update the data

122
how to change the result of a map by another format React

how to change the result of a map by another format React

I would like to explain my problem of the day

114