Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/00_splash.html

Created June 3, 2015 19:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmcw/f0a20c0062a129a36ae8 to your computer and use it in GitHub Desktop.
Save tmcw/f0a20c0062a129a36ae8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
00_splash.html
<!DOCTYPE html>
<html>
<head>
{% include mapnik.meta %}
<title>{{ page.title }}</title>
</head>
<body>
<!-- header -->
<div class='gradient'>
<div class='col12 clearfix prose'>
<div class='col3 margin3 pad4y'>
<h1 class='fancy dark space-top4'>mapnik</h1>
</div>
<div class='col3 space-top2 dark pad4y prose'>
<strong>Mapnik is the core of geospatial
visualization &amp; processing.</strong> It combines pixel-perfect image
output with lightning-fast cartographic algorithms, and exposes
interfaces in C++, Python, and Node.js.
</div>
</div>
<!-- jump nav -->
<div class='col12 clearfix pad1y'>
<div class='col12 margin3'>
<div class='col12 pill'><!--
--><a href='#code' class='button stroke short col2'>install</a><!--
--><a href='#xml' class='button stroke short col2'>style</a><!--
--><a href='#extend' class='button stroke short col2'>build</a>
</div>
</div>
</div>
</div>
<!-- code bindings -->
<a name="code"></a>
<div class='prose col12 clearfix fill-gray pad2y'>
<div class='col5 pad2y pad4x'>
<div class='big'>use mapnik in your language</div>
<p class='space-top1'>Mapnik's high-quality bindings let you use it from JavaScript,
Python, and C++.</p>
<h3>Python</h3>
<ul>
<li><a href='pages/python.html'>Installation</a></li>
<li><a href='pages/python.html'>API Documentation</a></li>
</ul>
<h3>JavaScript</h3>
<ul>
<li><a href='pages/python.html'>Installation</a></li>
<li><a href='pages/python.html'>API Documentation</a></li>
</ul>
<h3>C++</h3>
<ul>
<li><a href='pages/python.html'>Installation</a></li>
<li><a href='pages/python.html'>API Documentation</a></li>
</ul>
</div>
<div class='col7 pad2x'>
<a href='pages/python.html' class='button active unround col4'>Python</a>
<a href='pages/node.html' class='button unround col4'>Node</a>
<a href='pages/python-examples.html' class='button unround col4'>C++</a>
<div class='fill-white'>
{% highlight javascript %}
var mapnik = require('mapnik');
var fs = require('fs');
// register fonts and datasource plugins
mapnik.register_default_fonts();
mapnik.register_default_input_plugins();
var map = new mapnik.Map(256, 256);
map.load('./test/stylesheet.xml', function(err,map) {
if (err) throw err;
map.zoomAll();
var im = new mapnik.Image(256, 256);
map.render(im, function(err,im) {
if (err) throw err;
im.encode('png', function(err,buffer) {
if (err) throw err;
fs.writeFile('map.png',buffer, function(err) {
if (err) throw err;
console.log('saved map image to map.png');
});
});
});
});
{% endhighlight %}
</div>
<div class='fill-white'>
{% highlight python %}
import mapnik
m = mapnik.Map(800, 600)
m.background = mapnik.Color('white')
mapnik.save_map(m, "map.xml")
{% endhighlight %}
</div>
</div>
</div>
<!-- xml stylesheets -->
<a name="xml"></a>
<div class='col12 clearfix fill-light'>
<div class='col5'><img src='images/contours.png'></div>
<div class='col8 pad2x'>
<div class='col12 space-top4 space-bottom2 big'>XML stylesheets</div>
{% highlight xml linenos %}
<Map background-color="steelblue" srs="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs">
<Style name="My Style">
<Rule>
<PolygonSymbolizer fill="#f2eff9" />
<LineSymbolizer stroke="rgb(50%,50%,50%)" stroke-width="0.1" />
</Rule>
</Style>
<Layer name="world" srs="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs">
<StyleName>My Style</StyleName>
<Datasource>
<Parameter name="type">shape</Parameter>
<Parameter name="file">ne_110m_admin_0_countries.shp</Parameter>
</Datasource>
</Layer>
</Map>
{% endhighlight %}
</div>
</div>
<div class='col12 clearfix fill-white pad4y'>
<div class='col3 margin2 pad2y space-bottom2'>
<h2 class='big'>wget data + XML stylesheet</h2>
<div class='col12 pad2y'>Duis vel aliquet eros. Donec mollis est nec metus elementum, non tincidunt libero porttitor. Cras ac tempor augue, at porta tellus. Sed fermentum neque mi, sit amet purus fermentum bibendum.</div>
<div class='pill col12 pad1y'><!--
--><a href='docs.html' class='button stroke light short col6'>docs</a><!--
--><a href='examples.html' class='button stroke light short col6'>examples</a>
</div>
</div>
<div class='col4 margin1'>
<img src='images/contours.png'>
</div>
</div>
</div>
<!-- extend apps -->
<a name="extend"></a>
<div class='col12 clearfix fill-sky pad4y'>
<div class='col8 margin2 big light space-bottom2'>build your own map stack</div>
<div class='col3 margin2 pad1y'>
<img src='images/contours.png'>
</div>
<div class='col5 pad4x pad2y space-bottom2 dark'>
<h2>Mapbox Studio</h2>
<div class='col12 pad2y'>Duis vel aliquet eros. Donec mollis est nec metus elementum, non tincidunt libero porttitor. Cras ac tempor augue, at porta tellus. Sed fermentum neque mi, sit amet purus fermentum bibendum.</div>
<div class='pill col12 pad1y'><!--
--><a href='docs.html' class='button stroke short col6'>more</a><!--
--><a href='examples.html' class='button stroke short col6'>play</a>
</div>
</div>
</div>
<div class='col12 center caption small fill-sea dark pad1y'>
Copyright © 2013 Artem Pavlenko
</div>
<!-- end content -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment