1

Mapnik Tutorial : working with shp and postgis [part 2]

<< Previous tutorial : basic usage mapnik with nodejs [part 1]

Now in this tutorial we will learn mapnik+nodejs with postgis(postgresql). So before you continue this tutorial, you must already installed postgresql+postgis+phppgadmin.

Ok, in this tutorial we will generate tiles (.png) from postgis record with mapnik and then display that tiles on leaflet map. This is the final output :
working with shp and postgis

display tiles on map leaflet

Let’s start the following tutorial ! 🙂

CREATE USER, DATABASE, EXTENSION FOR POSTGIS

1) First, we must create user in postgis. For example i create user : ‘gisuser’.
$ sudo -u postgres createuser gisuser

2) Next, create database ‘gis’ with owner ‘gisuser’
$ sudo -u postgres createdb –encoding=UTF8 –owner=gisuser gis

So, if you look on http://localhost/phppgadmin, you will see database ‘gis’.
create database gis for postgis

3) Next, create 2 extension postgis in database ‘gis’
$ psql –username=postgres –dbname=gis -c “CREATE EXTENSION postgis;”
$ psql –username=postgres –dbname=gis -c “CREATE EXTENSION postgis_topology;”

After run it, it will create 2 table inside database ‘gis’, like this :
extension topology postgis
spatial_ref_sys  extension postgis

**If you get error when create 2 extension postgis, like this :
psql: FATAL: Peer authentication authentication failed for user "postgres"

     to fix it you must edit pg_hba.conf :
         $ sudo vi /etc/postgresql/9.3/main/pg_hba.conf
         – find :
         # Database administrative login by Unix domain socket
         local all postgres peer
         – change to :
         # Database administrative login by Unix domain socket
         local all postgres trust
         – then restart your postgresql :
         $ sudo service postgresql restart

**Or if you get error again like this :
ERROR: could not open extension control file "/usr/pgsql-9.3/share/extension/postgis.control": No such file or directory

     to fix it, install postgis again with the following command :
         $ sudo apt-get install postgis*

CREATE DATABASE ‘test_gis’

Next, create database ‘test_gis’. We will use database ‘test_gis’ to store the .shp file as record.

– Open http://localhost/phppgadmin
– Click Create Database, type database name with ‘test_gis’ and choose template ‘gis’ like this :
create database and choose template gis for postgis
– Click Create, and then you can see 2 table ‘spatial_ref_sys’ and ‘topology’ inside database ‘test_gis’.

INSERT .SHP TO POSTGIS

If you follow the previous tutorial, we already download ‘example code’. Now, we will use the ‘example code’ in this tutorial. So if you doens’t read previous tutorial, please read first.

Next, we will insert .shp file to postgis as record. Execute the following command :

$ cd /home/noname/Downloads/node-mapnik-sample-code-master/data
$ shp2pgsql -I -s 4269 -W “latin1” world_merc.shp public.world_merc | psql -U postgres -d test_gis

shp to postgis on ubuntu 14 04
world_merc shp to postgis

SETTING DATABASE POSTGIS IN MAPNIK

Next, we must setting database on app.js :

$ cd ..
$ cd tile/database
$ sudo vi app.js
change dbname, table, user like this :
setting database postgis on mapnik

RUN MAPNIK

– Now, run mapnik with the following code :
$ node app.js 8000

It will execute app.js with port 8000.

– Next, open http://localhost:8000 to see the .png tiles :
png tiles mapnik

Awesome! 🙂

SHOW .PNG TILES ON LEAFLET MAP

The last step we will display .png tiles leaflet map. Leafet is open source javascript library for mapping. So first we must download leaflet.
1) Go to http://leafletjs.com/download.html, click Leaflet 0.7.7 :
download leaflet source

2) extract and move folder ‘leaflet’ into /var/www/html
3) create index.php and insert the following script to display tiles on leaflet map :

<!-- leaflet map -->
<link rel="stylesheet" href="leaflet/leaflet.css" />
<script src="leaflet/leaflet.js"></script>

<style>
body{margin:0px;}
#map { height: 600px; }
</style>
<div id="map"></div>


<script>
var map = L.map('map').setView([-8.9016455,125.6174445], 9);
    // needed token
    ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ';
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + ACCESS_TOKEN, {
        attribution: 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(map); 

    // mapnik and postgis here
    L.tileLayer('http://localhost:8000/{z}/{x}/{y}', {
        attribution: 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(map); 
</script>

4) open http://localhost/index.php and BINGO !! you can see tiles with green color on map 🙂
tiles png on leaflet map - mapnik

FINISH! ‘Like Fans page Facebook’ if you like this tutorial. 🙂

[related_post themes="text" id="3626"]

Ambar Hasbiyatmoko

Hello, I’m web developer. Passionate about programming, networking and web server. @kaskus  @facebook

One Comment

  1. Hi Ambar,
    I have some questions relative to postgis data and mapnik, hope you can take a look and help me.
    With the sample code and sample data from node mapnik sample github, I think mapnik use geom fields in postgis db to draw points on tiles (when i remove other fields, it’s still work well).
    But when I create a new table with just lat, lon, geom. I input
    lat = 46.66452,
    lon = 7.02026
    and using this comment to generate geom value: UPDATE switzerland SET geom = ST_SetSRID(ST_MakePoint(lat,lon),4326);
    geom will be : 0101000020E6100000DBC4C9FD0E554740F8AA9509BF141C40
    The point on map is not showed at expected position, instead, it always shows a point in ocean, under Ghana country, even I change lat, lon to any values.
    Do you know why it has result like that, and if I want to show my expected location with its lat lon, how should I do, please?

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.