server-side-map-combiner

Combines OSM map tiles to a single image

Usage no npm install needed!

<script type="module">
  import serverSideMapCombiner from 'https://cdn.skypack.dev/server-side-map-combiner';
</script>

README

Server Side Map Tile Combining

Description

This module uses CANVAS to put OSM Map tiles to a single image on the server side using Nodejs. There is a max zoom level setting to prevent big zoom levels taking forever to load. It is a direct replacement for using jsdom with leaflet.

How To Use

Save file on server

For saving an image make an app like this.

//Include the module into your app
var L = require('server-side-map-combiner');

//Pass some parameters for the tiles
var params = {
    baseURL: 'http://c.tile.openstreetmap.org/',
    top: -6.115216,
    bottom: -6.29755,
    left: 106.88805,
    right: 107.05044,
    zoom: 12,
    resultFilename: "./test.png"
};

//Make the image
L.makeMap(params,function(image){
    console.log('done');
});

Stream image to client using express

If streaming the image to the client you can do this:

var L = require('server-side-map-combiner');
var express = require('express');
var app = express();

app.get('/:z/:top/:left/:bottom/:right', function(req, res) {

    var params = {
        baseURL: 'http://c.tile.openstreetmap.org/',
        top: +(req.params.top),
        bottom: +(req.params.bottom),
        left: +(req.params.left),
        right: +(req.params.right),
        zoom: +(req.params.z)
    };

    L.makeMap(params,function(data){
        //data also has the new top, bottom, left and right coords
        //because the output image is tiles and we round to the nearest tile
        //so data is containing top, bottom, left, right, and canvas 
        console.log(data);
        if (data.canvas){
            var stream = data.canvas.createPNGStream();
            res.type("png");
            stream.pipe(res);
        }
    });
});

app.listen(process.env.PORT || 80);
console.log('server running on port 80');