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?
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.
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 implementing a simple map. The map consists of a viewport, and the map image itself, which is actually a div with a background image.
The viewport is relatively positioned and it's overflow is hidden, and the map image is absolutely positioned within the viewport.
The map can be moved with the mouse within the viewport and the map can also be zoomed (just increasing the size of the image as the image is a .svg)
The map has points on it which the user can hover over to get a description in a tooltip of the point. The points can also be focused by tabbing to them.
Points are children of the map image div and are absolutely positioned by percentage (to retain the correct position when the map is zoomed)
When a point is focused, I want to move the map so that the point is in the middle of the viewport. I have written the code for this and it works fine. However, if a point is outside of the viewport (not visible) then the browser automatically tries to move the map so the point is visible. I don't want it to do this, as it is interfering with the code I have written to animate the map move. This is nothing to do with scrolling.
I am using jQuery and have tried e.preventDefault() and return false; in the focus handler for the map points but neither work.
Is preventing this behaviour even possible?
Thanks in advance
I have found out that the scroll value of the map viewport was being set by the browser in order to bring the map point into view. As I am moving the map by setting it's top and left positions, this is what was causing the issue.
The solution was to add the .scroll() event listener to the viewport and just set the scrollTop and scrollLeft values to 0 when the event is triggered
I'm trying to programmatically zoom in on what I'm seeing on the page, without changing which part of the content I'm seeing, regardless of where the scroll level is. I want this to be animated and pretty.
So I'm using $('body').animate({zoom:2.0}, 1000) to animate the zoom, but this has the irritating side effect of keeping the top of the visible window at the same point in the document (the browser's attempt to keep me where I was, actually, complete failure), so I need to basically continuously scroll to the same relative vertical center of the page as it's animating in order to get around that. How can that be done? I don't know how to do two things at once with animation--- I mean I could change multiple CSS properties at once, but how can I scroll?
Essentially, it needs to do something like this:
Call begin zoom animation:
1.Mark height level of any element that appears at center of window
2.Do one step of zoom animate
3.Scroll so that that element's height level relative to center of window is unchanged
4.Repeat until animation is complete
You can using Panzoom component for your goal.
I have a map that is position:fixed on my page. So when I scroll down it stays with you on the page When I roll over the pinpoints on my map the InfoBox displays in the correct position, but when I click one of my results which triggers the Infobox to display it is relative to where the map was when the page loaded (so usually high up on the page and not down where I scrolled it). I am trying to manipulate where the info box displays using the ShowInfoBox, but it always needs LatLong Coordinates instead of pixel coordinates. Since the map moves up and down the page the pixel location could change depending on how far you scroll.
Right now I am just poitioning it with javascript after it loads but that is a less then ideal situation as I run into all sorts of problems.
It's probably a bug with Bing Maps that it doesn't position the infobox correctly. You'll have to work around it. The infobox most likely has a unique ID or a unique class that you could select. Using that you can manipulate the infobox once you set the new Lat/Long position.
When you display the infobox, after you call the show method with the Lat/Long you should then reposition the infobox using CSS based on the scroll positon. So, if the page has scrolled down 100 pixels you need to add 100 pixels to the "top" css property. The same goes for the "left" property. This should always result in your infobox appearing in the correct place.