guide4you

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

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

or

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:

  g4u.createMap('#g4u-map')

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

Documentation

An API-documentation can be found here: https://klausbenndorf.github.io/guide4you/index.html.

Part of the API-documentation is a documentation of the map configuration and layer configuration JSON-objects.

(A german not up-to-date documentation can be found here: GUIDE4YOU Benutzerhandbuch)

Support

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

Mobile Screenshot