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>
  • 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 Nov 27 '13 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 Nov 28 '13 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 May 16 '16 at 1:56
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);
0

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

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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