javascript - Leaflet circleMarkers don´t show up - Stack Overflow

admin管理员组

文章数量:1402829

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=".5.1/leaflet.js"></script>
  <script>
    var map = L.map('map').setView([40,-4], 6);

    L.tileLayer('https://{s}.tiles.mapbox/v3/examples.map-cnkhv76j/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, <a href=".0/">CC-BY-SA</a>, Imagery  <a href="">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.

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./leaflet-0.5.1/leaflet.js"></script>
  <script>
    var map = L.map('map').setView([40,-4], 6);

    L.tileLayer('https://{s}.tiles.mapbox./v3/examples.map-cnkhv76j/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="http://openstreetmap">OpenStreetMap</a> contributors, <a href="http://creativemons/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery  <a href="http://cloudmade.">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.

• javascript
• twitter-bootstrap
• flask
• zurb-foundation
• leaflet

Share Improve this question Follow asked Jun 25, 2014 at 9:13 DmartinccDmartincc 3911 silver badge44 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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.

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.

I've been having the same issue, and it turns out that it is the nv.d3.css file. I found that menting 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 remendation that it might just be easier to plug in Google Maps. Hope that's helpful.

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');

本文标签： javascriptLeaflet circleMarkers don180t show upStack Overflow