Skip to content
Advertisement

Leaflet circleMarkers don´t show up

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.

Advertisement

Answer

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.

User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement