Leaflet circleMarkers don´t show up

Question

I am trying to draw hundres of circleMarker in a Leaflet map, I am using flask and foundation.js, the same code work in different app built with bootstrap.js

This is my code:

<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
  <script>
    var map = L.map('map').setView([40,-4], 6);

    L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-cnkhv76j/{z}/{x}/{y}.png', {
            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://cloudmade.com">CloudMade</a>',
            maxZoom: 18
        }).addTo(map);

    var geojsonMarkerOptions = {
    radius: 100,
    fillColor: "#FFF803",
    color: "#DDFF03",
    weight: 1,
    opacity: 0.8,
    fillOpacity: 0.8
    };

    {% for item in data['data'] %}        
    L.circleMarker([{{item[0]}},{{item[1]}}],geojsonMarkerOptions).addTo(map);
    {% endfor %} 

    var marker = L.marker([41.5, -0.09]).addTo(map);
    marker.bindPopup("I am a circle.");
    var circle = L.circle([51.508, -0.11], 500, {color: 'red',
                                                fillColor: '#f03',
                                                fillOpacity: 1
                                                }).addTo(map); 
</script>

At the bottom I tried a fixed marker which appears and fixed circle which doesn´t, could it be a problem with foundation.js? Because in a previous project with other framework worked perfectly.

Answer 1

I tried your code , replacing 51.508 with 41.508 (so the red circle is near the marker) and adding just a single circleMarker. It works. So the problem is not in the code.

Please check that you have included leaflet.css from the same locations as leaflet.js . Also check there are no errors in a javascript console (Ctrl+Shift+J in Firefox). Check that coordinates from {{item[0/1]}} are properly formatted (decimal separator is a dot, no extra symbols). Try using more recent version of Leaflet library, 0.7.3.

Answer 2

Ilja, many thanks. You were right the circles were pushed behind the map by a css. In this case, I was also using d3.js for some chart, and as soon as I got rid of nvd3's css the circles showed up.

Answer 3

I've been having the same issue, and it turns out that it is the nv.d3.css file. I found that commenting out these lines will allow you to draw a circle:

display: block; 
width: 100%; 
height: 100%;'

I don't know what potential side effects this might have on your page, but I think the main issue is that d3 decides to hijack any svgs that you put on the page.

EDIT: my case was with circles, but I wouldn't be surprised if it is the same problem between circles and circle markers.

EDIT 2: It's been a while, but someone just liked this, so I feel like I should inform you that in the end, these didn't play nice together. I didn't have the time to really tinker with it, so I was forced to remove the leaflet circles and pass on the project with a recommendation that it might just be easier to plug in Google Maps. Hope that's helpful.

Answer 4

That question was posted long ago. But May my answer helps someone.

When we instanciate L.CircleMarker(...) , the circle is created, but not showing. In my case, i noticed that it wait for the window resize event in order to display. So juste trigger that event after L.CircleMarker(...).addTo(map) and the circle will appear like a charm.

With JS

 window.dispatchEvent(new Event('resize'));

With Jquery

$(window).trigger('resize');