Leaflet Js Heatmap won't dynamically add values

Question

For some reason, I can dynamically add more heatmap values to my leaflet js map. The code errors on: setInterval(heat.setLatLngs([randomCoords.lat, randomCoords.lng]), 200). I really have clue about what I'm doing wrong and I am at a hackathon so I need help.

$(document).ready ->

  lat = 0
  long = 0
  items = [
    [28.417663,-81.581212],
    [28.417663,-81.581212],
    [28.417663,-81.581212],
    [28.417663,-81.581212],
    [28.417663,-81.581212],
    [28.417663,-81.581212],
  ]

  heat = ""

  randomCoords = ->
    coords = {}
    coords["lat"] = Math.random()/10.0 + 28.417663
    coords["lng"]= Math.random()/10.0 + -81.581212

    console.log(coords.lat, coords.lng)
    return coords

  getLocation = ->
    if navigator.geolocation
      navigator.geolocation.getCurrentPosition showPosition
      console.log("hello")
    return

  showPosition = (position) ->
    lat = position.coords.latitude
    long = position.coords.longitude
    map.setView([28.417663,-81.581212], 13)
    L.marker([28.417663,-81.581212]).addTo(map).bindPopup("You are here!").openPopup()
    heat = L.heatLayer(items,  { maxZoom: 20 }).addTo(map);
    setInterval(heat.setLatLngs([randomCoords.lat, randomCoords.lng]), 200)
    return


  getLocation()

  map = L.map('map')

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>'
    maxZoom: 18
    id: 'id'
    accessToken: 'token').addTo map

  # draw = true
  # add points on mouse move (except when interacting with the map)
  # map.on
  #   movestart: ->
  #     draw = false
  #     return
  #   moveend: ->
  #     draw = true
  #     return
  #   mousemove: (e) ->
  #     if draw
  #       heat.addLatLng e.latlng
  #       console.log e.latlng
  #     return

  # ---
  # generated by js2coffee 2.1.0


  setInterval(randomCoords, 200)

  # addItems = ->
  #   heat.addLatLng(Math.random + 43.474048, Math.random + -80.5402033 );
  #   console.log "added"

I guess your hackaton is over but you did not even mention what the error is? any error message? — Stranded Kid

Stranded Kid Stranded Kid · Accepted Answer · 2015-09-20T20:32:25

You just wrote

setInterval(heat.setLatLngs([randomCoords.lat, randomCoords.lng]), 200)

I don't know if it's the real code (I can't see it in your post anyhow), but if it is, then the

heat.setLatLngs([randomCoords.lat, randomCoords.lng])

will be called as soon as the pointer reaches out the code, and then the returned value of it will be used by the setInterval.

So as it's not a function that is returned (I'm pretty sure), setInterval will fail.

Leaflet Js Heatmap won't dynamically add values

1 Answers