├── .gitignore
├── app.js
├── server
    ├── styles
    │   ├── point.png
    │   ├── polygon.xml
    │   ├── point_fast.xml
    │   ├── line.xml
    │   ├── text.xml
    │   └── point.xml
    ├── settings.js
    └── app.js
├── public
    ├── google_point_8.png
    ├── map.js
    └── index.html
├── run.sh
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | build
2 | .notes.txt
3 | .DS_Store
4 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./server/app').server;
2 | 


--------------------------------------------------------------------------------
/server/styles/point.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/springmeyer/coalition/HEAD/server/styles/point.png


--------------------------------------------------------------------------------
/public/google_point_8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/springmeyer/coalition/HEAD/public/google_point_8.png


--------------------------------------------------------------------------------
/run.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | 
3 | # https://github.com/senchalabs/spark
4 | spark -p 3000 -n `sysctl hw.ncpu | awk '{print $2}'`


--------------------------------------------------------------------------------
/server/styles/polygon.xml:
--------------------------------------------------------------------------------
1 | <Map minimum-version="2.0.0">
2 | <Style name="polygon">
3 |   <Rule>
4 |     <PolygonSymbolizer fill="darkred" fill-opacity=".5" />
5 |   </Rule>
6 | </Style>
7 | </Map>


--------------------------------------------------------------------------------
/server/styles/point_fast.xml:
--------------------------------------------------------------------------------
 1 | <Map>
 2 | <Style name="point">
 3 | 
 4 |   <!-- sprites render fastest -->
 5 |   
 6 |  <Rule>
 7 |     <PointSymbolizer file="point.png" allow-overlap="true" />
 8 |   </Rule>
 9 | 
10 | </Style>
11 | </Map>


--------------------------------------------------------------------------------
/server/styles/line.xml:
--------------------------------------------------------------------------------
1 | <Map minimum-version="2.0.0">
2 | <Style name="line">
3 |   <Rule>
4 |     <LineSymbolizer stroke="lightgreen" stroke-width="3" />
5 |     <LineSymbolizer stroke="green" stroke-width="1.5" />
6 |   </Rule>
7 | </Style>
8 | </Map>


--------------------------------------------------------------------------------
/server/styles/text.xml:
--------------------------------------------------------------------------------
1 | <Map minimum-version="2.0.0">
2 | <Style name="text">
3 |   <Rule>
4 |     <!-- only show labels at [zoom > 5] -->
5 |     <MaxScaleDenominator>12500000</MaxScaleDenominator>
6 |     <TextSymbolizer face-name="DejaVu Sans Book" name="[english_name]" size="10" halo-radius="1" wrap-width="50" dy="10" placement="interior" />
7 |   </Rule>
8 | </Style>
9 | </Map>


--------------------------------------------------------------------------------
/server/settings.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | 
 3 | module.exports.styles = path.join(__dirname,'styles');
 4 | 
 5 | module.exports.postgis = {
 6 |     'dbname' : 'tiledb',
 7 |     'extent' : '-20005048.4188,-9039211.13765,19907487.2779,17096598.5401',
 8 |     'geometry_field' : 'the_geom',
 9 |     'srid' : 900913,
10 |     'user' : 'postgres',
11 |     'max_size' : 1,
12 |     'type' : 'postgis'
13 | };
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/public/map.js:
--------------------------------------------------------------------------------
 1 | var po = org.polymaps;
 2 | 
 3 | var map = po.map()
 4 |     .container(document.getElementById('map').appendChild(po.svg('svg')))
 5 |     .center({lat: 0, lon: 0})
 6 |     .zoom(1)
 7 |     .zoomRange([1, 20])
 8 |     .add(po.drag())
 9 |     .add(po.wheel())
