node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


Guide4You guide4you

Greenkeeper badge

NPM JavaScript Style Guide Continuous Integration Documentation Coverage

GUIDE4YOU is a JavaScript Web client application built on OpenLayers that supports both desktop and mobile web browsers and features a responsive design.

Screenshot of desktop view, 736x467 pixel

For a screenshot of the mobile view see below.

What can GUIDE4YOU do for you?

With the basic system GUIDE4YOU can:

  • Display maps like Openstreetmap, OpenTopoMap, or OpenCycleMap
  • Use OSM, WMS, WFS, KML, GPX (others follow)
  • Measure areas and distances
  • Display your location
  • Print the current view on a single page
  • Overlay a base map with points of interest and the like
  • Configure a set of base maps and overlays to choose from
  • Allow for different languages

With additional modules it can also:

  • URLAPI module: Generate links so you can share a certain view of a map. That view can include a location marker and a description of the location in question.
  • Search module: Search for locations using Nominatim. Alternatively you can customize this module to use other engines.
  • Edit GPX data (coming soon)

Why use GUIDE4YOU?

Compared to alternative software GUIDE4YOU provides a couple of interesting features:

  • Highly customizable
  • Support for new languages can easily be added. English, german, polish and arabic are supported out of the box.
  • Icons are vector graphics (SVG) so they can be scaled to whatever size seems suitable
  • No separate mobile and desktop versions
  • Easily extensible

Which browsers are supported?

All modern browsers including

  • Firefox
  • Chrome
  • Edge and Internet Explorer 10+
  • Safari

How to setup?

Install guide4you from npm or clone the repository

npm install guide4you


git clone

To find out what is needed to include GUIDE4YOU intoe a webpage check out the index.html in the dist folder. It contains everything that is needed to get you started.

The crucial part is:


This method creates the map in the given DOM-Element. It accepts a selector or a reference to a DOM-Element. As a second and third argument it accepts a map configuration and a layer configuration. Both can be provided as paths to JSON-files or as actual JavaScript objects.

How to build a customized version of GUIDE4YOU?

Switch into the guide4you directory and install all dependecies using

npm install

Then build with a configuration of your choice

npm run build conf/simple

If you want to develop you can use the dev server script, which listens on port 8080 by default

npm run dev conf/simple


A german documentation can be found here: GUIDE4YOU Benutzerhandbuch

An API-Documentation can be found here:


Please feel free to ask any question on Stackoverflow with the guide4you tag and file any bugs in the issue tracker.

Mobile Screenshot

Screenshot of mobile view, 360x640 pixel