Really, I think this a somewhat easy question for someone with some more experience in javascript programming.

I have a Django app to map some locations using leaflet. I'm using dajax for some on mouseover event already I want to integrate some filters using the same library. Problem is, I can't manage to update the map with the filtered data. The template tag {{ geo_json|safe }}; holds the data the map is initialised with. To clarify, here is my js code from my template

var map = L.map('leaflet_map').setView({{zoom|safe}}, 13);
   attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>',
   maxZoom: 18

var geojsonFeature = {{ geo_json|safe }};

function onEachFeature(feature, layer) {
      layer.on('click', function (e) {

          var id = feature.properties.id
          win_str = '/vsoilmap/popup?id=' + id

      layer.on('mouseover', function (e) {

          var id = feature.properties.id
          win_str = '/vsoilmap/popup?id=' + id

      layer.on('mouseout', function (e) {


var geojsonMarkerOptions = {
    radius: 8,
            fillColor: "green",
    color: "darkgreen",
    weight: 0.5,
    opacity: 0.8,
    fillOpacity: 0.8

var gj = L.geoJson(geojsonFeature, {
    onEachFeature: onEachFeature,
            pointToLayer: function (feature, latlng) {
               return L.circleMarker(latlng, geojsonMarkerOptions);

What I'm basically trying to do is to update the variable geojsonFeature. If I use the dajax add_data method I get the error Map container is already initialized. Of course the whole point of using ajax is to NOT load the map again so my question really is: how can I change the content of a variable in js without running the whole function again?


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.