Skip to content

OpenStreetMap Explorer

Jump to bottom Edit New page
Vladimir Elistratov edited this page Dec 9, 2015 · 19 revisions
Leaflet Library engine Google Earth Javascript API engine

OpenStreetMap Explorer is a demo application featuring OpenStreetMap file parser of the djeo library and CheckBox Tree to represent map features hierarchically. Double click on any tree element zooms a map on the corresponding map feature.

By default the OpenStreetMap file with the center of Berlin is loaded. Please note that its size is 12 Mb.

You might consider to try a local version of the demo under your local web server. Please see here how to setup a local web server easily if you don't have one. The demo is available for download here. Point your browser to osm-explorer/djeo-demo/osm-explorer/osm-explorer.html. All options described below are also applicable to the local version.

The demo can be viewed under the following links:

URL Options

Place url options after the ? symbol at the end of the URL like:

?key=value

if you specify only one option or

?key1=value1&key2=value2

if you specify two or more options

djeoEngine

The djeoEngine option sets an engine for the djeo library. Possible values are

  • djeoEngine=leaflet (Leaflet)
  • djeoEngine=gmaps (Google Maps API)
  • djeoEngine=ge (Google Earth API)
  • djeoEngine=ymaps (Yandex Maps API)

data

The data option sets a path to an OpenStreetMap file relative to osm-explorer.html. The following files are included to both online and local versions:

  • data=data/berlin.osm (the default)
  • data=data/paris.osm
  • data=data/sochi.osm (the host of 2014 Olympic and Paralympic Winter Games)

It is possible to use other OpenStreetMap files with the local version. Download one from http://osm.org (Export tab). Set the path to your file relative to osm-explorer.html in the data option.

locale

Labels for folders in the CheckBox tree can be displayed in one of the following languages: English, Russian, German. The application detects automatically the locale in your browser and uses appropriate labels for the tree. English labels are used by default. Map features in an OpenStreetMap file may have names in the arbitrary number of languages. If the name exists for the browser's locale, it is used as a tree label. Use locale option to set a specific locale, e.g.

  • locale=en
  • locale=de
  • locale=ru

Customizing Look and Feel

Map Styling

Style for the application is defined in the file style.js. The file is referenced in the HTML file osm-explorer.html in the call to the require function. The file is the second one in the array after "djeo/parser/osm". If you want to change map style, we recommend you to start from style.js. Copy it to a different file and change the reference in the require call accordingly.

Let's examine the file style.js. You can see the return javascript expression with an array of style rules. This array is supplied to a Map object during its creation under the style attribute. During the style calculation interation through the array is performed for each map object starting from the array element with index 0. Each subsequent style rule can overide and extend the styling attributes from the previous style rule. A style rule is considered only if its filter attribute is evaluated to true for a map object under the question. If a style rule doesn't have the filter attribute, it takes part in the style calculation anyway.

The content of the filter attribute is self explaining. It is just a logical expression. Use $ symbol to access the value of an OpenStreetMap object attribute (e.g. $highway, $landuse).

The meaning of styling attributes (filter, stroke, strokeWidth, etc) is also self explaning. The attribute size defines width and height of an image. In our example all images will have the size 24x24 pixels since the size attribute is defined in the first style rule and is not overriden in the subsequent style rules.

A style rule may contain a tooltip function. The function takes a feature javascript object as input parameter and returns the tooltip content as HTML string. Use feature's get function to access the value of an OpenStreetMap object attribute inside the tooltip function (e.g. feature.get("name")).

A style rule may also contain guiIcon attribute. If set, it specifies an icon used in the checkbox tree to represent a map feature.

Finally, each style rule should have an id attribute. It is used to build the checkbox tree (see below).

The Content of the Checkbox Tree

The content of the checkbox tree is specified in a special javascript array. Its default version is located in the file djeo/parser/osm/_defaultFeatureTree.js. If you want to supply your own tree definition, add the attribute featureTree on the following line of the file osm-explorer.html:

features: osm.parseFromUrl(hrefParams.data ? hrefParams.data : "data/berlin.osm", {featureTree: youTreeDefinition, style: style}),

Let's examine the default checkbox tree definition array. Each javascript object in the array defines a specific folder of the tree. Use the attribute features to start a new branch of folders. The attribute name sets the default label for a folder. The default label is used when a name for the desired locale is not available. To provide the name for a specific locale, use attributes like in the following examples: "name:ru", "name:de". Finally, please pay your attention to the attribute sid which stand for "style id". It refers to the filter in the style rule with id equal to the sid (see above). If the filter is evaluated to true for a map object under the question, that map object will go to the folder with sid equal to the id of the style rule. If a folder definition does not contain the sid attribute, it will not contain any map object. It may contain only subfolders. If a folder definition does contain the sid attribute, there must the corresponding style rule with a filter and with id equal to the sid.

Licenses

Add a custom footer
Add a custom sidebar
Clone this wiki locally