kartenkarsten / leaflet-layer-overpass Goto Github PK

Would be a nice addition to the readme!

encode the request properbly

Hi Karsten, Hi Matthew,

When you combine both layer, you get a naming conflict. Is it possible to resolve this somehow? (More of a question, rather than a bug report.)

C.f. MatthewBarker/leaflet-wikipedia#4

Thanks!
Bjoern

Hi,

I've already opened a similar issue for briefkastenkarte: bierett/briefkastenkarte.de#8. As stated by someone else, this repo is probably a better place to report it... Please check this issue first for a detailed issue description + recommendations.

Basically, splitting up a (rather small) bbox into many small parts and trying to load them in parallel is not the most efficient approach, given that Overpass API will only handle one request at a time (rambler instance being the exception atm). Even worse, it creates unnecessary overhead without getting the data any faster due to serialization. Creating a large number of requests in a short timeframe also increases chances for HTTP 429 errors.

In additional please also check Rolands comments on this topic: https://lists.openstreetmap.org/pipermail/talk-de/2015-May/111111.html

I have to change some things in the source code to make it more compatible with my situation. Here you can see what are those changes:

• humitos/osm-pois@021b30a

I think we need a way to pass:

• a function to be called after/before sending the GET request (I'm using this to show a spinner -but maybe I can do this after/before calling new L.OverPassLayer). Not sure if this is too important
• the position for MinZoomIndecator (I want it at topright, for example)
• the text displayed in MinZoomIndecator (I need it in Spanish)

Also, I think the style created for the container of MinZoomIndecator shouldn't be there because the leaflet-control-minZoomIndecator is already used. That is the correct place to add more styling. Don't you think?

If you think those things are correct, I will try to prepare a pull request.

The demo is throwing errors on Chrome. I also can't seem to get this working in my site using the example.

It's quite common to show only features of a certian category selected by the user. Technical its possible to use one query for each category or maybe on for all and just show and hide some features by a certain tag.
(I would like to have such an example for fast adapting.)

What do you think is the best way to go?

I just wanted to point out that there is https://github.com/tyrasd/osmtogeojson which converts overpass-json to real geojson. In youre readme you write that an idea for futher development would be to do this. So we might want to look into including this at some point...

I would like to add a reference to this project to the leafelt plugin page. Are you okay with your project and you github user name listed as a maintainer being on the list?

The default callback implementation exits the loop and function with return when an element has already been loaded (id in index):

if (e.id in this.instance._ids) return;

Not sure if this on purpose, but I think it should use continue to just skip the current element and continue the loop.

See test page (Gist) - note that it's based on the fork. The second layer using continue displays the second elements as expected, the first omits it for all tiles but the first (when first common element with same id not loaded yet).

cc @GuillaumeAmat

We should use git tag or the github release feature to tag the version of the project. This will lead to bower being able to list versions. This tutorial explains the workflow quite nicely.
Maybe we can provide a 1.0.0 with the latest commits and then provide a 1.1.0 or so when the newest Pull Request is merged.

The readme file has a 'demo' link to this URL: http://bastler.bplaced.net/osm/overpass_layer_demo/

which is currently '404 Not found'

Hello.

Is it possible to show ways (like motorway, etc) using Leaflet Layer OverPass? Or is it show only nodes?

I try to show skiing pistes on a leaflet map. In your demo I changed

  [query: "node(BBOX)['amenity'='post_box'];out;",]

to

 [query: "way(BBOX)['route'='piste'];out;",]

and I changed

      [var circle = L.circle(pos, 50, {
        color: color,
        fillColor: '#fa3',
        fillOpacity: 0.5
      })
      .bindPopup(popup);
      this.instance.addLayer(circle);]

to

     [var ligne = L.multiPolyline(pos, {
        weight: 5,
        color: 'red'
      })
      .bindPopup(popup);
      this.instance.addLayer(ligne);]

but it didn't work. Is my code wrong? (of course I set the view on a ski resort!)

I have another small question: is it possible to change the minzoom option?

Thanks.

Im currently encountering bad performance with my Leaflet Map while using the Overpass Library, especially when moving around on the Map although there are not a lot of Markers (less than 100). This is still a problem with limited Zoom Level to 13.

This is a simple example:

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="">
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
        <script src="OverPassLayer.bundle.js"></script> 
    </head>
    <body>
        <div id="map" style="width: 100%; height: 90%; position: relative; outline: none;"></div>

        <script>
            var tiles = L.tileLayer('https://a.tile.openstreetmap.de/{z}/{x}/{y}.png', {
            minZoom: 15,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }),
            latlng = L.latLng(52.5207,13.4093);

            var map = L.map('map',{center: latlng, 
                        zoom: 17, 
                        layers: [tiles],
                        maxZoom: 18,
                        preferCanvas: false,
                        });

            var icon = new L.Icon({
                iconUrl: 'leaf-green.png', //https://leafletjs.com/examples/custom-icons/leaf-green.png
                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });

            var opl = new L.OverPassLayer({
                query: 'node["amenity"="bench"]({{bbox}});out;', //show all Benches on Map
                markerIcon: icon,
                minZoom: 13,
            });

            map.addLayer(opl);
        </script>
    </body>
</html>

Maybe markercluster can be a solution to this, but how do I add Positions from Overpass to a markercluster Layer?

Are there other solutions to this?

Thank you for the readme addition. If you could now also add information about the license I would be more than thankful!

The overpass request on multi_layer_example.html sample is wrong:
Here the code:

...
   var trafficlights = new L.OverPassLayer({
      query: 'http://overpass-api.de/api/interpreter?data=[out:json];(node["traffic_signals:vibration"](BBOX);node["traffic_signals:floor_vibration"](BBOX);node["traffic_signals:arrow"](BBOX););(._;>;);out;',
      callback: function(data) {
...

and

...
    var postboxes = new L.OverPassLayer({
      minzoom: 17,
      query: "http://overpass-api.de/api/interpreter?data=[out:json];node(BBOX)[amenity=post_box];out;",
      callback: function(data) {
...

Here the request with double : 'http://overpass-api.de/api/interpreter?' string

http://overpass-api.de/api/interpreter?data=[out:json];http://overpass-api.de/api/interpreter?data=[out:json];node(52.254709,10.50293,52.268157,10.524902)[amenity=post_box];out;

Please dress the sample into your github code...
Thank you

may be more useful publish it on npmjs.org

npm publish .