Is there any solution to have some like "focus zone" in Google Maps? So no matter what size of map is some point (no center) always will have the same position relative to parent block. It's can be confusing, so I made examples.
Start. Size of the map block is 400x175. We need to save yellow dot position relative to map block.
We increase window size and reload the page. Now we the map size is 1200x525. But position of the yellow dot changed.
The desired result is:
UPD: As you can see, in my example yellow dot always in the same geo location, it's actually the placemark of the building.
Related
I have a p-dialog with a fixed position in the center of my screen. Inside the p-dialog I have an image on which should appear a small dot when clicked on the position of the click.
When I set the position of the dot as: positionX = $event.offsetX it works fine when the application is on fullscreen. However when I resize the window the offset value changes and the dot appears moved to the side.
I tried to do as follows:
const rect = $event.currentTarget.getBoundingClientRect()
positionX = $event.pageX - rect.left
or using $event.client.x but each time the position is extremely wrong reaching negative or too big values. I get really confused with all the values we can get from PointerEvent and none of them seem to let me calculate the correct position of the dot. I feel like I would need to get the current size of the image relative to the size of the screen so I can manage to calculate the value of the offset, but in the $event.target the width stays always the same, but the offset changes.
I need to get the relative position to the image so I can place the dot properly on any screen size. How to achieve this?
I have a multi image openseadragon viewer, where the coordinates of each tiled image seem to be calculated based on the size of the image to the container viewer size. When the user clicks on a specific image I am trying to fit the image to the center of the viewport by using fitBounds method. Here I am passing the bound rect of the image the user has clicked. This is working perfectly. Now I have a requirement where say a panel is placed on the right side, on top of the viewer, I need to consider the boundary till the left of the panel(Viewer area includes the area under the right side panel). What this means is that, though the viwer need to occupy full width, the image that need to be fit should concider only the center between the left of the viewer upto left of the panel(excludes the area under the panel). I tried doing PanTo but couldn't understand how to calculate the center for a multi image scenario.It doesn't seem to be accurate. The x coordinate of the 4th image seem to be at 4.9 and am trying to see how I can calculate a correct coordinate center for each image where I can panTo. Can someone point me in the right direction?
Say I have a MovieClip of a non-rectangular shape. For an example I've attached a file called Symbol1.png. In this attached file, I've rotated the symbol instance. Of course, this causes the bounding box to rotate as well.
Now say I place that rotated symbol instance inside another symbol. I've illustrated this in the attached file called Symbol2.png. Note that the bounding box now includes the overhanging corners of the rotated symbol that is inside.
Is there any practical way to determine the apparent bounding box of Symbol2 without including the corners of Symbol1's bounding box? I'm trying to zoom and rotate to an automatically calculated size and angle, but this overhang problem is causing a lot of extra space to be included in my final zoomed perspective.
Thanks.
Every container's bounding region is defined by the space that its children occupy. What you're looking for isn't the "bounding box" per-say (as Flash is accurately representing this), but rather the visible space the children occupy (which is much harder to quantify).
Thankfully, you're not the first to ask this, and (technically) this is a duplicate of Calculate Bounding box coordinates from a rotated rectangle
When I re-size the container that a Google Map sits inside, is there any way to keep the map in the exact same position regardless of the change?
When I move the left edge of the map container, the map moves right or left, but when I move the right edge of the map container, the map doesn't move at all. Is there any way to reverse this so that if I moved the left edge, the map wouldn't move at all?
This is very similar to what Google is doing with their Results panel on the left side (maps.google.com). The problem is, when I use CSS/JS to re-size everything and re-center (using the setCenter method and calculating what the new center should be), the map flickers occasionally - not all the time, but about 15-20% of the time. I can't for the life of me figure out how to get it to work without flickering. I was wondering if there's any method of anchoring the map on the right-hand side?
Open to other ideas as well if anyone can give provide any hints.
Maybe try to position map in container absolutely with right property specified?
<div id="container" style="position:relative">
<div id="map" style="position:absolute; top:0; right:0"></div>
</div>
Although result depends on overall layout, it may work.
This probably will be very easy for some, but I am stuck on this. I have a map in a movieclip(mc_map) on stage and a small square which acts as a mask to the really bigger size of the same map. What I am want to do is that when I move the mouse on the mc_map(eg: say my cursor is on New York), the small sqaure window will unhide the same area, or will move that bigger image such that the same area is shown under the square mask. I also want to add another cursor(or crosshair) to the stage which is live only in the area of the square and replicates the position of mouse on map. Any help on this will be great thanks.
There are a lot of tutorials on this type of "magnify" effect. See if this one helps: http://www.flashuser.net/flash-actionscript-as3/create-a-magnifying-glass-in-actionscript-3-0.html