git clone git@github.com:springmeyer/svg-tiles.git
cd svg-tiles
npm install
./server.js & open http://localhost:4000
This demo shows the loading of a few pre-styled tiles in SVGZ format at z12 into
Leaflet. This works in Chrome and Safari (at least) because the SVGZ tiles
can be treated like images and loaded into a <img> element.
See the code comments in index.html for customizations to the demo like loading
tiles into <svg> elements instead of <img> by @jfirebaugh and using overzooming via @nrenner.
See the code comments in server.js for enabling code to optimized and re-style the SVG before
providing to the browser client via @ZJONSSON.
To view the underlying svg uncompressed you can do (with the server running - see below):
wget http://localhost:4000/tiles/12/1171/1566.svgz
mv 1566.svgz 1566.svg.gz
gzip -d 1566.svg.gz
Then open 1566.svg in your editor.
The tiles are styled by Mapnik using Mapnik's Cairo backend.
- Node.js v0.8.x or v0.10.x
After installing Node.js inside this directory run:
npm install
Which will install express and expat.
Start the server:
node server.js
Then in a web browser go to http://localhost:4000 and you
should be greeted with a few tiles of Washington DC at z12.
Zooming or panning will not work since this demo only provides
the tiles in the extent of the initial viewport.