Perhaps this is an unusual way to do things, but I am creating an interactive map that has landmark markers embedded in the actual map image (a colored circle with a number inside of it). The image is in a div that allows you to pan and zoom with you mouse and mousewheel. I am using CSS transforms to accomplish that pan and zoom. This part is working great.
The issue is that I have 90 landmarks on the map that need to be able to have the user click on them and have a tooltip/popup open with more info. I am accomplishing this with an image map and specifying the coordinates. That is all working as well.
However, I want the user to be able to hover over the image map area and have an alternate image display over the top of the main map image to effectively "highlight" the landmark circle on hover. Then I use the same alternate image when they click on the landmark to show a "highlighted" circle for the selected landmark.
I have this working by using a single div for the hover image display, moving it off canvas and then applying a CSS transform to move it into place and show the right background image when the user hovers over the image map area.
This is all working except for one very teeny tiny problem:
I am passing in transform values to the CSS through jQuery and they are being rounded to 3 decimal places when the transform is applied. Here is javascript used to set an example transform.
$(function(){
$('#landmarkHighlightSelected').css({
'transform-origin': '0px 0px 0px',
'transform': 'translate(121.11172485351563px, 335.38427734375000px) scale(1)',
});
});
When I inspect the transform in Chrome dev tools, I see that the translate values have been converted to 3 decimal places (rounding applied). The matrix value is listed as the following:
matrix(1, 0, 0, 1, 112.112, 335.384)
Under "normal" circumstances, this likely wouldn't matter. But the effect that I am getting is that the "highlight" div that is moved into place is "close" to where it should be, but depending on what the results are of the calculation taking into account image pan/zoom values, I will get a "shift" effect and you can see that the "highlight" div is offset ever so slightly from the landmark in the resized/moved map image behind it.
So what I am seeing is that the CSS transforms are limited to 3 decimal places? Is that right? Is there any way to get them to accept more decimal places?
I understand that what I am doing is a bit unorthodox and that by embedding the "off" state landmark markers in the map image, it's allowing the pan and zoom to move the landmark to values that the browser appears not to be able to render.
But I went with this approach because trying to move 90 divs around in the browser allowing pan and zoom in case the user moused over it was causing a huge jerking/dragging/delayed response in the movement because the code was trying to recalculate the positions of all of those divs as the user moved things around.
Any help or insight on this would be SO SO SO appreciated it. I have been getting nowhere on this for over a week and just figured out that it was the 3 decimal place limit causing the rendered div to appear to shift.
Thank you so much,
Jenny
Related
When zoomed into a feature icon, the larger scale it is the more chance it has of not being displayed when partially off screen.
The geom point is center of the icon, so at a high zoom the geom point being off screen put it outside of the extent (fine), but I need the icon to still display partially within the extent. The effect is that it stays partially onscreen until it hits just past half way off screen at which point it stops displaying.
I've looked at ol.extent.buffer but I don't think it's for me. Is there a 'buffer ' I can set that means that the view is rendering an extent larger than it so icons will still display partially?
ol.layer.Vector takes a renderBuffer argument, which lets you specify a buffer around the viewport which will be included in the rendering. The default is 100px.
I am working on a map that is divided into 800x800 150 pixel tiles. These tiles are contained within a jQuery draggable wrapper, which moves the contents of the tiles around inside the parent to achieve a Google Maps style dragging effect. The top left corner is 0,0 and the bottom right is 799x799. I am looking to replicate Google's tiling effect where the user can drag to the left or top of the start point or the right or bottom of the end point and see the tiled (repeated) contents of the DIV in a seamless manner. Using Clone is not an option as it creates duplicates of an already very large (albeit not yet optimised) source which seriously hampered the load times of the page when dragging was performed.
I could best summarise this by saying I need the map itself to have the visual effect and user experience of looping endlessly, but actually only using one instance of the map source. The resulting effect would not be too dissimilar to the repeating background of an image on a page, except with the contents of the map DIV and not an image. When the user drags the map left of anything on the 0 X Axis, it should display X 799, X 798, etc.
I have not had any luck searching for a solution. Is such an effect possible? If so, what would I need to use to achieve it? I am content with simple answers to point me in the right direction; I do not expect somebody to produce a working example that I can cut and paste. Not afraid to research and experiment myself, my problem is I really don't know where to start. I have plenty of experience with Javascript and jQuery but I've never had to do anything quite like this.
I have realy specific question about Canvas handling mouse-events.
I'm working on a isometric game, I have a displayed map with all tiles, and I want know on which one the mouse are.
On a basic isometric map it's easy to transform the position on the screen (blue on the next image) on a map position (orange) with basic affine function (ax+b, with 'a' is width_tile/height_tile and b is the current position of the map view, red line on the image)..
But I have a complication, each tile of the game have a specific elevation (displayed by red arrow on second image). So i can't use a function for each line(y)/column(x) of the map.
On the same technique I'll try to calculate if mouse position are on EACH tile one by one for EACH mouse event (move, click, ..) but I'm afraid for the heavy code : if I have a 100x100 map and I shack the mouse, I'm sure all this test will ruin the client browser..
I realy don't know how can I do it better ?!
Someone have an idea, or a tips to optimize this check ?
I have big horizontal strip image in photoshop which is made of lots of smaller elements. The background is transparent and the strip goes from smaller elements (left) to bigger elements (right). My goal is to make this strip interactive to mouse events.
Each element is some kind of polygonal image which is trimmed left and right and then exported as a png. It is then imported into a canvas.
The problem is that I can put them side by side but since they are not rectangles I need a way to calculate the offset made up by the transparent pixels on each side of each element to make them stick together correctly... I am using KineticJs to get a precise hitarea for each element... So maybe there is a way to do it automatically with kineticjs,or there is some kind of operation I could do using each image data?
My problem illustrated:
Any ideas?
Also I am doing this simply because I would prefer precise mouseOver bounding box on each item (rather than a simple rectangle) and would rather avoid the solution to calculate each offset manually... But maybe that's not worth it?!
Ok, so you have yourself a custom shape you want to use, here is a tutorial for that: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/ , the simplest thing you can do, and even that seems fairly long, is to calculate the bounding lines for that shape. (Two somewhat vertical lines, and two somewhat horizontal lines). Then you test if the right vertical line of shape one crosses with the left vertical line of shape two, if they do, then set the coordinates of the images to be the same coordinate.
http://www.mathopenref.com/coordintersection.html
line1 = ax + b ..... line2 = cx+d //see possible tests
if(...intersection test...){ // or just test if some coordinate is left of some other coordinate
shape2.setX(shape1.getX()+shape1.getWidth()); //account for image width, so they don't overlap
shape2.setY(shape1.getY()) // no need to account for height
}
UPDATE: This is a very rough solution to the workings of the problem. The next step would be to do more fine tuning dependent on each image.
http://jsfiddle.net/9jkr7/15/
If you want precise areas, use an image map. With some clever finagling and a blank image gif you should be able to have the background you want whenever you hover over any particular area of the image map (might require javascript).
The other option I can think of would be to use SVG itself or one of the many libraries in existance to build interactive vector graphics into your page.
You could also write a function that calculates the left most, top most, right most, and bottom most pixel by looking at all of the pixels in the image data. Here's a tutorial on that:
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/
Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They also turn the mouse into a magnifying glass that can sweep over the picture (the gold ring).
I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).
Looking at their source code, it seems they are using rather basic techniques to achieve this.
Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.
The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.
Here's a sorta minimal reconstructed example.
Another example where we don't hide the div overflow to reveal the entire thing as a square.
Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:
Power Zoomer
Featured Image
Zoomer
Cloud Zoom
Secondly, it's quite easy to achieve. Just load the full-size image, but give it a width smaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-position property to the corresponding scaled x,y coordinate that the user's mouse is currently on.
There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.
Visit http://codeblab.com/glass/ for an real life example and in depth explanation of this technique. Flash and CSS v3 have ample functionality to construct a round magnifying glass.
However, simulate-a-circle-with-overlapping-rectangles works on (many) more platforms.
(DISCLOSURE: codeblab.com is my personal hobby blog with some weak links to my work in The Netherlands.)
There is a full example of magnifying any sort of HTML, including HTML5 at http://www.aplweb.co.uk/blog/js/magnifying-glass/. Works cross-browser too - although rounded corners are a bit iffy on most browsers - so you are going to have to use a box rather than circle.
Here is how to works:
Duplicate the content you want to zoom
Place the duplicated content into another element and set the visible width/height and overflow hidden
Use JavaScript to move the duplicated content so that it moves by the zoom amount * mouse movement. Also move the visible div by the mouse movement.
That is pretty much it too it. There are lots of little things to look out for though to make it work on all browsers.
I don't know how Google does it, since the logo is no longer showing in my area; but this effect can be achieved by clipping the enlarged animated GIF over the regular image using canvas. Alternatively, it is also possible to create create a circular clipping using CSS border-radius (commonly used to implement rounded corners).
EDIT: I've hacked this up together to show the basic technique that you need if you used CSS border-radius: http://jsfiddle.net/yjBuS/
Looks like they're using two images, one for the logo and one for the zoom (the zoomed one is actually sliced, to run the animations separately...?) They probably detect if the mouse is over the normal logo, then show the yellow circle and attach it to the mouse position. Then showing the other image, shifting it opposite of the mouse. Or something similar.