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
Related
I'm using Openlayers 7.
Is it possible to force the layer source (ImageWMS) to load a CQL filtered image, i.e. to buffer it, while the layer is not visible?
I would like to avoid the image from a previous filter to flash on the map, when the filter is changed while the layer is invisible, and the layer is then subsequently made visible after the filter change. The flash of the old image is obviously for the duration of the new filtered image downloading.
Event imageloadend only seems to fire after the layer has been made visible, so while the filter had been updated programmatically, the image wasn't requested from the server and refreshed since the layer wasn't visible at the time of the filter change.
As possible option you could remove extra layers and save only base layer (like osm).
I have an issue with one thing.
I have a map of world and I want to add functionality when a user clicks on one of the list elements (you can see 3 lists with different places on the image, for example, Paris Air Show) it would show me on the map. As you can see on image example
Is it possible to do? It should work on different devices, but I have no idea how to create that.
Thanks a lot for your help.
Here is a good solution, which works for me.
So I've created a map with areas and on those areas, I put coordinates of places and this map is attached to the image. Then I calculate a place using map.getBoundingClientRect()
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.)
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.
How can I display a digit inside the GMarker ?
I used title, but it is only on rollover like title on links or image.
Do you have any idea how I can do that ?
There's two ways to do it.
The old way is to create or obtain images for markers with each number and use them as custom icon images. There are several sets listed here or you can use one of the services listed there to create your own, or draw your own with an image editor. Save the resulting images to your own webspace, don't try to use the services dynamically because they occasionally fail.
The new way is to use the LabeledMarker extension which creates things that work something like Google markers but allow you to put text onto the marker dynamically. (Hint: works quite nicely with MapIconMaker, like this.)
You can create custom markers with mapicon Factory. Select the Characters radio button and pick a character type, and then click the Numbers checkbox. Dismiss the ad and you will see the markers.