1

I am new to leaflet and am trying to load a geojson file showing census blocks and associated information for a city in CA. It is a small city and not too many census blocks. I cannot get the popup feature to display any data. Values are written to the console but not showing up in the map. I get a warning here: Invalid CSS property value: transform 0.25s cubic-bezier(0,0,0.25,1)

My code is: 

<!DOCTYPE html>
<meta charset="utf-8">
<script src="d3/js/d3.v3.min.js"></script>
<script src="d3/js/topojson.v1.min.js"></script>
<script src="d3/js/datamaps.all.min.js"></script>
<link rel="stylesheet" href="leaflet-0.6.4/leaflet.css" />
<script src="leaflet-0.6.4/leaflet.js"></script>
<script src="NC.js" type="text/javascript"></script>

<style>
    div #container{
        width: 1000px; 
        height: 1000px;
        border: solid #999999 4px;
    }
</style>
<body>
<div id="map" style="align: center;width: 500px; height: 500px"></div>
<script type="text/javascript">

//
window.onload = function ()
{
var map = L.map('map').setView([ 32.6781, -117.0992], 100);
var countryStyle = {
        'color': "#000",
        'weight': 2,
        'opacity': 0.5
};
L.geoJson(NC, {
    onEachFeature: popup, // onEachFeature is built in
    style:countryStyle


}).addTo(map);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

//change stuff here for pop up windows
function popup(feature, layer) {
        if (feature.properties && feature.properties.AREALAND_1) {
            layer.bindPopup("<p><b>"+feature.properties.AREALAND_1+ "</p></b>")
            console.log(feature.properties.AREALAND_1)
                }               
            };  



};

</script>
</body>
Improve this question
3
  • So are you getting a popup, just with no content in it or no popup at all? Looks like you are missing a semicolon terminator on the layer.bindPopup line.
    – Chad Cooper
    Commented Nov 27, 2013 at 16:19
  • Thank you! Actually, the projection was incorrect. I had generated the geojson file from QGIS and did not pick the right coordinate system. Once this was done, everything worked fine!
    – user24409
    Commented Nov 28, 2013 at 5:57
  • If you've solved your problem, please answer your own question with what fixed it. Even if it's trivial like a CRS error!
    – Alex Leith
    Commented May 16, 2016 at 1:56

2 Answers 2

Reset to default
1

Your code looks OK but you should load the base map layer before the geojson layer. Try to make the following change and see if it will fix the issue or not:

var map = L.map('map').setView([ 32.6781, -117.0992], 100);
var countryStyle = {
        'color': "#000",
        'weight': 2,
        'opacity': 0.5
};

//Load the tile layer first.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

//then load geojson layer
L.geoJson(NC, {
    onEachFeature: popup, // onEachFeature is built in
    style:countryStyle
}).addTo(map);
Improve this answer
0

Please check out http://leafletjs.com/examples/choropleth-example.html might be helpful for you.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.