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?
Related
I'm trying to embed a squared Google Maps in BS4, the row height was set by the image at the left (480×480px), but when I inserted the map it's huge and created big gaps at the top & bottom of the row.
How could I limit the row height, to this image height, the idea is that the map keeps the squared image ratio, it's place at the far right, and following the height from the image at the left...?
Screenshot
Push the "Launch Preview Window" button at the bottom right, and maximize window to see the gaps:
http://codeply.com/go/i9Yp3FI5bY
You may try using an inline CSS to declare the maximum height and width of the map while maintaining the responsiveness of the map.
style="max-height:480px;max-width:480px"
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I'm using Adobe Edge Animate and I'm really having trouble with all the different screen sizes and resolutions. I see that Adobe is coming out with new products which may address this issue. Basically all I'm tryng to do is have an image display (like a banner for example) that fills the width of the user's screen. I see the following questions, but answers are old and I know that there has been a lot of development in this area. Any ideas greatly apprciated.
Stackoverflow questions
From the splash screen. In the Properties tab change the switch next to the width to make it 100%. Select the Max W parameter and change this to too. All these tweaks will make the layout responsive. Next drag the image onto the stage and position in the top-left corner. In Properties click on Use Presets for Responsive Layout and choose the Center Background Image option, then Apply. This means the image will stay central whenever the stage morphs. Drag the bottom-right corner handle so the image fits over the entire background. Notice the image doesn’t scale or stretch but stays in the centre. In the Position and Size tab is an expand button; click this and add a Max W of (how many px your image is). Change the width to 100% and press Enter. It will jump right back to 75% but it has accepted the change. Click on the resize marker and drag to the left to see what happens when the stage is resized to a smaller layout. As you can see, the background is clipped but the image resizes to fit.
Here is a link to the tutorial I think this will better answer your question if you do this tutorial. http://www.webdesignermag.co.uk/tutorials/create-a-responsive-animation-with-adobe-edge-animate/
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.
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.