Using Javascript to parse Django Data in Leaflet Maps-CodePudding

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">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; 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.

CodePudding user response：

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" />

<div style="display: none;" id="long" >your_value_here</div>

CodePudding user response：

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