This is an simple way to bring OSM data as POI overlay on your leaflet Map

Downloads in past


2.9.02 years ago8 years agoMinified + gzip package size for leaflet-overpass-layer in KB


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.



$ npm install leaflet-overpass-layer


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


You can include and use the OverpassLayer.css and OverpassLayer.bundle.js files from the dist folder in your html.
var attr_osm = 'Map data © <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors';
var attr_overpass = 'POI via <a href="http://www.overpass-api.de/">Overpass API</a>';

var osm = new L.TileLayer(
        'opacity': 0.7,
        'attribution': [attr_osm, attr_overpass].join(', ')

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

var opl = new L.OverPassLayer({

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

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.
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) {},



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