Home

Awesome

overpass-layer

Show a Leaflet layer using OpenStreetMap data from Overpass API via overpass-frontend.

Check the Demos and how to set them up.

Usage

// Connect to Overpass API - you can also use a (small) .osm file as data source
var overpassFrontend = new OverpassFrontend('//overpass-api.de/api/interpreter')

// Create the layer
var layer = new OverpassLayer({
  overpassFrontend: overpassFrontend,
  query: 'nwr[building]',
  minZoom: 16,
  feature: {
    title: '{{ tags.name }}',
    style: { width: 1, color: 'black' }
  }
})

// Create a LeafletJS map
var map = L.map('map').setView([ 51.5, 0.0 ], 16)

// Add the layer to the map
layer.addTo(map)
// ... or use a control
//var layerControl = L.control({}, { 'Buildings': layer })
//layerControl.addTo(map)

API

constructor OverpassLayer(options)

Create a Layer with an Overpass query and optional options.

Options:

Style options

Without extensions installed, the following style parameters are available:

ParameterTypeDefaultRemarks
strokebooleantrue
colorcolor#3388ff
widthlength3
opacityfloat1.0
lineCapstringround
lineJoinstringround
dashArraymutiple values of length''
dashOffsetlength''
fillbooleandepends
fillColorcolordepends
fillOpacityfloat0.2
fillRulestring'evenodd'
radiusfloatdependsCircle and CircleMarker only
bubblingMouseEventsbooleantrue
interactivebooleantrue
panestring'overlayPane'
attributionstringnullOverride default attribution
smoothFactorfloat1.0Polyline only
zIndexfloat0.0Order of features (higher = front). This is not very efficient, using 'pane' is faster.

Types:

TwigJS templates

The data of an object is available as patterns. Tags and Meta information is only available, if these properties have been downloaded (see option 'properties'). Variables will automatically be HTML escaped, if not the filter raw is used, e.g.: {{ tags.name|raw }}.

The templates will be rendered when the object becomes visible and when the zoom level changes.

Examples: Amenity: {{ tags.amenity }}: might render as "Amenity: restaurant" {% if tags.cuisine=='pizza' %}🍕{% else %}🍴{% endif %}: might render as "🍴" {% for k, v in tags %}{{ k }}: {{ v }}<br/>{% endfor %}: list all tags with "key: value" <a href="{{ tags.website }}">{{ tags.name }}</a>: Create a HTML link to the website with the tag name as title.

You can access the twig instance via OverpassLayer.twig for extending (e.g. with custom functions or filters). Use OverpassLayer.twig.extendFunction(...).

If you set an arbitrary value within a twig template (e.g.: {% set foo = "bar" %}), it will also be available in further templates of the same object by using (e.g.: {{ foo }}). The templates will be evaluated in the order as they are defined.

method addTo(map)

Add layer to the given map.

method setBounds(bounds)

Forces a boundary (as with option bounds). Accept a boundary of the type GeoJSON.

method remove()

Removes the OverpassLayer and all its features.

method recalc()

Calculates the object data for each visible feature and call the update event.

method get(id, callback)

Load the given object, even if it should not be shown in the given layer / at the current zoom level.

The callback will be called with the following parameters: err, ob (see event add).

method show(id, options, callback)

Show the given object, even if it should not be shown in the given layer / at the current zoom level.

The options parameter influences how the object should be shown. (Consecutive calls of show() will override the options of previous calls).

Available options:

The callback will be called with the following parameters: err, ob, data (see event add).

method hide(id)

Hide the given object, resp. remove show options. If it is shown due to layer definition, it will still be visible.

method twigData(object)

Return twig data for object (for rendering).

method setFilter(filter)

Set an additional filter. Will intiate a check_update_map(). See OverpassFrontend.Filter for details.

method setLayout(id, layout)

You can define several layouts, which will be rendered for each object. The rendered objects can be accessed from the layouts attribute of the data parameter of the events (e.g. add, update, ...).

The layout parameter is a string in TwigJS template language. In contrast to the feature-templates, the result of the feature evaluation is available with the 'object' prefix. Also, autoescapeing is disabled (because feature templates render to HTML).

The layout paramter could also be a function, which will be called with an object with the object property. If the function returns null, the content of the popup will not be updated.

Example: {{ object.title }}.

method getShiftWorld()

get the degrees by which the world should be shifted, to show map features at the current view port (e.g. when you wrap over -180 or 180 longitude). E.g. near lon 180, the Eastern hemisphere (lon 0 .. 180) does not have to be shifted, the Western hemisphere (lon -180 .. 0) has to be shifted by 360 degrees.

Returs an array with two elements: degrees to shift the Western hemisphere, degrees to shift the Eastern hemisphere. Each value is a multiple of 360.

event 'add', Paramters: ob, data

Will be called when an object appears on the map (e.g. load from server, zoom in, viewport moves in)

Parameter:

event 'remove', Parameters: ob, data

Will be called when an object disappears from the map (e.g. zoom out, pan out, ...)

See add for the description of parameters.

event 'zoomChange', Parameters: ob, data

Will be called every time when the zoom level changes. Occurs instantly after zoom level change for each object, before assessing if the object is visible at the current zoom level.

See add for the description of parameters.

event 'update', Parameters: ob, data

Called every time, when the object is being re-calculated (also when zoom level changes).

See add for the description of parameters.

event 'twigData', Parameters: ob, data, result

Called for every object on re-calculation. Result is the twigData which will used for evaluating each object. Any listeners may modify this result object.

See add for the description of other parameters.

event 'layeradd', no parameters.

Emitted when the layer gets added.

event 'layerremove', no parameters.

Emitted when the layer gets removed.

Optional features

Text along lines

npm install --save leaflet-textpath

Include script:

<script src="node_modules/leaflet-textpath/leaflet.textpath.js"></script>

The style of the text labels can be set with these parameters:

FieldTypeDefaultDescription
textstringnullLabel to show along the line (null for no label). (this impacts performace, as SVG labels are used).
textRepeatbooleanfalseSpecifies if the text should be repeated along the polyline.
textCenterbooleanfalseCenters the text according to the polyline's bounding box.
textOffsetfloat0Set an offset to position text relative to the polyline.
textBelowbooleanfalseShow text below the path.
textFillcolorblackColor of the text.
textFillOpacityopacity1.0Text opacity.
textFontWeightstringnormalBoldness or lightness of the glyphs used to render the text.
textFontSizefont size12pxFont size of the text.
textLetterSpacingfloat0Extra letter spacing of the text.

Line offset

npm install --save leaflet-polylineoffset

Include script:

<script src="node_modules/leaflet-polylineoffset/leaflet.polylineoffset.js"></script>

Each style can have an 'offset' parameter, which will offset the line. It's of type 'length', so you can use units.

Pattern

npm install --save leaflet-polylinedecorator

Include script:

<script src="node_modules/leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js"></script>

Each style can have several patterns with this additional options (where X identifies the pattern. X is an arbitrary string without dashes, e.g. '', '0', 'A', 'foobar'):

Depending on the type of pattern, the following options are available:

To set path options use the prefix patternX-path-, e.g. patternX-path-width or patternX-path-color.