Leaflet OverPass Layer

This plugin is a fork of https://github.com/kartenkarsten/leaflet-layer-overpass

What is it?

A Leaflet plugin to create a custom POI overlay - thanks to the OSM dataset and the Overpass API

Here is a demo with associated sourcecode.

Installation

$3

``bash $ npm install leaflet-overpass-layer`

`$3`

If you use bower to install leaflet-layer-overpass, you need to load JsClipper first.

`bash $ bower install leaflet-overpass-layer`

`Usage`

You can include and use the OverpassLayer.css and OverpassLayer.bundle.js files from the dist folder in your html.

`javascript var attr_osm = 'Map data © OpenStreetMap contributors'; var attr_overpass = 'POI via Overpass API';

var osm = new L.TileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 'opacity': 0.7, 'attribution': [attr_osm, attr_overpass].join(', ') } );

var map = new L.Map('map') .addLayer(osm) .setView(new L.LatLng(52.265, 10.524), 14);

var opl = new L.OverPassLayer({

'query': '(node({{bbox}})[organic];node({{bbox}})[second_hand];);out qt;', });

map.addLayer(opl);`In order to get a valid query the Overpass-turbo IDE might help.

`What are the options?`


You can specify an options object as an argument of L.OverPassLayer.

javascript
options: {

debug: false, minZoom: 15, endPoint: 'https://overpass-api.de/api/', query: '(node({{bbox}})[organic];node({{bbox}})[second_hand];);out qt;', loadedBounds: [], markerIcon: L.Icon(), timeout: 30 * 1000, // Milliseconds retryOnTimeout: false, noInitialRequest: false, minZoomIndicatorEnabled: true, minZoomIndicatorOptions: { position: 'topright', minZoomMessageNoLayer: 'No layer assigned', minZoomMessage: 'Current zoom level: CURRENTZOOM - All data at level: MINZOOMLEVEL' }, beforeRequest: function() {}, afterRequest: function() {}, onSuccess: function(data) {}, onError: function(xhr) {}, onTimeout: function(xhr) {}, };`

`Dependencies`

* Leaflet

`Development`

Warning: This fork use Git Flow to manage branches.

In order to contribute to the project you should first clone the repository. The javascript source files reside in thesrc folder and are concatenated and minified by Webpack in the distfolder. If you want to make changes make them in thesrc folder and then run npm run build (or npm run watchfor continuous build). For that you first need to install all the needed packages for this project:`$ npm install``

Usage

You can include and use the OverpassLayer.css and OverpassLayer.bundle.js files from the dist folder in your html.

javascript
var attr_osm = 'Map data © OpenStreetMap contributors';
var attr_overpass = 'POI via Overpass API';

var osm = new L.TileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
        'opacity': 0.7,
        'attribution': [attr_osm, attr_overpass].join(', ')
    }
);

var map = new L.Map('map')
.addLayer(osm)
.setView(new L.LatLng(52.265, 10.524), 14);


var opl = new L.OverPassLayer({

    'query': '(node({{bbox}})[organic];node({{bbox}})[second_hand];);out qt;',
});

map.addLayer(opl);


In order to get a valid query the Overpass-turbo IDE might help.

What are the options?

You can specify an options object as an argument of L.OverPassLayer.

javascript
options: {

  debug: false,
  minZoom: 15,
  endPoint: 'https://overpass-api.de/api/',
  query: '(node({{bbox}})[organic];node({{bbox}})[second_hand];);out qt;',
  loadedBounds: [],
  markerIcon: L.Icon(),
  timeout: 30 * 1000, // Milliseconds
  retryOnTimeout: false,
  noInitialRequest: false,
  minZoomIndicatorEnabled: true,
  minZoomIndicatorOptions: {
    position: 'topright',
    minZoomMessageNoLayer: 'No layer assigned',
    minZoomMessage: 'Current zoom level: CURRENTZOOM - All data at level: MINZOOMLEVEL'
},
  beforeRequest: function() {},
  afterRequest: function() {},
  onSuccess: function(data) {},
  onError: function(xhr) {},
  onTimeout: function(xhr) {},
};

Development

Warning: This fork use Git Flow to manage branches.

In order to contribute to the project you should first clone the repository. The javascript source files
reside in the

src folder and are concatenated and minified by Webpack in the dist

 folder. If you want to make changes
make them in the

src folder and then run npm run build (or npm run watch

 for continuous build).
For that you first need to install all the needed packages for this project:


$ npm install