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.
Related
I'm creating a mapping app that places a marker image on a canvas and scrolls to it. I'm using the browser's pinch zooming and scrolling to zoom in/out of the map. However, I've noticed that there's some bizarre behavior, and I'm wondering how to get around it.
This is a little tough to explain, but here we go.
Let's imagine that you're at the standard zoom level on a webpage (you can't zoom out any further). Let's imagine that the area your browser window is showing is the "invisible box". There's some stuff you can see, and some stuff that's out of view (that you need to scroll to get to). Once you pinch-zoom in, the browser still pretends that your viewport is still at 100% zoom (i.e. Your browser is essentially cropping into that invisible box, but the invisible box stays in the same place.) Any JS on the page sees the scroll position as the same, no matter where you pan around within the invisible box. However, once you scroll to the edge, you start to push the edges of the invisible box. If you use JS to set the scroll position (window.scrollTo(xPos, yPos)), it sets the position of the invisible box, but the portion of the invisible box you see is still relative. This means that if you set the scroll position to (0,0) and your cropped-in view is not at the precise top left of the invisible box, the portion you see will NOT be at (0,0).
The issue I'm having is that I need to move the zoomed-in view to a specific spot. Since setting the position of the invisible box isn't really working, is there a way to force the browser to get rid of the invisible box, pinch-zoom all the way out, or maybe detect where the zoomed-in portion is within the invisible box? I'm stumped.
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
I currently have a Google Street View Panorama from the API loaded into a DIV as described here: https://developers.google.com/maps/documentation/javascript/streetview
I'm currently able to get the heading and pitch from the pov_changed event with panorama.getPov().
I want to have a DIV on top of the panorama (with a higher z-index) and absolute-position it using css left and top to always be at same point in the panorama.
I'm not sure how to translate from panorama.getPov().heading and panorama.getPov().pitch to the left and top values for the overlay DIV.
I guess I need to take into account the window width/height, zoom, pitch and heading, but I can't still figure out how to get the right values.
Any ideas or suggestions?
Using pixi.js to make a 2D game, when the main player dies (because he hit a fox, a car or something else), I would like to zoom on it. The desire effect in mind is kind of the end of a level in super meat boy.
Check it, it's between 19:20 and 19:22 : http://youtu.be/3VKWn41Bqss?t=19m20s
I have a worldLayer variable that is a DisplayObjectContainer. This layer holds every element of the world, so I'm scaling it, like so, every frame :
this.worldLayer.scale.x += GAME.config.dead_zoom_speed;
this.worldLayer.scale.y += GAME.config.dead_zoom_speed;
Now you imagine that this piece of code zooms in direction of the coordinate (0,0), which is the top left corner of the screen. But of course, I'd like to zoom on the player, which is not is (0,0). It can be anywhere actually.
Zooming in on a specific point would be doable if the DisplayObjectContainer had the anchor property ; but it doesn't. This code for exemple, with another lib than pixi, uses this technique : it modifies the anchor (called origin in this fiddle).
So my conclusion is, for zooming on a specific point, I have to use the position of the worldLayer. So for every frame :
scale the world layer
calculate the position of scaled worldlayer so that the viewport (with a fixed size, right) is centered on the main character.
This last point is where I'm stuck. How would you go and calculate the position ? My mind can't get around it.
With this comes the problem of centering without displaying the outer canvas. For instance, if the main character is near the right edge of the screen, it would not be totally centered on the viewport. But that's kind of another problem.
So I'd like to discuss that with you guys : have you ever had to implement such a feature ? how ? Am I missing something in the pixi.js API ?
Regards,
Im using jQuery and jQuery UI to zoom an image.
There is a container div with a fixed size and then an image that is much larger that this that is draggable within that container.
The slider that is below controls the zoom level of the image, this works fine.
My issue is that when zooming the image back down in size, if it has been dragged close to an edge of the bounding container, it should snap to that edge and zoom from the remaining edges.
I cannot get it to work though.
The image passes the edge and continues to be scaled down.
You can see the behaviour by zooming the image, moving the top close to the edge of the container and then zooming back down.
Any help would be appreciated, code here -- http://jsbin.com/egivat/5/edit
Any Animation could be done over a fixed point
Check this link
Animate rotation on "CSS3"
The answer given by codeMonkey might be useful to u
All the best !!