10 |     .add(po.dblclick())
11 |     .add(po.hash());
12 | 
13 | // mapquest's mapnik tiles
14 | 
15 | map.add(po.image()
16 |     .url(po.url('http://otile{S}.mqcdn.com/tiles/1.0.0/osm/'
17 |     + '{Z}/{X}/{Y}.png')
18 |     .hosts(['1', '2', '3', '4'])));
19 | 
20 | 
21 | var tile_url = '?x={X}&y={Y}&z={Z}';
22 | 
23 | // local tile server
24 | var layer = po.image()
25 |     .url(po.url(tile_url + '&sql=points9&style=point'));
26 | 
27 | map.add(layer);
28 | 
29 | 
30 | var setVal = function(value)
31 | {
32 |     document.getElementById('q').value = value;
33 |     update_tiles();
34 | }
35 | 
36 | var update_tiles = function() {
37 |   var style = 'point';
38 |   var sql = document.getElementById('q').value;
39 |   if (!sql)
40 |       sql = 'points9';
41 |   if (document.forms[0][0].checked)
42 |      style = 'point';
43 |   if (document.forms[0][1].checked)
44 |      style = 'polygon';
45 |   if (document.forms[0][2].checked)
46 |      style = 'line';
47 |   layer.url(po.url(tile_url + '&sql=' + escape(sql) + '&style=' + style))
48 |      .reload();
49 |   console.log(sql);
50 | };
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Coalition
 2 | 
 3 | An illustrative web server that combines nodejs, mapnik, and postgis.
 4 | 
 5 | 
 6 | ## Depends
 7 | 
 8 |   NodeJS > 0.2.4
 9 |   
10 |   Mapnik (latest trunk >r2397)
11 |   
12 |   Node-mapnik
13 |   
14 |   Npm / Spark
15 | 
16 | 
17 | ## Installation
18 |   
19 |   Install node:
20 |   
21 |     $ wget http://nodejs.org/dist/node-v0.4.0.tar.gz
22 |     $ tar xvf node-v0.4.0.tar.gz
23 |     $ ./configure
24 |     $ make
25 |     $ make install
26 |   
27 |   Install node-mapnik:
28 |   
29 |     $ git clone git://github.com/mapnik/node-mapnik.git
30 |     $ cd node-mapnik
31 |     $ ./configure
32 |     $ make
33 |     $ make install
34 |     
35 |   Install npm (node package manager)
36 |   
37 |     $ curl http://npmjs.org/install.sh | sh
38 |   
39 |   Install spark via npm:
40 | 
41 |     $ npm install spark
42 | 
43 | 
44 | ## Configuration
45 | 
46 |   Edit the postgis settings in 'server/settings.js' to match your system.
47 |   
48 |   Also, fixup the few hardcoded sample queries in 'public/index.html' to match your postgis tables.
49 | 
50 | 
51 | ## Usage
52 | 
53 |   
54 |   Start the server by typing:
55 |   
56 |     $ ./run.sh
57 |     
58 |   Or:
59 |   
60 |     $ spark
61 |     
62 |   Then visit http://localhost:3000/. Choose a style type and a postgis subquery.
63 | 
64 | 
65 | ## A note on styles
66 | 
67 |   Mapnik supports applying arbitrary styles to layers, but for the results 
68 |   to be reasonable you have to apply reasonable styles. For example a PointSymbolizer
69 |   will work against either point geometries or polygon geometries, but a PolygonSymbolizer
70 |   will not render anything if applied to point geometries.
71 | 
72 | 
73 |   


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script type="text/javascript" src="http://polymaps.org/polymaps.min.js"></script>
 4 |     <style type="text/css">
 5 |     
 6 |       html {
 7 |         font-family: "Lucida Grande", Verdana, Arial, sans-serif;
 8 |         height: 100%;
 9 |       }
