plepe / OpenStreetBrowser

An application to ‘browse’ the information in the displayed part of the map. Similar to common Wikis and also the main page of http://www.openstreetmap.org the website shows a narrow menu on the left side, most of the page is used for the display of the map. In contrast to most Wikis the menu is not static, but rather the content of the map can be browsed in categories. For the map a special style has been developed (sorry guys, I neither like the default Mapnik nor Osmarender styles), and special overlays are displayed to support the current browsed categories. When you click on an object (either from the list or directly on the map) informations on this object are displayed.
http://www.openstreetbrowser.org
GNU General Public License v3.0
88 stars 20 forks source link

OpenStreetBrowser

OpenStreetBrowser is a web application where you can 'browse' the information from OpenStreetMap in thematic categories. A large variety of categories is already available, additional categories can easily be created.

INSTALL

git clone https://github.com/plepe/openstreetbrowser.git
cd openstreetbrowser
npm install
composer install
git submodule init
git submodule update
cp conf.php-dist conf.php
nano conf.php
npm run build
modulekit/build_cache
bin/download_dependencies

=> more detailed Installation instructions

Upgrade

cd openstreetbrowser
git pull
npm update
git submodule init
git submodule update
npm run build

DEVELOPMENT

Develop categories

rm -r node_modules/openstreetbrowser-categories-main
git clone https://github.com/plepe/openstreetbrowser-categories-main.git node_modules/openstreetbrowser-categories-main

You are welcome to send pull requests via Github!

Category definition

There are currently two types of categories: index (for sub categories) and overpass (for OpenStreetMap data, loaded via an Overpass API request). Each of them is defined via a JSON (old) or YAML (recommended) structure. They can be combined into a single file.

Check out the tutorial!

Category 'index'

File: dir.yaml

type: index
subCategories:
  - id: foo
  - id: bar
    type: overpass
    query: node[amenity=bar]

This will define a category with the id 'dir' (from the file name) with two sub-categories: 'foo' (which will be loaded from the file foo.yaml) and 'bar' (which is defined inline as category of type 'overpass' and will show all nodes with the tag 'amenity' set to value 'bar' - see below for more details).

Category 'overpass'

File: foo.yaml

type: overpass
query:
  12: (node[highway~'^(motorway_junction)$'];way[highway~'^(motorway|trunk)$'];)
  14: (node[highway~'^(motorway_junction|mini_roundabout|crossing)$'];way[highway~'^(motorway|trunk|primary)$'];)
  16: (node[highway];way[highway];)
feature:
  style:
    color: '{% if tags.highway == ''motorway'' %}#ff0000{% elseif tags.highway == ''trunk'' %}#ff7f00{% elseif tags.highway == ''primary'' %}#ffff00{% else %}#0000ff{% endif %}'
  markerSign: '{% if tags.highway == ''motorway_junction'' %}↗{% elseif tags.highway == ''mini_roundabout'' %}↻{% elseif tags.highway == ''crossing'' %}▤{% endif %}'
  title: '{{ localizedTag(tags, ''name'') |default(localizedTag(tags, ''operator'')) | default(localizedTag(tags, ''ref'')) | default(trans(''unnamed'')) }}'
  description: '{{ tagTrans(''highway'', tags.highway) }}'
  body: 'Foo value: {{ const.foo }}'
const:
  foo: foo value

This will define a category with the id 'foo' (from the file name). It will show some highway amenities, depending on the current zoom level.

If you want to know more, please check out the tutorial. For a full list of parameters, see the category parameters.

All values in the "feature" section may use the TwigJS language for evaluation.

Hooks

With the function register_hook you can hook into several functions. The following hooks are available:

New locale

require('moment/locale/CODE')


* Run `npm run build-locales`