Mapbox doesn't cluster at top level zoom - mapbox

I have copied the mapbox example from here;
https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/
When I run it from my server though the map loads, but clustering doesn't seem to work.
If I zoom in, I see the individual records, but no zoomed out clustering. If you zoom in enough around Spain you will see the records.
http://75.9.250.45:8011/mrcjava/servlet/SQL_CT_01.I00090s
I have simply copied and pasted the code from the example into my own html, so I'm unsure why it would behave differently than the example does

This was due to freemarker causing errors with some of the code. Wrapping these as per the below solved it
${r'${w}'} instead of ${w}.

Related

Two cursors on maps at same time in Mapbox GL-JS

I am developing a weather radar viewer using Mapbox. In a certain mode, there are 2 Mapbox maps on the screen at the same time showing different modes of the radar. The maps are locked to each other. When one map moves, rotates, or pans - the other one does as well. I did this by simply passing the properties of one map to the other. In the below screenshot, you will see how they are showing identical locations.
What I want to do is - when the user is hovering the mouse over "map1", I would like an identical (ghost or false) cursor on "map2". Here is what I am looking to do:
(edit: What you are looking at is an actual screenshot. Each map is enclosed in a DIV with 50% width of the screen, if this helps to explain)
I don't know if this is even possible in Mapbox. Hopefully someone can give some guidance as I can't find any other questions related to this and I really have no code to show without knowing where to start.
If you attempt to do this inside Mapbox-GL-JS (for instance, by constantly updating the location of a GeoJSON feature layer), I think the performance will be pretty poor.
But since the two views are exactly locked (and presumably the exact same dimensions), you can just do this at an HTML/CSS level. Detect mouse movement on the first map, and update the location of an absolutely-positioned element hovering over the second map to match.
Another approach would be using a canvas element overlaid over the second map, similarly updated.

Points snap back when editing polygons

We have a web app that uses MapBox.
In the Leaflet control we're drawing polygons in a feature group, laid over a basemap.
What we're seeing is that for certain polygons, when we try to edit the polygon, when we drag points they snap right back to where they were.
Other polygons on the same map can be edited without issue.
I've attached an animated GIF that shows the behavior.
This is something that seems to be going on entirely within the Leaflat Javascript code, and I'm at a loss as to how to track it down.
I certainly don't expect anyone to be able to identify what I'm doing wrong, or what might be wrong within the Leaflet library, from as sketchy a report as this.
But I was hoping someone might be able to provide me with some guidance as to where I might start?
Specifically, if I was to try to walk through the javascript in a debugger, where should I put my breakpoints?
I've downloaded the uncompressed mapbox source, and I'm able to set breakpoints in it, but I've been unable to find which code executes on mouseup, in this situation.

Leaflet map scrolls uncontrollably

I'm fairly new to Leaflet, but a veteran web map programmer.
I'm just now building a map utility for an embedded system (Qlikview), and it seems to work nicely enough.
But there's one fairly serious issue, which I can't get a handle on.
The map utilizes an open map tile service as background basemap, that only serves tiles in UTM zone 32. Hence my Leaflet map is created in UTM zone 32 by utilizing Proj4 functionality. The problem is, that my necessary coverage area extends well into areas normally covered by UTM zone 33.
Whenever I zoom into an area belonging to UTM zone 33, the map starts scrolling downwards without any apparent cause. And it keeps scrolling, and there seems to be nothing I can do to stop it.
Furthermore, panning and zooming is severely inhibited in this area. I've tried to increase the map maxBounds a lot into zone 33, but it doesn't change anything.
There are no such problems whatsoever when working in the normal zone 32 coverage area.
Can anybody help me in how to get this unwanted scrolling to stop ? Or at least give me an idea as to where I should start looking for a solution ?
Regards,
Lars I Nielsen

Mapbox Studio - layer ordering / z-index

I am following the source quickstart tutorial. I have followed the tutorial all the way through, and am having trouble displaying the earthquake data (red circles) above the land vectors.
According to the symbol drawing order documentation:
“Higher” layers obscure “lower” ones.
However I'm not finding this to be the case. Please see attached screenshot:
The 'earthquakes' layer is the 'higher' layer, I think. I am using the 'Comic!' base map styles. Since the road lines also appear to 'mask off' the land vectors and show the earthquake data below, I'm wondering if this is causing the issue, but looking through the styles there's nothing obvious I can see.
Thanks for any help.
The documentation is correct, however the comp-op family of CartoCSS properties affect how the colors of different layers interact with each other. In this case, the marker-comp-op: screen from the quickstart example was designed to work well over a darker satellite background, but becomes nearly invisible over solid white.
If you remove the marker-comp-op property or change it to a different compositing operation such as multiply the earthquake markers should show up fine.

Page Flashing On Scroll

Any ideas why this page: http://mpdteam.net/projects.html is flashing when it scrolls? I've determined it's due to the background of the main content container, but why? is it a eye-trick, an image flaw, a browser flaw, or a code flaw? The code is easily viewable with view source or dev tools.
Let me know if you need anymore info. thanks.
(also, feel free to re-tag. i'm having a mind-blank for good tags)
It's because it uses finely spaced grey and white lines.
It is perhaps an example of the Moiré pattern, although this is more typically reserved for two overlapping grids at different angles.
I always assumed on a PC this occurred because of the redraw time between the two colours, and how finely spaced the lines are. The lines not perfectly aligning with pixels (e.g. anti-aliasing) would further enhance the flickering effect.
To fix it, try changing the size of the bands (e.g. try zooming out or in on the current page, and moving the browser, and note how you get reduced and even none of the described flickering effect).
Alternatively, you may want to apply a blur such that the difference between bands was softened (not sure if this would necessarily help).
Another suggestion that research yields is that it is due to background redrawing/scaling. However, a fixed background (as compared to a repeating one) isn't particularly applicable to your page.
In any case, for an in-depth discussion of some of the concepts involved, check out this awesome page (http://www.techmind.org/lcd/)