| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Name | Name | Last commit date | ||
|---|---|---|---|---|
A JavaScript library for visualizing 3D OSM building data on interactive maps
The whole library consists of client JavaScript files, a server side PHP script and a MySQL or PostGis database. Everything should be seen as alpha state, all components are likely to change extensively.
Bottleneck at the moment is data availability. I can't process and host a whole OSM planet file. Actually I'm looking for a partner to provide a data service to you.
You will need to create your database table using the dump file /server/data/mysql-CREATE_TABLE.sql . Then import building data, i.e. from /server/data/mysql-berlin.zip . Either upload this directly in PhpMyAdmin or unpack and import as you like.
Make sure PHP is running and create a /server/config.php file for your setting s and database credentials. Or just adapt and rename /server/config.sample.php for your needs.
I assume, Leaflet is already integrated in your html page. If not, head over to its documentation. Important: version 0.4 of Leaflet.js is required.
Then in header section, add:
<head>
:
:
<script src="dist/buildings.js"></script>
</head>after Leaflet initialization add:
var map = new L.Map('map');
:
:
// You may stay with any maptiles you are already using. these are just my favourites.
// Remember to obtain an API key from MapBox.
// And keep the attribution part for proper copyright notice.
var mapboxTiles = new L.TileLayer(
'http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png',
{
attribution: 'Map tiles © <a href="http://mapbox.com">MapBox</a>',
maxZoom: 17
}
);
// to point to the sample location Berlin, lets start there:
map.setView(new L.LatLng(52.52111, 13.40988), 17).addLayer(mapboxTiles);
// now create the buildings layer and attach it to the map:
new OSMBuildings(map);
// if you like to load the server based Berlin or Frankfurt samples, start loading use loadData()
// as soon as you do, it starts loading data from your PHP/MySQL combo
// you will need to have this on the same server, otherwise there are cross origin issues
new OSMBuildings(map).loadData('server/?w={w}&n={n}&e={e}&s={s}&z={z}');
// or you like to put cutom objects on the map, use <a href="http://www.geojson.org/geojson-spec.html">GeoJSON</a>
// the second parameter indicateds, whether your coordinates are ordered as lat/lon (default) or lon/lat
// - you need to pass geocordinats in the respective coordinates properties.
// - you need to pass a properties.height attribute
// - only type Polygon is supported
// example:
var myGeoJSON = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[[13.38913,52.51670], [13.38919,52.51626], [13.39047,52.51634],
[13.39045,52.51644], [13.39031,52.51643], [13.39028,52.51664],
[13.39041,52.51664], [13.39040,52.51678], [13.38913,52.51670],
[13.38913,52.51670]]
]
},
"properties": {
"height": 50
}
}
]
};
new OSMBuildings(map).setData(myGeoJSON[, islonLat=true]); done.
As PostGIS seems to be much more popular for handling geometry and MySQL being much more popular for commercial web hosting, there is now a data conversion script in using Node.js. Requirements are: a working Node.js installation (I tested successfully 0.6 on Windows) and the node-postgres module. Install the module with npm install pg. Then have a look into /server/data/convert.js and change database, table, output settings. Run the conversion with node convert.js.
What it does:
For any further information visit http://osmbuildings.org, follow @osmbuildings on Twitter or report issues here on Github.
| Back | FazBrowse Home | New Git URL |