# How to display markers from a dictionary of coordinates from views.py to JS OpenStreetMaps

**URL:** <https://forum.djangoproject.com/t/how-to-display-markers-from-a-dictionary-of-coordinates-from-views-py-to-js-openstreetmaps/8530>\
**Category:** Using Django\
**Created:** [June 26, 2021, 6:42am UTC](https://forum.djangoproject.com/t/how-to-display-markers-from-a-dictionary-of-coordinates-from-views-py-to-js-openstreetmaps/8530 "2021-06-26T06:42:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![blueberry](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/blueberry/32/4973_2.png) [@blueberry](https://forum.djangoproject.com/u/blueberry)\
**Post date:** [June 26, 2021, 6:42am UTC](https://forum.djangoproject.com/t/how-to-display-markers-from-a-dictionary-of-coordinates-from-views-py-to-js-openstreetmaps/8530/1 "2021-06-26T06:42:06Z")

</div>

I want to display markers based on the coordinates in my views.py map function but I can’t seem to figure out how to get my javascript to display it.

Here is my views.py function.

```auto
def map(request):
     # This line works
    # data = {'lat':'33.674921', 'lng': '-117.168055'}
    # This line doesn't work
    data = {'lat':('33.683540', '33.674921'),
            'lng':('-117.167930', '-117.168055'),
            'desc':('this is some text.', 'this is some text.')}
    data = dumps(data)
    return render(request, "map.html", {"data": data})

```

Here is my javascript.

```auto
// Where you want to render the map.
var element = document.getElementById('osm-map');

// Height has to be set. You can do this in CSS too.
element.style = 'height:1000px;padding-top:70px;';

// Create Leaflet map on map element.
var map = L.map(element);

// Add OSM tile layer to the Leaflet map.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Target's GPS coordinates.
var target = L.latLng('33.8072286', '-116.9717381');

// Set map's center to target with zoom 14.
map.setView(target, 14);

// Place a marker on the same location.
L.marker(target).addTo(map);

// Connect to django views function
var markers = JSON.parse("{{data|escapejs}}");

// Loop through the markers array
for (var i = 0; i < markers.length; i++) {
  
  var lon = markers[i][0];
  var lat = markers[i][1];
  var popupText = markers[i][2];
  
    var markerLocation = new L.LatLng(lat, lon);
    var marker = new L.Marker(markerLocation);
    map.addLayer(marker);

    marker.bindPopup(popupText);

}

console.log(markers)

```

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [June 26, 2021, 11:59am UTC](https://forum.djangoproject.com/t/how-to-display-markers-from-a-dictionary-of-coordinates-from-views-py-to-js-openstreetmaps/8530/2 "2021-06-26T11:59:43Z")

</div>

This is a JavaScript / Leaflet(?) issue and not really related to Django - you might get better answers in that type of forum.

From what I can tell, it appears to me like you’ve got a real mixup between the data as you’ve defined it in `data` and how you’re trying to reference it in your loop.  
The originally supplied `data` is not an array, it’s an object.

My first recommendation would be to restructure how you’re passing the data in to your script to something that’s easier to work with:

```auto
data = [
{'lat':'33.683540', 'lng':'-117.167930', 'desc':'this is some text.'},
{'lat':'33.674921', 'lng':'-117.168055', 'desc':'this is some text.'}
]

```

Then, when iterating over this array:

```auto
for (marker of markers) {
    var markerLocation = new L.LatLng(marker.lat, marker.lng)
...

```