0

I'm working on a project where I'm using the Folium library to create interactive maps. I want to allow users to input coordinates (latitude and longitude) through a form, and upon submission, I'd like to dynamically add a marker to the map at the specified location.

Here's what I have so far:

<section>
   <h2>Mapa de ocorrência:</h2>
   <form id="coordinateForm">
        Latitude: <input type="text" id="latitude" name="latitude"><br>
        Longitude: <input type="text" id="longitude" name="longitude"><br>
    </form>
   <div id="map">{{ map | safe}}</div>
</section>

The map came from this code

def fazer_mapa(self):
        family = self.kwargs['family']
        zoom_level = 4
        colecoes = Colecao.objects.filter(family=family)

        latitude_values = list(Colecao.objects.filter(family=family).aggregate(Max('decimalLatitude'),Min('decimalLatitude')).values())
        longitude_values = list(Colecao.objects.filter(family=family).aggregate(Max('decimalLongitude'),Min('decimalLongitude')).values())

        if latitude_values == [None,None] and longitude_values == [None,None]:
            latitude_values = [-19.8688655,-19.8688655]
            longitude_values = [-43.9695513,-43.9695513]
            zoom_level = 16

        # média de onde será o meio do mapa
        latitude_media = (sum(latitude_values))/2
        longitude_media = (sum(longitude_values))/2

        mapa_family = Map(location=[latitude_media,longitude_media],zoom_start=zoom_level,tiles='Stamen Terrain')
        return mapa_family._repr_html_()

Could someone guide me on how to use JavaScript to capture the user's input for latitude and longitude and then add a marker to the map using Folium? I appreciate any help or examples you can provide!

Mário Henrique
  • 33
  • 4
  • I think you need ajax if you need to do it dynamically. You take this answer as a reference: https://stackoverflow.com/questions/20306981/how-do-i-integrate-ajax-with-django-applications/54607627#54607627 – Ahtisham Aug 17 '23 at 04:33

0 Answers0