Instantly share code, notes, and snippets.

@rochoa /README.md
Last active Aug 22, 2018

Embed
What would you like to do?
CARTO Node.js code test

CARTO Node.js code test

Introduction

At CARTO, among other things, we render maps, just check this example of Map with countries and USA states.

In order to limit the scope of the challenge, we are gonna use Mapnik and Node.js. Within this repository, we are providing all the pieces you need to reproduce that map. Well, all pieces except the map tile server.

An example of how to create an image with Mapnik:

const fs = require('fs');
const mapnik = require('mapnik');
const path = require('path');

mapnik.register_datasource(path.join(mapnik.settings.paths.input_plugins, 'shape.input'));

const TILE_SIZE = 256;

const map = new mapnik.Map(TILE_SIZE, TILE_SIZE);
map.load('./style-admin0.xml', function(err, map) {
    map.zoomAll();
    const im = new mapnik.Image(TILE_SIZE, TILE_SIZE);
    map.render(im, function(err, im) {
        im.encode('png', function(err, buffer) {
            fs.writeFile('map.png', buffer);
         });
    });
});

To run that code, you have to install the dependencies with npm install (you need Node.js 6 LTS and NPM). If everything went OK, you can run the example yourself using npm run mapnik-example, and you will get something like:

map.png

There are a couple of Mapnik styles: style-admin0.xml and style-admin1.xml that represents the two layers used in the original example. You can modify mapnik-example.js to see the different results.

Now, if you open index.html in your browser, you will see a Map that does not show anything. That's because it expects to have a server returning tiles from http://localhost:8888/. You can check the type of URLs it requests.

The challenge

Build a basic Map Tile Server with Mapnik and Node.js that provides the basic service to render a map like the presented above. Use server.js as your main file.

References

<!DOCTYPE html>
<html>
<head>
<!-- Example based on http://leafletjs.com/examples/layers-control/example.html -->
<title>Layers Control Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
<style>
#map {
width: 600px;
height: 400px;
}
.leaflet-container {
background-color: #FFF;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var admin0url = 'http://localhost:8888/admin0/{z}/{x}/{y}.png';
var admin1url = 'http://localhost:8888/admin1/{z}/{x}/{y}.png';
var admin0 = L.tileLayer(admin0url);
var admin1 = L.tileLayer(admin1url);
var map = L.map('map', {
center: [40, -80],
zoom: 1,
layers: [admin0]
});
var layers = {
"Admin 0": admin0,
"USA Admin 1": admin1
};
L.control.layers(null,layers).addTo(map);
</script>
</body>
</html>
'use strict';
const fs = require('fs');
const mapnik = require('mapnik');
const path = require('path');
mapnik.register_datasource(path.join(mapnik.settings.paths.input_plugins, 'shape.input'));
const TILE_SIZE = 256;
const map = new mapnik.Map(TILE_SIZE, TILE_SIZE);
map.load('./style-admin0.xml', function(err, map) {
map.zoomAll();
const im = new mapnik.Image(TILE_SIZE, TILE_SIZE);
map.render(im, function(err, im) {
im.encode('png', function(err, buffer) {
fs.writeFile('map.png', buffer);
});
});
});
This file has been truncated, but you can view the full file.
View Raw

(Sorry about that, but we can’t show files that are this big right now.)

View Raw

(Sorry about that, but we can’t show files that are this big right now.)

View Raw

(Sorry about that, but we can’t show files that are this big right now.)

View Raw

(Sorry about that, but we can’t show files that are this big right now.)

View Raw

(Sorry about that, but we can’t show files that are this big right now.)

View Raw

(Sorry about that, but we can’t show files that are this big right now.)

View Raw

(Sorry about that, but we can’t show files that are this big right now.)

View Raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment