-
-
Save kyroskoh/ad35079008db44365fe0 to your computer and use it in GitHub Desktop.
express tilelive example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Tile server using the node web framework Express (http://expressjs.com). | |
var app = require('express').createServer(); | |
var tilelive = require('tilelive'); | |
require('tilelive-mapnik').registerProtocols(tilelive); | |
var filename = __dirname + '/' + 'stylesheet.xml'; | |
tilelive.load('mapnik://' + filename, function(err, source) { | |
if (err) throw err; | |
app.get('/:z/:x/:y.*', function(req, res) { | |
source.getTile(req.param('z'), req.param('x'), req.param('y'), function(err, tile, headers) { | |
// `err` is an error object when generation failed, otherwise null. | |
// `tile` contains the compressed image file as a Buffer | |
// `headers` is a hash with HTTP headers for the image. | |
if (!err) { | |
res.send(tile); | |
} else { | |
res.send('Tile rendering error: ' + err + '\n'); | |
} | |
}); | |
}); | |
}); | |
console.log('Listening on port: ' + 8888); | |
app.listen(8888); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
<meta http-equiv="Content-Script-Type" content="text/javascript" /> | |
<script charset="UTF-8" type="text/javascript" src="js/modestmaps.js"></script> | |
<title>test map</title> | |
<style type="text/css"> | |
#map { | |
width:800px; | |
height:800px; | |
} | |
</style> | |
<script type="text/javascript"> | |
function test() { | |
// name of a div element: | |
var parent = 'map'; | |
// defaults to Google-style Mercator projection, so works | |
// out of the box with OpenStreetMap and friends: | |
var template = 'http://localhost:8888/{Z}/{X}/{Y}.png'; | |
var provider = new MM.TemplatedLayer(template); | |
// without a size, it will expand to fit the parent: | |
var map = new MM.Map(parent, provider); | |
map.setCenterZoom(new MM.Location(46.311723, 0.277405), 4); | |
} | |
</script> | |
</head> | |
<body onload="test()"> | |
<div id="map"> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment