Giter VIP home page Giter VIP logo

jperelli / osm-static-maps Goto Github PK

View Code? Open in Web Editor NEW
151.0 8.0 53.0 324 KB

Openstreetmap static maps is a nodejs lib, CLI and server open source inspired on google static map service

Home Page: http://osm-static-maps.herokuapp.com/

License: GNU General Public License v2.0

JavaScript 72.01% HTML 25.22% Dockerfile 2.77%
openstreetmap static maps static-maps static-maps-api geometry polygon geojson cli shell

osm-static-maps's Introduction

osm-static-maps

Openstreetmap static maps is a nodejs lib, CLI and server open source inspired on google static map service

Here you have a demo. Also a dynamic version of the demo, for testing purposes.

How to use

1. CLI

sudo npm i -g osm-static-maps
osmsm --help
osmsm -g '{"type":"Point","coordinates":[-105.01621,39.57422]}' > map.png
  • note: if you have this error trying to install globally Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/osm-static-maps/node_modules/puppeteer/.local-chromium', it's caused by this pupeteer issue puppeteer/puppeteer#367, you can workaround by installing globally with the unsafe-perm flag:
sudo npm i -g osm-static-maps --unsafe-perm=true

2. nodejs library

npm install osm-static-maps
// index.js old school
osmsm = require('osm-static-maps');
osmsm({geojson: geojson})
  .then(function(imageBinaryBuffer) { ... })
  .catch(function(error) { ... })

// index.js modern style (also supports typescript)
import osmsm from 'osm-static-maps'
const imageBinaryBuffer = await osmsm({geojson})

3. Standalone sample server

sudo npm i -g osm-static-maps
osmsm serve

Or you can use docker-compose

git clone [email protected]:jperelli/osm-static-maps.git
cd osm-static-maps
docker-compose up

4. Cloud service

You can use the heroku-hosted alternative directly here

We are currently in the cloud beta, contact me directly at [email protected] so I can give you access to the cloud service.

API Reference

All parameters have a short and long version. The short version can be used only with the shell CLI. The long version can be used with the library and can be passed to the app server as GET query params, or POST json body (remember to set the header Content-Type: application/json)

Parameter Description Default Value
g geojson geojson object to be rendered in the map undefined
f geojsonfile filename or url to read geojson data from (use '-' to read from stdin on CLI) undefined
H height height in pixels of the returned img 600
W width height in pixels of the returned img 800
c center center of the map lon,lat floats string (center of the geojson) or '-57.9524339,-34.921779'
z zoom zoomlevel of the leaflet map if vectorserverUrl available, use 12 else 20
Z maxZoom max zoomlevel of the leaflet map 17
A attribution attribution legend 'osm-static-maps / © OpenStreetMap contributors'
t tileserverUrl url of a tileserver 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
m vectorserverUrl url of a vector tile server (MVT style.json) undefined
M vectorserverToken token of the vector tile server (MVT) 'no-token'
D renderToHtml returns html of the webpage containing the map (instead of a binary image) false
F type format of the image returned ('jpeg'/'png') 'png'
q quality quality of the image returned (0-100, only for jpg) 100
x imagemin enable lossless compression with optipng / jpegtran false
X oxipng enable losslsess compression with oxipng false
a arrows render arrows to show the direction of linestrings false
s scale enable render a scale ruler (boolean or a json options object) false
T timeout miliseconds until page load throws timeout 20000
k markerIconOptions set marker icon options (a json options object) *see note undefined (leaflet's default marker)
S style style to apply to each feature (a json options object) *see note undefined (leaflet's default)
e haltOnConsoleError throw error if there is any console.error(...) when rendering the map image false
  • Note on markerIconOptions: it's also accepted a markerIconOptions attribute in the geojson feature, for example {"type":"Point","coordinates":[-105.01621,39.57422],"markerIconOptions":{"iconUrl":"https://leafletjs.com/examples/custom-icons/leaf-red.png"}}

  • Note on style: it's also accepted a pathOptions attribute in the geojson feature, for example {"type":"Polygon","coordinates":[[[-56.698,-36.413],[-56.716,-36.348],[-56.739,-36.311]]],"pathOptions":{"color":"#FF5555"}} (also remember that the # char needs to be passed as %23 if you are using GET params)

Design considerations & architecture

Read the blogpost on the creation of this library and how it works internally

LICENSE

  • GPLv2

Credits

Specially to the contributors of

  • OpenStreetMap
  • Leaflet
  • Puppeteer
  • ExpressJS
  • Handlebars

osm-static-maps's People

Contributors

chapa avatar jperelli avatar sharkoz avatar skde avatar snoopysecurity avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

osm-static-maps's Issues

Getting started

Hi! This is just what I was looking for!
Is there a documentation of this API? I wonder how I should go about rendering a piece of a map, with a custom marker and a popup (eventually). Is that possible?

Currently, I do that with Google Static Maps API, to generate this kind of thing:
Captura de tela de 2020-02-06 18-16-25

osm-static-map doesn't work in docker container

I've created a little application that generate an image from geoJson data through API. My problem is, even if everything works well on local I cant' make it work on docker container.

Here is the code

require("dotenv").config();
const osmsm = require("osm-static-maps");
const express = require("express");
const app = express();

const fs = require("fs");

app.use(express.json());

app.post("/generateStaticMap", async (req, res) => {
  const { geojson } = req.body;

  const imageBinaryBuffer = await osmsm({ geojson });

  res.send(imageBinaryBuffer.toString("base64"));
});

app.listen(process.env.APP_PORT, () => {
  console.log(`Server is running on port ${process.env.APP_PORT}.`);
});

Here is the docker file

FROM node AS builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .

# Second Stage : Setup command to run your app using lightweight node image
FROM node
WORKDIR /app
COPY --from=builder /app ./
RUN \
    apt-get update \
    && \
    apt-get install -y \
    libx11-xcb1 \
    libxtst6 \
    libnss3 \
    libxss1 \
    libasound2 \
    libatk-bridge2.0-0 \
    libgtk-3-0 \
    fonts-wqy-zenhei \
    && \
    rm -rf /var/lib/apt/lists/*

RUN \
    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y \
    && \
    /root/.cargo/bin/cargo install oxipng

CMD ["npm", "run", "start"]

And finally here is the error I get when I try to create an image

{}
/app/node_modules/osm-static-maps/src/lib.js:76
    return browser.newPage()
                   ^

TypeError: Cannot read properties of null (reading 'newPage')
    at Browser.getPage (/app/node_modules/osm-static-maps/src/lib.js:76:20)
    at async /app/node_modules/osm-static-maps/src/lib.js:151:20

Add cache

Think on how to add a directory/redis/memcache cache so that this can be used as a <img src="..."> tag more efficiently. Maybe add a cache param like

  • cache=directory:path
  • cache=redis:url
  • cache=memcache:url
    and maybe use another param like cache_force_refresh=true to refresh cache, or a timeout like cache_timeout to expire old elements saved in cache

this module looks good enough https://www.npmjs.com/package/cache-manager
and this one to build the key from the options object https://www.npmjs.com/package/json-stable-stringify

Top-level declarations in .d.ts files

node_modules/osm-static-maps/src/lib.d.ts:141:1 - error TS1046: Top-level declarations in .d.ts files must start with either a 'declare' or 'export' modifier.
function _default<T extends OsmStaticMapsOptions>(
This change helps:
#30

Draw circles

Hi, I'm wondering if there is a way to draw circles ?
Thanks for this project!

Add to OSM server

Julian, cómo estás? Tengo mi propio servidor de OSM y quiero agregarle esta funcionalidad.

Es eso posible? Tenés algo en lo que me pueda basar?

Muchas gracias!

Saludos,
Federico.

(Habia escrito todo en ingles hasta que vi que eras Argentino, yo soy Uruguayo!)

GeoJSON fill color

Is it possible to adjust the fill color used to display geojson polygons?

Crash when adding very large polylines

I am getting the following crash when trying to add very large polylines:

code:"E2BIG"
errno:"E2BIG"
error:Error: spawnSync /bin/sh E2BIG
message:"spawnSync /bin/sh E2BIG"
output:null
path:"/bin/sh"
pid:79999
signal:null

Any advice?

There is "Application error" in demo

I am aware of that

heroku server might be unstable because of too many requests being made to it

but http://osm-static-maps.herokuapp.com/ showing

 Application error

An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail 

looks suspicious to me.

Better docker image

Hi,

I've been watching docker-related files to fix a problem I had (see #19), and it doesn't seem to be "production-ready" IMO.

Here's some issues I see :

  • npm install is done when the container is started (instead of when the image is built)
  • the container runs nodemon instead of node
  • a volume map the entire root folder (to avoid npm install on each docker run I guess)

Also, resolving these issues would allow to push the image on the docker hub, which would come in handy !

If you're interested I can work on a PR to make things better.

Unknown options.type value: FeatureCollection

Im using POST method and I have this error. I insert a json file with the body:
{ "zoom": 12, "height": 673, "width": 1067, "type": "FeatureCollection", "features":[ { "type":"Feature", "properties":{ }, "geometry":{ "type":"Point", "coordinates":[ -45.194978739803766, -22.78995147526845 ] } } ] }

Style Customization

@jperelli Thanks for this repo. I'm wondering if there is a way customize the styles and colors of the map or use the exported style for mapbox on this?

Create a CLI

  • Receive geojson param and save as file directly (jpg/png/html)
  • Receive all other parameters
  • Also be able to receive geojson as stdin (check if stdin is being active and use param from there)
  • Install binary into filesystem

Blank backgorund

Is it possible to have a blank background and just return the drawn polyline/markers?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.