CODEWITHSUNDEEP
javascripttwitter-bootstrapflaskzurb-foundationleaflet
Dmartincc
Dmartincc

Reputation: 39

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.

Upvotes: 2

Views: 3297

Answers (4)

Rehum
Rehum

Reputation: 600

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

Upvotes: 1

smckee
smckee

Reputation: 492

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.

Upvotes: 1

Dmartincc
Dmartincc

Reputation: 39

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.

Upvotes: 1

Ilja Zverev
Ilja Zverev

Reputation: 953

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.

Upvotes: 5

Related Questions