get LngLat in map

[akenore]

hi,
i have use json_serializer = serializers.get_serializer("json")()
to get LngLat in javascript of the map to show marker on map but i have this error after i add a variable
to the code
Uncaught Error: LngLatLike argument must be specified as a LngLat instance, an object {lng: , lat: }, an object {lon: , lat: }, or an array of [, ]
because we can't have the longitude and latitude separated we get it like that (12.550343, 55.665957)
so in the Mapbox don't work do you have a possibility to separate what is in database like lng = 12.550343 and lat = 55.665957
that it can work in map
this is the code that I use to show in map

<script> var LngLat = '{{ partie.terrain }}'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/satellite-streets-v11', center: [12.550343, 55.665957], zoom: 18 }); console.log(LongLat); var marker = new mapboxgl.Marker() .setLngLat(LongLat) .addTo(map); </script>

[simon-the-shark]

I suppose you're using the plain LocationField

In this case, the python representation of coordinates is a tuple

And Mapbox's requires javascript's array, which has identical syntax as Python's list

And the transformation from a tuple to a list is quite simple. For example, you can create a simple template filter (or tag if you prefer).

In order to do it, just create in your app folder templatetags, which contains empty __init__.py file and your custom_filters.py. And then paste there below simple code:

from django import template

register = template.Library()

@register.filter
def tuple_to_array(tuple):
    return list(tuple)

And then in your HTML template:

• load your filters with:

  {% load custom_filters %}

• and use it like this:
  {{ object.location | tuple_to_array}}
  (replace object.location with your name. I suppose partie.terrain in your example)
  For example your previous example would look like:

  {% load custom_filters %}
  <script> 
  var LngLat = {{ partie.terrain | tuple_to_array }}; 
  var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/satellite-streets-v11', center: [12.550343, 55.665957], zoom: 18 }); 
  console.log(LongLat); 
  var marker = new mapboxgl.Marker() .setLngLat(LongLat) .addTo(map); 
  </script>

You can read more about custom template tags and filters on official documentation

[simon-the-shark]

Also, thanks for drawing my attention to this. I'm going to introduce such filter in the next version of my package to makes this operation even simpler. I'll let you know once it's released

[akenore]

thank's a lot it was helpful you do a great job

[simon-the-shark]

There's a new release v1.6.4 which includes this filter. Feel free to contact me in case of further troubles with my package.