Google maps direction icon's - google-maps-api-3

On Google Maps when displaying driving directions there are direction icons located on the left (roundabout, left arrow, right arrow etc), I've searched through the documentation and can't find a way to display the icons on a module that I'm creating, has anyone found a way to display them on the direction pane.
How can i search for this driving icon in DirectionsResult object and display it in my JSP..?
Thanks,
Vinayak

The api doesn't give you the icon for each step. You can figure out which icons to show by looking at the instructions text of each step. Strip out the html tags first. Then, if the text starts with "turn right", then use that icon. If it says "keep right", "slight right", "take exit", etc., use the appropriate icon. If it starts with something you don't recognize, don't use an icon.

Related

Text appears while over on an icon in Webflow

I made some research before writing here, but I couldn't find nothing that satisfied my answer to this specific case.
I have an icon, and when user hover onto it I want the icon become smaller and text (caption for the icon) should appear -at icons bottom.
As now, I have an interaction for the icon, that makes it become smaller.
It's first time for me working with WebFlow, and I see that using overlapping blocks they work as layers in the sense that the one on top is the only one who react to hovering.
I found in other questions that there was the need of setting correctly absolute/relative for blocks, but is not working for me since I have also the icon, inside the same block.
If I move the icon out of the block, I have the problem I shared before about overlapping "layers".
I need that icon decrease in size and text appear at the same time.
Is this achievable?
Thank you for your help!

How to get text popups on an image using CSS3 animations?

I'm looking for guidance here:
I have an image of a band about halfway down my page. When the user scrolls to it I'd like the band name to appear on top of it and then each member's heads get circled and their names popup next to each circle.
Hopefully that's clear -- it is in my head at least.
I'm thinking this could be accomplished using CSS animations, but I unsure. There's probably more than one way to skin this cat. Looking to be pointed in the right direction.
Thanks in advance.

Leaflet Legend toggle

I'm trying to create a legend which should work like on this site but I can't get it to work...
(press the 'i' button)
http://mtbmap.no/#6/63.400/10.390
I tried popup with easy button plugin but it shows up on the middle of the screen. I would like to have toggle like on mtbmap.
Here's my working site
http://pomorskieszlaki.pl/index.html#9/54.2516/18.3774/osm-rowerowe-piesze-ddr
Any chance to point me the right way?
Thanks a lot. I'm still a newbie with JS...
If you are still looking to add this feature to your map, there is a way.
You can use makeIcon( with your attributes) to embed, size and attach a graphic icon, you can also set the distance away from the icon that this popu opens up.
Then you can addPopup(with your attributes) to add a popUp box to that icon which is editable as any other popup would be.

CSS: Howto Create Tab Foot?

With most modern browsers is easy to create rounded corners in CSS, so I was wondering if its posible to create a rounded corner that bend outwards or if I still need to fire up PhotoShop for creating such an effect.
The bottom foot in "See tab" from the picture below demonstrates what I am trying to do with CSS:
note: I am unsure if foot is the correct word for this (which have made googling it hard) so if anyone knows the real (or better) term then please let me know and I will update the question accordingly.
Chop that problem up into segments so that the illustration would have a blue shape with one rounded corner on top of a white background, next to the "See" tab, and so on. By picking the colors carefully, and using shapes that you know you can generate, you can establish a pattern that will work with the tools available.
Notice that you do not have to round all corners on a rectangle. You can specify, for example, bottom right.
Reference: http://www.css3.info/preview/rounded-border/

Change hotspot of mouse cursor on a web page

I would like to change the hotspot of a mouse pointer, which we've changed the icon using a .cur file, to be in the bottom right of the image, rather then the top left.
Pretty much like an inverted arrow cursor, the designers/boss have come up with a nice design which almost requires this.
Is it possible to change the hotspot of a mouse cursor on a web page?
I have not tested it, got it from developer.mozilla.org:
Support for the CSS3 syntax for cursor values got added in Gecko 1.8beta3; it therefore works in Firefox 1.5. It allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. If none are specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or are set to the top left corner of the image. An example of the CSS3 syntax is:
cursor: url(foo.png) 4 12, auto;
Link to CCS3 cursor
It's not possible, and I'm glad - I think you'd only frustrate your users with this.
Edit: I was wrong - I didn't think this was possible - I still don't think you should do it though.
You can't. And as most people here I'd tell you to not do it even if you could...
However, I could imagine something like this for very specific cases like the page of some artist, or for a game cursor, or a sort of 3D-like map with the cursor pointing down. Now if you really need a special cursor for a media oriented site, as opposed to an information site, I'd hide the cursor, with a blank cursor file and use some Javascript to attach a floating image over the cursor so it "looks like" the hot spot is someplace else.
Of course your sites usability and compatibility will go way down, but the solution above is if you really need to take the creative liberty, and your users are open minded to this sort of stuff.

Resources