guillaumeamat / leaflet-overpass-layer Goto Github PK

View Code? Open in Web Editor NEW

78.0 78.0 27.0 2.3 MB

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

License: MIT License

CSS 2.21% JavaScript 97.79%

leaflet-overpass-layer's People

Contributors

Stargazers

Watchers

leaflet-overpass-layer's Issues

Can't find on npm

I can't find the package on npm when I do 'yarn add leaflet-layer-overpass'. Pretty sure I'm not spelling it wrong so what's up?

Leaflet-overpass-layer did install something. Is that another package or is your readme wrong?

Update Leaflet dependency

Similar to #7, leaflet-overpass-layer still requires leaflet ~1.0.1 but we are now at leaflet 1.2.0.
I have tried leaflet-overpass-layer with leaflet 1.2 and did not find any bug.

Leaflet bad performance with OverPassLayer Markers

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?

OverPassLayer and ionic 3 or above

Hey, i'm trying use leaflet-overpass-layer and i only get error on ionic: OverPassLayer is not a constructor. How fix it?

180th meridian bug - it's possible to request items outside overpass bounds

When panning the map past the 180th meridian it's possible to have a bbox outside the allowed -180 - 180 range, causing requests to fail with error 400. This line appears to handle that part -

leaflet-overpass-layer/src/OverPassLayer.js

Line 217 in 089b0aa

const coordinates = [sw.lat, sw.lng, ne.lat, ne.lng].join(',');

Min zoom constraint isn't followed when you zoom in and out

By default there is a minimum zoom constraint at 15.
Indeed you have to zoom in to at least the level 15 to display the markers.

However, once you zoom out to a higher level like 13, new markers keep being displayed.
With the queries I'm using, it's beginning to be a lot of markers.

It would be nice that requests to OverPass are made only when the zoom is at least at the one configured and that it keeps this setting.

Remove from map

Hey,

I'd like to remove the OverpassLayer from the map using the layer switching control.

This is what I tried:

<script>
  var mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
                subdomains:['a', 'b', 'c'],
                attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});

  var bicycleshop_icon = L.icon({
                          iconUrl:'https://wiki.openstreetmap.org/w/images/4/4e/Icon_bicycle_shop.png',
                          iconSize:[22, 19]});

  var bicycleshop = new L.OverPassLayer({'query': '(node({{bbox}})[shop=bicycle];);out qt;',
                         markerIcon: bicycleshop_icon,minZoom:11});

  var baseLayers = {
		"OpenStreetMap Mapnik":mapnik,
  };

  var overlays = {
  		"bike shop":bicycleshop,
  };

  var map = L.map('map', {
              center:[48.208, 16.37],
              zoom:13,
              layers:[mapnik],
  });

  L.control.layers(baseLayers, overlays, {collapsed:false}).addTo(map);

</script>

Liens hypertextes

Serait-il possible de proposer des liens hypertexte pour les noeuds image et url des données osm ?

Demo

Salut Guillaume,

would it be possible to include a working demo (e.g. github.io)?

I was trying to replace kartenkarsten js with your fork, but unfortunately miserably failing, due to missing require.js and clipper.js dependencies.

I've got no clue how to include them :-(

Thanks & cheers
Toby

Update Leaflet dependency

Hello,

This plugin still requires Leaflet 0.7 in bower.json although it seems to work correctly with Leaflet 1.0.
Would it be possible to update the depdendency in order to avoid Bower warnings?

Update Leaflet plugin list

As the original plugin is no longer maintained and causes performance issues due to a large amount of Overpass API calls, could you maybe update https://github.com/Leaflet/Leaflet/blob/master/docs/plugins.md with a link to your repository?

See Leaflet/Leaflet#3117 for the original pull request.

Leaflet Layer Overpass | Easily include data from the overpass api. | kartenkarsten

Cache requests

Hello,
Do you think it would be possible to add a way to cache requests? (Maybe with localStorage?)
Currently it calls the API again every time we reload the page.

To handle one line comments in Overpass requests

See mapcontrib/mapcontrib#128

Make default marker symbol customizable

Salut Guillaume,

is the default marker symbol (red dot) somehow customizable? (i.e. use a custom icon instead of the default red dot)

