When applying zoom or any transform CSS to a google chart div, or it's parent divs, the chart's mouse events will break, whenever you hover an element it will think your cursor it's a few pixels off from where it's actually is.
Lots of other libraries also have this problem because they do not account for the zoom CSS when making calculations with the mouse coordinates received via events.
Here's a similar case with fullcalendar.io: Wrong mouse coordinates when using css zoom property
In this case the solution was to change the API function that calculates the mouse coordinate, since I cannot do that with google charts, I'm searching for an alternate solution.
Related
Fairly new to Mapbox and getting there (slowly).
I have a map initially loaded at zoom level 1 for use in a web browser. When a user clicks on a marker, it'll center and zoom to level 10.
When that marker loses focus, I'd like to zoom back out to level 1.
This page discussing web applications does it (link below), but there doesn't seem to be (that I can find - sorry!) any documentation on how to achieve this.
https://docs.mapbox.com/help/getting-started/web-apps/
Any and all help appreciated!
For the first event, to zoom in when clicking a marker, you could adapt this example to zoom in addition to panning when calling flyTo
https://docs.mapbox.com/mapbox-gl-js/example/center-on-feature/
For the second part, you'd need to add a listener for another event depending on what you have in mind by "losing focus".
https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events
When should one use a marker instead of a feature layer of points in Mapbox?
Points layers can be updated and styled dynamically using all the styling tools of Mapbox GL JS. Features in points layers can also be clicked, presenting a popup just like with a marker.
Given this, when would one want to use a marker?
As Andrew mentioned there are two sides two this:
Accessibility
Markers are implemented as DOM elements and thus can be included in the tab order and can be given accessibility attributes
Animation
As markers are DOM elements animating them is quite easy with a bit of CSS & JS. You can animate points on a circle layer too, but its much more of a hassle.
Small point count
The number of markers/points you can display at once is somewhat limited by what the DOM can manage. My suggestion is that, if you have more than 500 points to display, you should opt for a circle layer instead of markers (this is a very rough estimates and depends on other parameters as well, animation, point size etc.). Using a circle layer you will hit - depending on the hardware - a limit in the 10s of thounds of points.
Using leaflet mobile maps, you can easily get "lost" if you zoom in too far or pan in the wrong direction, so I'd like to display some kind of dynamic hint arrows(?) around the edge of the map which point to those offscreen markers. Something like the illustration below which I stumbled on here while trying to find a solution.
You would probably be interested in Leaflet EdgeMarker plugin (demo):
[…] allows you to indicate Markers, Circles and CircleMarkers that are outside of the current view by displaying [a chosen icon (like an arrow)] at the edges of the map.
I try to repeat a marker at the same coordinates when I am moving the map to infinity, in the same way that layers.
example : https://www.mapbox.com/mapbox-gl-js/example/geojson-polygon/
Has anyone found how to do that please?
If it's not possible, conversely is it possible to not repeat layers when you moving the map ?
Thank you
The Link example you provided is not using Markers to render the shaded area. It is using a feature, in this case a polygon, included in a layer (a layer can have many features).
In MapBox the rendered map is made up of any number of layers (including the tile data) which is rendered whenever you scroll or drag to a particular area of the map. For example as you keep dragging to the right in the map it will just keep rendering in the relevant layers and tiles.
The Marker functionality has a different purpose which is as a one off selected point which is useful for a user click or hover interaction.
Am working on a project where we have a Bing map being resized depending on whether or not a panel is shown/hidden on the left-hand side of the map. Because of this, and Microsoft's terms preventing overlaying anything over the logo/copyright, etc, I'm using the VEMap.resize method to resize the map, and then am moving the panel out of the way. The issue is that there's an awkward autopan that occurs as part of the resize - because we're declaring a center point to determine the resize, the map pans to include this point in the center without any control over it. Without declaring a center, the map doesn't pan, but it also doesn't pull the new data (map tiles) in our resize in either, resulting in an awkward grey bar on the right-hand side..
Is there a simple way to either resize the map and disable that autopan, moving the center prior to the panning, or to force the map tiles to be rendered upon the resize itself? Any help would be appreciated.
You may want to try the new version 7.0 as you could get rid of this annoyance by using "map.setView({center: map.getCenter(), animate:false})" after resizing; that should override the nice but annoying pan movement on resize.
However there are a few features (like infoboxes or client-side clustering) currently missing in 7.0 when migrating from 6.3 however and the classnames changed, so you may want to wait for now, however it would be the good moment to prepare yourself for 7.