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 © <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.