10 |       
11 |       body {
12 |         height: 85%;
13 |         margin: 0;
14 |         bottom: 0px;
15 |       }
16 |       
17 |       top {
18 |         padding-left:15px;
19 |         padding-right:15px;
20 |         height: 10%;
21 |         top: 0px;
22 |         border:solid 1px;
23 |       }
24 | 
25 |     </style>
26 |   </head>
27 | 
28 |   <div id="top" >
29 | 
30 |      <div style="float:left;padding-left:15px;width:30%;">
31 |      <p>Demo of sending arbitrary SQL and Styles to Mapnik for dynamic tile generation</p>
32 |      </div>
33 | 
34 |      <div style="float:left;padding:5px;width:10%">
35 |     Style:
36 |     <form id="geom_type">
37 |     <input type="radio" onchange="update_tiles();" name="type" value="point" checked="checked" /> Point<br />
38 |     <input type="radio" onchange="update_tiles();" name="type" value="polygon" /> Polygon <br />
39 |     <input type="radio" onchange="update_tiles();" name="type" value="line" /> Line <br />
40 |     </form>
41 |     </div>
42 | 
43 |      <div style="float:right;padding:5px;width:55%;font-size:smaller;">
44 |      <input type="search" autosave="bsn_srch" results="50" size="100" id="q" value="points9" onchange="update_tiles();">
45 |      <button onclick="update_tiles();" type="submit">Submit</button>
46 |       Sample Queries: <a href="#" onclick="setVal(this.innerHTML);return false">points9</a> | <a href="#" onclick="setVal(this.innerHTML);return false">polygons9</a>
47 |       <br />
48 |       <a href="#" onclick="setVal(this.innerHTML);return false">(Select * from points9 where marine = 't') as t</a>
49 |       <br />
50 |       <a href="#" onclick="setVal(this.innerHTML);return false">(Select * from polygons9 where marine = 'f') as t</a>
51 |       <br />
52 |      </div>
53 | 
54 |   </div>
55 | 
56 |   <body id="map">
57 |     <script type="text/javascript" src="map.js"></script>
58 |   </body>
59 | 
60 | </html>
61 | 


--------------------------------------------------------------------------------
/server/app.js:
--------------------------------------------------------------------------------
 1 | var mapnik = require('mapnik')
 2 |   , mercator = require('mapnik/sphericalmercator')
 3 |   , http = require('http')
 4 |   , url = require('url')
 5 |   , fs = require('fs')
 6 |   , path = require('path')
 7 |   , settings = require('./settings');
 8 | 
 9 | function isEmpty(obj) {
10 |     for(var prop in obj) {
11 |         if(obj.hasOwnProperty(prop))
12 |             return false;
13 |     }
14 |     return true;
15 | }
16 | 
17 | module.exports.server = http.createServer(function(req, res) {
18 | 
19 |   var query = url.parse(req.url.toLowerCase(), true).query;
20 | 
21 |   res.writeHead(500, {
22 |   'Content-Type': 'text/plain'
23 |   });
24 | 
25 |   if (!query || isEmpty(query)) {
26 |       try {
27 |         res.writeHead(200, {
28 |         'Content-Type': 'text/html'
29 |         });
30 |         if (req.url == '/') {
31 |             res.end(fs.readFileSync('./public/index.html'));
32 |         } else {
33 |             res.end(fs.readFileSync('./public/' + req.url));      
34 |         }
35 |       } catch (err) {
36 |             res.end('Not found: ' + req.url);      
37 |       }
38 |   } else {
39 |         
40 |       if (query &&
41 |           query.x !== undefined &&
42 |           query.y !== undefined &&
43 |           query.z !== undefined &&
44 |           query.sql !== undefined &&
45 |           query.style !== undefined
46 |           ) {
47 |     
48 |           var bbox = mercator.xyz_to_envelope(parseInt(query.x),
49 |                                               parseInt(query.y),
50 |                                               parseInt(query.z), false);
51 |           var map = new mapnik.Map(256, 256, mercator.srs);
52 |           map.buffer_size(50);
53 |           var layer = new mapnik.Layer('tile', mercator.srs);
54 |           try {
55 |               settings.postgis.table = unescape(query.sql);
56 |               var postgis = new mapnik.Datasource(settings.postgis);
57 |               layer.datasource = postgis;
58 |               styles = [query.style];
59 |               map.load(path.join(settings.styles, query.style + '.xml'));
60 |               // labels
61 |               styles.push('text');
62 |               map.load(path.join(settings.styles, 'text.xml'));
63 |               layer.styles = styles;
64 |               map.add_layer(layer);
65 |               // show map in terminal with toString()
66 |               //console.log(map.toString());
67 |           }
68 |           catch (err) {
69 |               res.end(err.message);
70 |           }
71 |     
72 |           map.render(bbox, 'png', function(err, buffer) {
73 |               if (err) {
74 |                   res.end(err.message);
75 |               } else {
76 |                   //console.log(map.scaleDenominator());
77 |                   res.writeHead(200, {
78 |                     'Content-Type': 'image/png'
79 |                   });
80 |                   res.end(buffer);
81 |               }
82 |           });
83 |       } else {
84 |           res.end('missing x, y, z, sql, or style parameter');
85 |       }
86 |   }
87 | });
88 | 