I understand that I could overwrite the onsuccess function (relevant parts around https://github.com/GuillaumeAmat/leaflet-overpass-layer/blob/master/src/OverPassLayer.js#L51 ), but it makes things more complicated. So I was wondering whether it would make sense to simply make the marker customizable?

Thanks for your great work, sorry if I missed some basic point!

Cheers
Toby

License notice

Hey,

I'm trying to make this awsome Leaflet plugin working with GNU LibreJS. Therefore I have to know which licenses are in use. According to the LICENSE file in this repo it uses the MIT license. But the last sentence notes there are other libraries included:

Please note that this software includes other libraries or parts of libraries which have their own license file or license annotation in the source code and may be released under different licences.

I coudn't find anything else containing another license info.
Are there actually any other libraries included I have to bear in mind when using the files inside the /dist folder?

Thanks guys!

does the library only work to query nodes?

Whenever I try to query a way or a relation, i get this error

Support https queries to API endpoints

Hey,

currently Overpass queries are sent using unencrypted http (see

leaflet-overpass-layer/src/OverPassLayer.js

Line 13 in 3b47cc1

'endPoint': 'http://overpass-api.de/api/',

) instead of https.

This will lead to problems, when leaflet-overpass-layer is rolled out to an https hosts. In such situations browser won't allow leaflet-overpass-layer queries to the endpoint due to mix-content policies (e.g. Firefox error: Loading of mixed active contents "http://overpass-api.de/api/interpreter?data=[out:json];(...);out;" was blocked.) Thus leaflet-overpass-layer won't work on any https site.

Suggestion: change endpoint api to https://overpass-api.de/api ??

Cheers
Toby

Too many requests error

For whatever reasons the example code loops many times after activating the layer.

ZoomIndicator is missing onRemove

I'm trying to wrap with (great) layer with react like shown on SO: https://stackoverflow.com/questions/56199253/upgrade-an-overpass-layer-code-to-use-react-leaflet-v2
When doing so and adding the layer witht he zoom control, I get an exception during unmount (for instance if I change page, close the leaflet object...) saying that it's trying to call onRemove from leaflet call to remove:

a.Control.prototype.onRemove is undefined

The stack looks like:

onRemove MinZoomIndicator.js:67
remove leaflet-src.js:4512
fire leaflet-src.js:591
remove leaflet-src.js:3574
React 16
unstable_runWithPriority scheduler.development.js:255
React 7
dispatchInteractiveEvent

Disabling the indicator removes the error, but not sure why Control would require an inherited class to implement this?

Runing layer with prepared json?

Is it possible to feed OverPassLayer with already prepared json data instead of running query?

Waiting for data results feedback

Ciao,
is there any chance to get someting scrobbling or a notification while data are being fetched and onSuccess isn't yet triggered? Sometimes it happens the query is slow, the effect is missing markers in the map.
Thank you for your time 😄

2.8.0 not published on npm?

Hello,

It seems the 2.8.0 release was not published on npm: https://www.npmjs.com/package/leaflet-overpass-layer

Regards,

Way coordinates are missing

Hi, I am using this library and it does seems that if the result of a query is a way (instead of node), I cannot get coordinates. In an example I have found this piece of code:

if (e.type === 'node') {
    pos = L.latLng(e.lat, e.lon);
} else {
    pos = L.latLng(e.center.lat, e.center.lon);
}

where e is the variable that contains the results, but I get the error e.center is undefined.

Is there a method to get coordinates of a way?

Thanks in advance

MinZoomIndicator

Hi!

Congrats on v2, I'm currently testing it and hope to implement it into my project soon.

I've noticed that if the overpass layer is removed, the MinZoomIndicator still remains when zoomed out. Older versions had the code this._zoomControl._removeLayer(this); - possible to reimplement?

Cheers.

Using with react-leaflet

React-leaflet is a react implementation of leaflet. https://github.com/PaulLeCam/react-leaflet

My render function looks like this:

  render () {
    return (
      <Map 
        zoom={this.state.zoom}
        center={[this.state.lat, this.state.lng]}
        >
        <TileLayer
          url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        />
        <OverpassLayer />
      </Map>
    )
  }

OverpassLayer.js

import {LayerGroup} from 'react-leaflet'
import L from 'leaflet'
import LeafletOverpassLayer from 'leaflet-overpass-layer'

export default class OverpassLayer extends LayerGroup {
  componentWillReceiveProps(nextProps) {
    const bounds = nextProps.map.getBounds()
    console.log('inside of overpass layer cmpwillrecprops')
    console.log(bounds)
    const opl = new L.LeafletOverpassLayer({
      'query': '[out:json][timeout:25];'
        + '('
        + 'node["amenity"]({{bbox}});'
        + 'way["amenity"]({{bbox}});'
        + 'relation["amenity"]({{bbox}});'
        + ');'
        + 'out body;'
        + '>;'
        + 'out skel qt;'
    })
    nextProps.map.addLayer(opl)
  }
}

The error I'm getting is:
Uncaught (in promise) TypeError: _leaflet2.default.LeafletOverpassLayer is not a constructor

User "onSuccess" for custom Icons etc.?

Hello,
is there a way to use the old feature "callback"? I try to configure the Icons and Popups like in the old version "https://github.com/kartenkarsten/leaflet-layer-overpass" but with your version (because the old always blow the "without the "Too many requests error")?

Greetings

Webpack error

When calling yarn build on dd1821e, it fails with this error:

$ webpack --progress
Hash: a06a16c0547e736a599f                                                         
Version: webpack 3.12.0
Time: 884ms
                      Asset       Size  Chunks             Chunk Names
    OverPassLayer.bundle.js     218 kB       0  [emitted]  OverPassLayer
          OverPassLayer.css  429 bytes       0  [emitted]  OverPassLayer
OverPassLayer.bundle.js.map     263 kB       0  [emitted]  OverPassLayer
      OverPassLayer.css.map   94 bytes       0  [emitted]  OverPassLayer
   [1] ./OverPassLayer.js 10.9 kB {0} [built]
   [3] ./OverPassLayer.css 41 bytes {0} [built]
   [4] ./MinZoomIndicator.js 1.9 kB {0} [built]
    + 3 hidden modules

ERROR in OverPassLayer.bundle.js from UglifyJs
Unexpected token: punc (() [OverPassLayer.bundle.js:102,17]
Child extract-text-webpack-plugin ../node_modules/extract-text-webpack-plugin/dist ../node_modules/css-loader/index.js!../node_modules/postcss-loader/lib/index.js!OverPassLayer.css:
       [0] ../node_modules/css-loader!../node_modules/postcss-loader/lib!./OverPassLayer.css 556 bytes {0} [built]
        + 1 hidden module

Edit: I also tried using using npm instead of yarn, but I get the same error.

guillaumeamat / leaflet-overpass-layer Goto Github PK

leaflet-overpass-layer's People

Contributors

Stargazers

Watchers

Forkers

leaflet-overpass-layer's Issues

Recommend Projects

Recommend Topics

Recommend Org