Ok, I have page (html, javascript, css) with two layers that completely cover the browser window. The one in front contains a navigation that should clickable. The one in the back contains a map with markers that should also be clickable. The navigation (the one in the front) at times can occupy the complete window height and width so limiting it's size is not really an option.
Now the problem is how to get the click events to the back layer so the map markers can receive their click event. backlayer.dispatchEvent(e) takes backlayer as the event target, but any of my markers inside the backlayer could be the target, so I was wondering if there is a simpler way then check the bounding-box of every map marker element and call dispatchEvent on the map marker that matches directly?
Thanks!
You can try using jQuery or a similar library to simulate a click on the bottom layer when clicking the upper one.
Related
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.
Lets say i have a maps marker with a custom circular image with 2 halves, one color black and another colored white.
Is it possible to specify a certain action when the left half is clicked and a different action when the right half is clicked?
I think it is possible but you would have to essentially overlay your marker with a div on one side and a div on the other. (essentially halving your marker)
Google Maps JavaScript V3 Api place div on marker
Then add an onclick event to each div the left and right divs, and perform your click logic event/routine.
All of that being said, I would think that what your attempting to accomplish may be easier to do with some voting buttons in the infowindow.
https://groups.google.com/forum/?fromgroups=#!topic/google-maps-js-api-v3/0Wc_wAQVHGk
A continuation of my previous question: How to change the layering of KML and Tile Overlays in Google Maps?
I am currently rewriting some of the code regarding the buttons which enable and disable tile overlays using arrays. In doing so, I'm trying to combine all of the button's individual functions into a single function, but since I have two methods of rendering the overlays, I was hoping to try and simply focus on only one method. The first uses "overlayMapTypes":
map.overlayMapTypes.insertAt(0, beloitMapType);
The second, using a script provided in my previous question:
this.getPanes().overlayShadow.appendChild(this.settings.div_);
The former method is my original approach; however, since I use polygons on the Satellite view I needed a way to place icon/name overlays above the colored polygons. To achieve this, I sought something akin to the latter method where certain overlays could be placed onto a pane higher than the polygons and thus appear above them.
However, in the time between my previous question and now, as well as through some of my own research, I've come to realize that the latter method, rather than placing the tiles into their places, estimates the location of the tile and places it as an image overlay. As a result, a part of my accessibility layer which colors in inaccessible paths had been misaligned by a pixel or two, or my building name overlay currently has names on the border of two tiles which have a sharp line through them as those two tiles overlap slightly. In addition, these two issues come and go each time the map is loaded with each tile being placed on the map with a variance of 1-2 pixels in any direction.
Thus, I would very much prefer to use the former method with overlayMapTypes, which is more reliable and accurate, on all of the overlays, but I also need a way to bring some of these overlays higher than the "overlayLayer" pane and above the polygons. Is this possible and, if so, how could it be done?
Addition: I have an additional need to try and find a method to achieve the reassignment of panes with the overlayMapType method: the script I'm using to achieve this doesn't appear to work in IE7/8. I'm going to investigate this angle myself, but I'd still prefer to drop the script entirely if possible.
Well, I've hit upon a possible solution and, for the sake of sharing it, allow me to explain:
Polygons do not necessarily need to be visible to still have click and hover events.
Since the polygons are used to color the buildings and poi in Satellite view, such a visual component could easily be done by an overlay.
Thus, a possible solution is to have all polygons invisible and simply use them for click and hover events. Likewise, a second overlay, or a modification of an existing one, would replace the polygon's original visual component. Since this visual component is now an overlay like everything else, it can be easily layered with any other overlay using the "MapType" method.
(This however doesn't answer the question; namely, can tile overlays and polygons be layered only with the MapType method? I would still like to know that, but in the event that there is no answer, this hopefully is a possible alternative.)
Our website selects establishments from a query and returns the results to the user in batches of 10 locations displaying details in a gridview and locations as user pushpins in bing maps. Hovering the item in the map pops up info panel etc.
My requirements to make this more useable are as follows:-
1) When a user hovers over the item in the gridview list, the corresponding pin on the map should be highlighted.
2) When a user clicks an item in the list, the map zooms to that location. (which I think is relatively simple by redrawing map with different centre and scale)
My thoughts for the first one are to use JavaScript to get the element of the associated pushpin and replace it with a new image in the ‘highlighted’ state and to replace it with the original afterwards.
So my question is:-
Is this the right approach or is there a better one and is there any sample code doing something similar available out there?
Many thanks
Paul
That's exactly the approach I use ;) The only slight modification I'd suggest is that, instead of replacing the image with an entirely new one, you make use of a sprite sheet that has both the highlighted and unhighlighted images on it.
Then, in the onmouseover event handler, set the typeName property of the pushpin to assign a CSS class that offsets the image to display only the highlighted state, and in the onmouseout event reset the CSS class again so that the unhighlighted background image is displayed. That way, your page will load quicker and you won't have to risk a flicker as the old image is replaced with the new.
Reference for typeName property: http://msdn.microsoft.com/en-us/library/gg427629.aspx
I'm working on an app that displays a large image just about the same way as Google Maps. As the user drags the map, more images are loaded so that when a new part of the map is visible, the corresponding images are already in place.
By the way, this is a Javascript project.
I'm thinking of representing each tile as a square div with the image loaded as a background image.
My question: how exactly can I calculate what divs are showing, and when the tiles are moved, how do I tell when a new row of divs have become visible?
Thanks!
About calculating what divs are showing: learn the algorithm for intersecting two rectangles (the stackoverflow question Algorithm to detect intersection of two rectangles? is a good starting point). With that, the divs that are showing are the ones whose intersection with the "view window" is non-empty.
About telling when a new row of divs have become visible: you will probably need a updateInterface() method anyway. Use this method to keep track of the divs showing, and when divs that weren't showing before enter the view window, fire a event handler of sorts.
About implementation: you should probably have the view window be itself a div with overflow: hidden and position: relative. Having a relative position attribute in CSS means that a child with absolute position top 0, left 0 will be at the top-left edge of the container (the view area, in your case).
About efficiency: depending on how fast your "determine which divs are showing" algorithm ends up being, you can try handling the intersection detection only when the user stops dragging, not on the mouse move. You should also preload the areas immediately around your current view window, so that if the user doesn't drag too far away, they will already be loaded.
Some further reference:
Tile5: Tiling Interfaces
gTile: Javascript tile based game engine
Experiments in rendering a Tiled Map in javascript/html…
There's no reason to implement this yourself, really, unless it's just a fun project. There are several open source libraries that handle online mapping.
To answer your question, you need to have an orthophoto-type image (an image aligned with the coordinate space) and then a mapping from pixel coordinates (i.e. the screen) to world coordinates. If it's not map images, just arbitrary large images then, again, you need to create a mapping between the pixel coordinates of the source image at various zoom levels and the view-port's coordinates.
If you read Google Map's SDK documentation you will see explanations of these terms. It's also a good idea to explore one of the aforementioned existing libraries, read its documentation and see how it's done.
But, again, if this is real work, don't implement it yourself. There's no reason to.