A configurable web client for geo-applications. Uses OpenLayers 5. Optimized for mobile devices.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


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 https://github.com/KlausBenndorf/guide4you.git

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: https://klausbenndorf.github.io/guide4you/index.html.


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