--------------------------------------------------------------------------------
/server/styles/point.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!DOCTYPE Map [
 3 | <!ENTITY maxscale_zoom0 "<MaxScaleDenominator>250000000000</MaxScaleDenominator>">
 4 | <!ENTITY maxscale_zoom1 "<MaxScaleDenominator>500000000</MaxScaleDenominator>">
 5 | <!ENTITY minscale_zoom1 "<MinScaleDenominator>200000000</MinScaleDenominator>">
 6 | <!ENTITY maxscale_zoom2 "<MaxScaleDenominator>200000000</MaxScaleDenominator>">
 7 | <!ENTITY minscale_zoom2 "<MinScaleDenominator>100000000</MinScaleDenominator>">
 8 | <!ENTITY maxscale_zoom3 "<MaxScaleDenominator>100000000</MaxScaleDenominator>">
 9 | <!ENTITY minscale_zoom3 "<MinScaleDenominator>50000000</MinScaleDenominator>">
10 | <!ENTITY maxscale_zoom4 "<MaxScaleDenominator>50000000</MaxScaleDenominator>">
11 | <!ENTITY minscale_zoom4 "<MinScaleDenominator>25000000</MinScaleDenominator>">
12 | <!ENTITY maxscale_zoom5 "<MaxScaleDenominator>25000000</MaxScaleDenominator>">
13 | <!ENTITY minscale_zoom5 "<MinScaleDenominator>12500000</MinScaleDenominator>">
14 | <!ENTITY maxscale_zoom6 "<MaxScaleDenominator>12500000</MaxScaleDenominator>">
15 | <!ENTITY minscale_zoom6 "<MinScaleDenominator>6500000</MinScaleDenominator>">
16 | <!ENTITY maxscale_zoom7 "<MaxScaleDenominator>6500000</MaxScaleDenominator>">
17 | <!ENTITY minscale_zoom7 "<MinScaleDenominator>3000000</MinScaleDenominator>">
18 | <!ENTITY maxscale_zoom8 "<MaxScaleDenominator>3000000</MaxScaleDenominator>">
19 | <!ENTITY minscale_zoom8 "<MinScaleDenominator>1500000</MinScaleDenominator>">
20 | <!ENTITY maxscale_zoom9 "<MaxScaleDenominator>1500000</MaxScaleDenominator>">
21 | <!ENTITY minscale_zoom9 "<MinScaleDenominator>750000</MinScaleDenominator>">
22 | <!ENTITY maxscale_zoom10 "<MaxScaleDenominator>750000</MaxScaleDenominator>">
23 | <!ENTITY minscale_zoom10 "<MinScaleDenominator>400000</MinScaleDenominator>">
24 | <!ENTITY maxscale_zoom11 "<MaxScaleDenominator>400000</MaxScaleDenominator>">
25 | <!ENTITY minscale_zoom11 "<MinScaleDenominator>200000</MinScaleDenominator>">
26 | <!ENTITY maxscale_zoom12 "<MaxScaleDenominator>200000</MaxScaleDenominator>">
27 | <!ENTITY minscale_zoom12 "<MinScaleDenominator>100000</MinScaleDenominator>">
28 | <!ENTITY maxscale_zoom13 "<MaxScaleDenominator>100000</MaxScaleDenominator>">
29 | <!ENTITY minscale_zoom13 "<MinScaleDenominator>50000</MinScaleDenominator>">
30 | <!ENTITY maxscale_zoom14 "<MaxScaleDenominator>50000</MaxScaleDenominator>">
31 | <!ENTITY minscale_zoom14 "<MinScaleDenominator>25000</MinScaleDenominator>">
32 | <!ENTITY maxscale_zoom15 "<MaxScaleDenominator>25000</MaxScaleDenominator>">
33 | <!ENTITY minscale_zoom15 "<MinScaleDenominator>12500</MinScaleDenominator>">
34 | <!ENTITY maxscale_zoom16 "<MaxScaleDenominator>12500</MaxScaleDenominator>">
35 | <!ENTITY minscale_zoom16 "<MinScaleDenominator>5000</MinScaleDenominator>">
36 | <!ENTITY maxscale_zoom17 "<MaxScaleDenominator>5000</MaxScaleDenominator>">
37 | <!ENTITY minscale_zoom17 "<MinScaleDenominator>2500</MinScaleDenominator>">
38 | <!ENTITY maxscale_zoom18 "<MaxScaleDenominator>2500</MaxScaleDenominator>">
39 | <!ENTITY minscale_zoom18 "<MinScaleDenominator>1000</MinScaleDenominator>">
40 | <!ENTITY zoom_inf "<MinScaleDenominator>1</MinScaleDenominator>">
41 | ]>
42 | <Map minimum-version="2.0.0">
43 | <Style name="point" filter-mode="first">
44 | 
45 |   <Rule>
46 |     &maxscale_zoom0;
47 |     &minscale_zoom2;
48 |     <MarkersSymbolizer fill="darkgreen" opacity=".7" width="1.5" stroke="lightgreen" stroke-width="3.5" stroke-opacity=".1" placement="point" marker-type="ellipse" allow-overlap="true"/>
49 |   </Rule>
50 | 
51 |   <Rule>
52 |     &maxscale_zoom3;
53 |     &minscale_zoom4;
54 |     <MarkersSymbolizer fill="darkgreen" opacity=".5" width="4" stroke="lightgreen" stroke-width="3.5" stroke-opacity=".1" placement="point" marker-type="ellipse" allow-overlap="true"/>
55 |   </Rule>
56 | 
57 |   <Rule>
58 |     &maxscale_zoom4;
59 |     &minscale_zoom5;
60 |     <MarkersSymbolizer fill="darkgreen" opacity=".5" width="5" stroke="lightgreen" stroke-width="3.5" stroke-opacity=".2" placement="point" marker-type="ellipse" allow-overlap="true"/>
61 |   </Rule>
62 | 
63 |   <Rule>
64 |     &maxscale_zoom6;
65 |     &minscale_zoom12;
66 |     <MarkersSymbolizer fill="darkgreen" opacity=".7" width="7" stroke="lightgreen" stroke-width="3" stroke-opacity=".3" placement="point" marker-type="ellipse" allow-overlap="true"/>
67 |   </Rule>
68 | 
69 |   <Rule>
70 |     &maxscale_zoom13;
71 |     <MarkersSymbolizer fill="darkgreen" opacity=".7" width="20" stroke="lightgreen" stroke-width="5" stroke-opacity=".5" placement="point" marker-type="ellipse" allow-overlap="true"/>
72 |   </Rule>
73 | 
74 | 
75 |   
76 |   
77 | </Style>
78 | </Map>


--------------------------------------------------------------------------------