Sending .py -> .html value to .js (Django, Mapbox)

Question

Below is my code in my main.html file:

<body>
  <h1>mappymappy</h1>
  <div id='map'></div>
  <script>
    mapboxgl.accessToken = '{{ mapbox_access_token }}'
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-73.9911, 40.7051],
      zoom: 9.5
    })
  </script>

  {% for center in drop_in_centers %}
  <script>
    new mapboxgl.Marker({ "color": 'red' })
      .setLngLat([{{ center.longitude }}, {{ center.latitude }}])
      .setPopup(new mapboxgl.Popup({ offset: 25 })
      .setHTML("<h2>Drop-in Center</h2><h3>{{center.center_name}}</h3>"))
      .addTo(map)
  </script>
  {% endfor %}

I want to move the scripts to a separate .js file. However, in order to do that I have to figure out a way to

send the values mapbox_access_token and drop_in_centers to .js file
and make the values able to be used in the .js file.

How can I do this?

+) both mapbox_access_token and drop_in_centers are from views.py file.

Daniel · Accepted Answer · 2020-10-14 01:34:52Z

1

Option 1) define vars in the template, pass them to js

views.py:

def my_view_function(request):
   
    # define variables: 
    map_box_token = 'the_token'
    drop_in_centers = 'the_drop_ins'

    # pack context:
    context = {
        'map_box_token' : map_box_token,
        'drop_in_centers' : drop_in_centers,
    }

    return render(request, 'template.html', context)

template.html:

<body>
  ...
  <script>
    var map_box_token='{{map_box_token}}';
    var drop_in_centers='{{drop_in_centers}}';
  </script>
  <!-- include script.js after vars are defined -->
  <script src="{% static 'script.js' %}"></script> 
</body>

script.js:

console.log(map_box_token) // ex: use as needed
console.log(drop_in_centers) // ex: use as needed

Option 2) use ajax to retrieve data from views.py

views.py:

def my_view_function(request):
   
    # define variables: 
    map_box_token = 'the_token'
    drop_in_centers = 'the_drop_ins'

    # pack context:
    context = json.dumps({
        'map_box_token' : map_box_token,
        'drop_in_centers' : drop_in_centers,
    })

    return HttpResponse(context)

script.js:

function get_vars() {

  // conduct ajax request:
  $.ajax({
    url : 'the_url',
    success : get_vars_success, // reference to function below:
  })

} $(document).ready(get_vars) // or call as needed

function get_vars_success(response) {
  
  // unpack context:
  var map_box_token = response.map_box_token;
  var drop_in_centers = response.drop_in_centers;
  
  // use as needed:
  ...

}

answered Oct 14, 2020 at 1:34

Daniel

3,5371 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ViaTech Over a year ago

I would add defaults to the js declarations for the templates in option 1, but this is the solution... Also note if pure JS is what is wanted, it has to be the Ajax call.

Collectives™ on Stack Overflow

Sending .py -> .html value to .js (Django, Mapbox)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related