Not working - show gray map

denny123 commented 11 years ago

script src="/leaflet-0.5.1/dist/L.BuildingsLayer.js"></script

var data3d = { "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [[ [13.37356, 52.52064], [13.37350, 52.51971], [13.37664, 52.51973], [13.37594, 52.52062], [13.37356, 52.52064] ]] }, "properties": { "wallColor": "rgb(255,0,0)", "height": 500 } }] };

new L.BuildingsLayer().addTo(map).geoJSON(data3d);

After add to map my map is gray, and 3D buildings not showing?

kekscom commented 11 years ago

Adding the buildings layer has no effect on map tiles. Gray background must be a different but unrelated problem. The code you pasted just adds a polygon with 4 points to the map, nothing else. Point the map to a location nearby like `map.setView([52.519, 13.374], 16) and the shape should be visible. For more analysis, just send me a link to your website.

denny123 commented 11 years ago

My site is local(tomcat6, opengeo, postgis).

OpenStreetMap ```

kekscom commented 11 years ago

I've shortened your code down to the relevant parts. Make sure, you are using a released version of OSM Buildings. v0.1.7a is latest. Next release follows within a few days.

map tiles are working fine
if you set maps view position somewhere within data3d, it's also working L.map('map').setView([52.520, 13.375], 16); Important is, that GeoJSON swaps lat/lon, but your code is already correct . Zoom should be 14+, otherwise it doesnt make much sense

In case you used the latest version from master, there is a gray shaodow overlay. This will change a bit after next release. For now, you can fix this by setting a date/time: new L.BuildingsLayer().addTo(map).geoJSON(data3d).setDate(new Date(2013, 03, 01, 11, 30)); This works with version from master only!

Hope, the changes help you to continue.

<html>
<head>
<link rel="stylesheet" href="leaflet.css" />
</head>

<body>
<script src="leaflet-src.js"></script>
<script src="L.BuildingsLayer.js"></script>

<div id="map" style="width:100%; height:100%;">

<script>
var map = L.map('map').setView([52.520, 13.375], 16); 
var mapnik = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    { maxZoom: 18, attribution: "Map data &copy; <a href='http://osm.org'>OpenStreetMap</a> contributors"}).addTo(map);

var data3d = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [[
                [13.37356, 52.52064],
                [13.37350, 52.51971],
                [13.37664, 52.51973],
                [13.37594, 52.52062],
                [13.37356, 52.52064]
            ]]
        },
        "properties": {
            "wallColor": "rgb(255,0,0)",
            "height": 500
        }
    }]
};

new L.BuildingsLayer().addTo(map).geoJSON(data3d);
</script>
</body>
</html>

denny123 commented 11 years ago

Thank you! All working.

kekscom commented 11 years ago

You're welcome! When finished, I can link to your project if you like.

kekscom / osmbuildings

Not working - show gray map #24