I've built a marker on my Mapbox map that looks like this when a user mouse over it:
The issue I'm running into is that the document icon is a separate layer from the background pin. This is so users can upload custom icons. When using the mouseover and mouseleave events to create a hover popup on the background pin layer, the popup flickers when the user hovers over the icon layer. This is because the user is technically leaving the background pin layer.
I know there are javascript hacks to potentially do this that are messy, but what I'm really looking for is a way to "ignore" events on a mapbox layer. Is this possible?
Edit: The markers here are rendered as a Mapbox layer, not as HTML markers and are thus drawn using the canvas (I believe), so using CSS to ignore events is not possible.
A simple way to ignore mouse events using CSS is to use the style property pointer-events:none this will not trigger any pointer(mouse) events on the element
Instead of registering events per layer, you could register the mousemove event without specifying the layer and use queryRenderedFeatures to see if the cursor is on either of your two layers.
Another approach is use a technique like https://www.mapbox.com/mapbox-gl-js/example/add-image/ and create a composited image client side so you only have the one layer.
Related
I have added a Google Maps Javascript API (dynamic map) to my web-site. I want to put a static picture in the bottom left corner over the maps div - something like a legend. It will not move when the user scrows around.
Is there a way to do it through Google Javascript API or shall I just add a div, put it over the map with CSS?
Yes, there is a way to add this sort of thing using the Google Maps Javascript API. It is considered a Custom Control, and here is a link to the documentation. You would do that if you need to have your element move around when screen real estate gets tight and you want Google Maps to take care of it.
If you aren't concerned with reflowing the other controls as the map appears on screens of various sizes, you can just go with an absolutely positioned element. If you don't want your overlay to affect the map ui by capturing mouse events, just set pointer-events:none; on that element.
Is it possible to change map style from Streetview to satellite retaining all manually drawn layers (geojson shapes)?
e.g.
Let's say we have a circle on Streetview map and want to show the same circle in street view mode. After we change map style to satellite we have to add the circle again. Is there any possibility to avoid that?
I want to find the possibility do not process something that was processed already again, to exclude listening for style changes and adding layers again.
Is any multi styles map instances supported by mapbox?
Or the possibility to render the whole style as a background or might be even having Streetview as a layer in my main style to achieve that?
Check out https://github.com/mapbox/mapbox-gl-js/issues/4006 for a few ideas of how this could be made easier along with some workarounds.
My problem is I need to have a very custom marker to show the users location and I'm using this method to create. However my marker isn't stationary and I need to redraw it once user location changes.
Currently I've tried removing the overlay from the map using OverLayName.setMap(null); and removing the dom element with javascript, but both ways I get a flicking effect of the marker being removed from the map and added, which isn't smooth.
Is there a way to move the overlay on the map without it being removed and being drawn again ? Or maybe there is a way to create a smooth redraw visualization with css ?
Cheers guys.
I'm using leaflet to allow uses to draw custom SVG paths (polygons) on a map. The problem is that when the user zooms out, the polygon becomes too large and obscures the rest of the map.
I've looked online for examples, and the resources I've come across uses the geo functions from the d3.geo library. Whereas in my use case I'm using d3, leaflet, and an SVG layer over the map.
Is there a formula that I can apply to resize the objects correctly? I know that I will have to apply a translate function which will be based on the width height and current zoom level, but I was wondering if there is a standard way to do this?
EDIT: Here is one resource I found, but it uses the d3 geofunctions, and from what I can gather, it seems to redraw the polygons every time the map view is reset (which might be inefficient(?)
http://www.d3noob.org/2014/03/leafletjs-map-with-d3js-objects-that.html
Just apply CSS to change the size of the SVG or just modify the SVG using JS or what ever you use for SVGs every time the scroll event is triggered.
Google maps has an event in it's api which is triggered when the zoom level changes.
https://developers.google.com/maps/documentation/javascript/events#EventProperties
On web (actually webview in mobile development), I have an image of a basketball court. I need to detect the click(touch) of the area on the court image, whether it is within the 3 point line or outside of it. What is the simplest way of achieving this? Old school image map? SVG? Canvas tag?
This is easiest done on a <canvas> element using well known frameworks like Kinetic and Fabric.
You would load the image in the bottom layer, then apply a 3pt layer over the whole image. On top of the 3pt layer is a 2pt layer in the form of an arc. The layering would look like this, from top to bottom:
- 2pt "arc" layer on either side |
- 3pt "full court" layer | Click propagation
- court image V
So when the player touches inside the 2pt arc layer, you know it's 2pt. When the player touches outside the arc, it's the 3pt layer that catches the touch. Additionally, frameworks might allow a propagation to underlying layers. You must prevent that one.
An image map would likely be the least complex implementation. Otherwise, you'll want to subscribe to a click anywhere on the court and then examine the mouse coordinates relative to the image.
If I were you, I'd save yourself the pain of writing client-side code for it and just use an image map. They work well for things like this.
http://www.w3schools.com/tags/tag_map.asp
You can use maybe this solution when you don´t use canvas: Click image and get coordinates with Javascript (2006)
For canvas there is a solution, too:
How do I get the coordinates of a mouse click on a canvas
element?
Getting mouse location in canvas
The simplest solution is getting an library and use it´s function...