Hi I am wondering if anyone can help me figure this problem out. I am trying to add addresses from my Django database into a Javascript which will convert the addresses to long/lat coordinates, and thus allowing me to use those new coordinates as markers on a leaflet map.
Currently I have the map loaded in.
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([37.116386, -98.299591], 5);
L.tileLayer('https://api.maptiler.com/maps/basic-v2/256/{z}/{x}/{y}.png?key=APIKEY', {
attributions: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
}).addTo(map)
var marker = L.marker([37.116386, -98.299591]).addTo(map);
</script>
</body>
Basically I want to replace the marker values with the value I render from the address provided in Django that I would filter through.
{% for address in addresses %}
<a>{{address.addresses}}</a>
{% endfor %}
If I were to filter say the business associated with the address, I would want it to render that marker for that specific business address. If anyone can help it would be greatly appreciated.
which will convert the addresses to long/lat coordinates
I think what you are describing is a geocoding process. There are several ways and services to geocode addresses not bount with Django or Leaflet. Some of them are paid and some are free perhaps with limitations (Google has one too). Though there are some Leaflet geocoding plugins I'm not sure they can do what u want. You should find a way to populate the plugin's search bar with your address data everytime and hit enter (through Javascript?) which I'm not familiar with.
The way I would go and have gone until now in my apps is that if I have a database that I need to geocode addresses and get coordinates, I do that as a seperate job before creating the app only to make my new column with coordinates in my database.
The database is then stored on postgres using postgis extension and the django app is created with GeoDjango.
All these allow you to use geospatial data on your django app. It is then quite easy to get anything you want from your Model to Leaflet usually by geojson serializers or API endpoints.
This could also be done in other ways without using database and model or geodjango for example from a geocoded csv file (which you make beforehand too) through the python folium library. You make the map on the backend and pass it in a template with iframes.
The best way of getting Django data into javascript is to use the json_script template tag:
https://docs.djangoproject.com/en/4.0/ref/templates/builtins/#json-script
Store the values in some hidden HTML elements and use them when rendered using Javascript. You may use
<input type="hidden" id="long" value="your_value_here" />
or
<div style="display: none;" id="long" >your_value_here</div>