This is an simple way to bring OSM data as POI overlay on your leaflet Map
npm install leaflet-overpass-layerThis plugin is a fork of https://github.com/kartenkarsten/leaflet-layer-overpass
Here is a demo with associated sourcecode.
``bash`
$ npm install leaflet-overpass-layer
If you use bower to install leaflet-layer-overpass, you need to load JsClipper first.
`bash`
$ 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.
`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.
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 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
``