danzel / leaflet.utfgrid Goto Github PK
View Code? Open in Web Editor NEWA UTFGrid implementation for leaflet that is super small.
License: MIT License
A UTFGrid implementation for leaflet that is super small.
License: MIT License
Is this BSD? I'd be happy to replace Wax's implementation with this if you believe it's been cross-browser tested.
How do I deal with multiple active grid layers? Is there any way to trigger grabbing grid data of one grid layer based on the positioning on another grid layer?
Having difficulties figuring out how to approach this.
Am I correct in understanding the grid only works until zoom level 18?
Ideally with adjustable tolerance over what's available on desktop.
During the first ajax request after adding a utfGrid layer to a map, Internet Explorer (v11.0.9600) throws a DOMException: InvalidStateError
.
I believe the problem is due to setting request.timeout
after request.send()
has already been called (ref: c58e15a?diff=unified#diff-9c205830311c365520ac7b1989ab3d3bR296).
The dist/leaflet.utfgrid.js
from the parent commit (f82bf1b) works as expected in IE.
I have a base map layer that fits the whole map div (which has no data caked in). I have added a layer that in this case is just 1 state surrounded by nothing but the base map. When you hover outside of the state map an empty data object is being passed and throwing errors for every mouse movement. The problem happens at:
line 145ish of source.
var idx = this._utfDecode(data.grid[gridY].charCodeAt(gridX)),
basically the object passed for "data" is empty I believe the code at 142 needs to be looking for a null data object and an empty.
Currently we just add all of the tile requests and expect the browser to download them.
If the user zooms we cannot cancel loading them etc.
We should use a queue instead so this can be handled nicer.
so this is more of a question than a real issue. Is it possible to get Screen coordinates for mouse events e.g. mouseover/mousemove? The only thing that I saw that might help me was the latlng Object that contains the map coordinates of the event. Is there any map-coordinates-to-pixel-coordinates conversion available for leaflet?
Regards,
Markus
Is there a plan to write typescript definition file ?
Hello,
At zoom levels <= 16, it is quite hard to click on items, even more on mobile. It could be useful to be able to set the radius of the clickable zone.
Regards,
If you have a utfgrid tileset where empty tiles are omitted (aka respond with a 404) then this plugin doesn't work because (from what I can tell), errored requests are never removed from the request queue eventually saturating it preventing new requests.
From TileJSON. Somewhat similar to #7
I am working with mb-util to export the utfgrid and mbtiles with the following command:
mb-util --scheme=xyz /folder/tile.mbtiles /var/www/html/my-tiles
when using the same syntax like in your example I get the following error in the console:
ReferenceError: grid is not defined
my grid.json files normaly look like this:
grid({"keys": ["", "6402"], "data": {"6402": {"namen": "cool name", "attrib 1": 0.123456}}, "grid": [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " !!! ", " !!!!! ", " !!!!!!! ", " !!!!!!!! ", " !!!!!!!!! ", " !!!! !!!! ", " !! !!!!! ", " !!! !!!!! ", " ! ! ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]});
Is it possible for you to update your example/instruction for mb-util users who would like to be independet from mapbox?!
I'm working on a project to show zoom levels like 1/1.000.000 so I need to zoom with decimals. When I'm using zoom level with decimals UTFGrid is not working. Is there a way to solve this issue?
Is there any way to update the URL after initialization? L.TileLayer has a handy setUrl method for this. It looks like I can use utfGrid.constructor("http://myurl.{z}/{x}/{y}.grid.json?sql=select * from my_table where x = 'y'"), but I have to pan the map a little for it to update. Any thoughts or workaround solutions to handle this? Thanks!
Hi, does this plugin work for an external url with utfgrid encoded data?
Let's say a url like: "http://domainXXXX/geoserver/gwc/service/wmts/?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=layerXXXXXXXX&TILEMATRIXSET=EPSG:900913&TILEMATRIX=EPSG:900913:{z}&TILEROW={y}&TILECOL={x}&FORMAT=application/json;type=utfgrid"
Seems like this plugin will not work at all with leaflet maps with non-integer-locked zooms, no?
Not sure if this is really a bug but more to do with intention. I noticed the new changes now load the Utfgrid with 'this' as the parameter to be passed for the window parameter. Passing 'this' assumes that in the context of loading this file that 'this' is the window object or some other object with global functions. I now get a window.setTimeout is not function because I load Utfgrid into a browserify module and 'this' is definitely not the window object in its context. What's the purpose of passing 'this' and not 'window' in the wrapper function?
I receive this error ocassionally.
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
window.(anonymous function).(anonymous function) @ leaflet.utfgrid.js:257
(anonymous function) @ tile.json?callback=lu0.lu_3_7_1:1
This is the code:
window[wk][functionName] = function (data) {
self._cache[key] = data;
delete window[wk][functionName];
head.removeChild(script); // <--
self._finish_request(key);
};
Either remove it or add in something to support ajax everywhere.
Hi,
I noticed something when working with a large layer that only is displayed on zoom levels 15-18. If the layer is added at a zoom above the minzoom, say 16, and you zoom into the layers range, 15, the layer does not request the necessary grid tiles. The layer has been added, its just not requesting data.
I took a look at the src and it looks like the zoom is compared to min/max zoom in the onAdd event. However, it returns before the move events are applied. Meaning if a layer is added while zoomed out, then you'll never actually be able to fire the moveend event that updates the layer.
Is this check necessary for anything else? Removing that check does not seem to cause any issues and resolves my problem but I want to make sure there are no unintended consequences.
Thanks,
Spencer
Is there a reason why the mouseout functionality in the example is in the mouseover-function?
utfGrid.on('mouseover', function (e) {
if (e.data) {
document.getElementById('hover').innerHTML = 'hover: ' + e.data.admin;
} else {
// works like mouseout
document.getElementById('hover').innerHTML = 'hover: nothing';
}
//console.log('mouseover: ' + e.data);
});
I had a problem with triggering the mouseout too often, while the code in the example didn't work well. Then I changed the mouseout to
if (this._mouseOn && on.data == null) { // the new part '&& on.data == null'
this.fire('mouseout', { latlng: e.latlng, data: this._mouseOn });
if (this.options.pointerCursor) {
this._container.style.cursor = '';
}
}
and now the mouseout is triggered when leaving the layer or hovering over a region with no values. Could there be any problems with it?
Hi,
is it possible to prevent 'click' event to be fired if I double-click on map (eg: for zooming)?
Please, add support for metadata request on onAdd or on request. Meta data can contain usefull data. Meta are requested by send a request only with callback, without tile request.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.