map.querySourceFeatures on different zoom levels - mapbox-gl-js

map.querySourceFeatures is returning different number of objects
on different zoom levels.
Is there a way to get all the data, not only visible?
Thanks
var feature = map.querySourceFeatures("mapbox-postcodes", {
sourceLayer: ['Distribution'],
filter: ['==', ['to-string', ['get', 'name']], "someCode"]
});

No. querySourceFeatures() always returns features which have been loaded into the current viewport. It can't access anything other than the current zoom level.
The domain of the query includes all currently-loaded vector tiles and GeoJSON source tiles: this function does not check tiles outside the currently visible viewport.

Related

Leaflet geojson unstable layer order

I have a situation with Leaflet, where I want to display different layers on a map and toggle between them using a layer controller.
My problem is that one of the layer is a geojson and I need to display the layers of that geojson in a specific order.
I do so using bringToFront and bringToback functions on the geojson layer.
But when I toggle between different layers using the controller, the ordering is lost.
Here is a fiddle showing the problem. Toggle the layers and the triangle will change color.
Question : is there a way to keep the layers order stable while toggling around ?
You could achieve the desired result, just by re-ordering your features in your geojson, without using Leaflet's bringToBack() method.
Higher position of an item in geojson.features array will result in higher display (above feaures with lower position).
The following function changes the order accordingly.
const moveLayersToBottom = (geojson, featureName) => {
geojson.features.sort((x, y) => (
x.properties.name === featureName ? -1 : y.properties.name === featureName ? 1 : 0
))
}
moveLayersToBottom(myGeojson, 'zone_1');
Here is your fiddle, edited (I commented out code of your fiddle that is unnecessary): https://jsfiddle.net/br0g962p/

Is there a way to check for markers whos icons intersect / overlap visibly?

I am building a map and want to use the leaflet markercluster plugin to cluster any markers that intersect visibly (the icons overlap each other). I can't seem to figure out a way to check whether the markers icons intersect though.
I've examined the documentation and the Marker objects. The marker object has no "bounds" object and has no function to return the bounds of the icon.
Yes, it's possible.
This is implemented in some Leaflet plugins, like Leaflet.LayerGroup.Collision - the technique involves fetching the computed style of each icon's HTML element to get the actual size in CSS pixels, offset those numbers by the relative pixel position of the marker's LatLng, and using a rtree data structure to speed up the calculation of the overlaps. Do have a look at the complete source for LayerGroup.Collision plugin.
Note that this technique only takes into account the rectangular bounding boxes of the icons; while it would be possible to check for the individual transparent pixels, that would involve more complex data structures and a different technique to fetch the opacity of each pixel.

Set Zoom Level of Map to particular Zip Code

I am using MapQuest JS batch API to plot multiple address on the map. I am able to pass multiple address & plot pins accordingly. I following example on below link. The map may have multiple pins plotted all over USA, I want to set the zoom level of the map, conditionally to particular zip code.
https://developer.mapquest.com/documentation/samples/geocoding/v1/batch/
Currently the zoom level is set to best Fit
var options = {
elt: "map",
zoom: 10,
mtype: 'map'
};
var map = new MQA.TileMap(options);
map.bestFit();
I am expecting to set zoom level to specific zip code based on certain criteria.
Updates: 01/20
On the below link, there is a option to set initial center of the map to particular latitude/longitude. but this did not work for me
https://developer.mapquest.com/docs/api-reference/javascript-api/classes/MQA.TileMap.html
Option:
[latLng] MQA.LatLng optional
the initial map center as a MQA.LatLng Default: {lat: 38.134557, lng: -98.4375}
Hopefully, both the map center and zip code questions have been addressed in the MapQuest developer forum post.
https://developer.mapquest.com/forum/how-set-zoom-level-particular-zip-code

How to control what markers are displayed by mapbox-gl-js

I am loading a bunch of geojson points. I can see that I am loading about 40 points but which ones get displayed on my map seems random and somehow connected to the zoom level. Below you can see that only 2 points of ~40 are displayed.
What criteria does mapbox-gl-js use to decide what to display?
Is there a way to control what points are being displayed? (All of them? Some based on an attribute?)
This is likely occurring because you are using the default text-allow-overlap value of false. The text-allow-overlap documentation reads
If true, the text will be visible even if it collides with other previously drawn symbols.
Because your symbols overlap each other, some are hidden. You can disable this behavior by setting text-allow-overlap to true.
You might find marker clustering to be useful.

Rendering OpenStreetMap in OpenLayers 3 with more detail and higher DPI

I'm using OpenLayers 3 and OpenStreetMap to print maps on paper, and for this I'd need to render the maps with more details and higher DPI than are shown on the screen. I'm using CSS to set the size of ol.Map's target in centimeters to the desired size for the printout (.map { width: 7cm; height: 6.3cm; }).
By default OpenLayers shows one of my maps like this, which is too low detail for my needs:
By changing the map size with map.setSize(map.getSize().map(function (x) { return x*2; })); I'm able to increase the detail closer to what I need:
But the problem with this hack is that when the window is resized, the size is reset and it will look wrong like this:
How would I be able to control the OSM zoom level and map DPI independently of the map's size on screen to achieve the desired outcome (the second picture) reliably?
A solution I've found is to put the map inside two nested divs. The inner one has, for example, width: 200%; height: 200%, and the outer one would have transform: scale(.5) translate(-50%,-50%);. This would double the resolution the user sees.
This approach changes the pixel zoom level relative to the zoom level on screen. However, it needs to be recalculated and updated whenever the user zooms the map.