Skip to content

Instantly share code, notes, and snippets.

@rochoa
Last active June 21, 2022 18:42
Show Gist options
  • Save rochoa/9a7a3f4c91e8ea20458f87b8861d0ba2 to your computer and use it in GitHub Desktop.
Save rochoa/9a7a3f4c91e8ea20458f87b8861d0ba2 to your computer and use it in GitHub Desktop.
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/[email protected]/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/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.)

@alexon1234
Copy link

Estoy intentando hacer npm run mapnik-example, pero tengo problemas para ejecutarlo.

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