I've searched quite a bit and can't figure this out. I'm updating a map from v2 to v3. It allows the user to resize the map container. After changing the container size, in v2 I just did map.checkResize() and it just worked. For the v3 version, I used map.fitBounds(map.getBounds()) and it doesn't do anything I can see. I maintain a crosshair marker right at the center of the container, so it's obvious the v3 resize is not working right.
I've also tried placing the bounds functions in a 'bounds_changed' event callback function, as well as map.setOptions(mapOptions) both in and outside of the callback. It's clear the map is unaware of the container size change. How do I get the map to recognize the new container size?
This is currently on a local test server so I can't provide a link. I could make an illustrative sample on a live server, but I'm hoping this a generic enough question to make that unnecessary. I don't need specific code, I just want to know what basic steps I need to do to get the map to work properly in it's new container size.
In v2 map.checkResize(), the code in v3 uses like this:
google.maps.event.trigger(map, 'resize');
And getting the size of map container like this:
var mapDiv = map.getDiv();
var size = new google.maps.Size(mapDiv.offsetWidth, mapDiv.offsetHeight);
Related
When an OpenLayers 3 map is resized, the contents of the map are stretched to fit the new map size. This is typically fixed by calling map.UpdateSize() after the change for the map to adapt.
However, I'm wondering how to achieve a smooth transition for the map contents when animating the width of the map.
Here is a minimal example of the problem.
The map resizes in a very unpleasant way before the update happens.
I figured out that changing the ol.Map renderer to 'dom' fixes the issue, but unfortunately this is not an option for me.
In my Adobe Edge project, I'm trying to create a website that adapts according to the width of the window. So my plan is:
1. Check the width when the site is loaded and adapt the elements if necessary.
2. Check the width whenever the window is resized and adapt the elements if necessary.
In order to do this I've created this function.
function adapt() {
if ($( window ).width() <= 800) {
sym.$("testo_box").css("width", "99%");
sym.getComposition().getStage().$("corpus_txt").html("Test");
}
}
You can see what the elements are in the attached image.
Elements
The first problem is I couldn't find any way to create this function in such a place and in such a way that it can be global, and call-able from within other scripts.
But my main problem is this: when I place this function inside Stage -> window.resize, and call it with:
adapt();
It works perfectly. But when I place it inside Stage -> document.compositionReady and call it the same way, the following line:
sym.$("testo_box").css("width", "99%");
doesn't produce the expected result. It does nothing.
I'm sure the if condition is checked and verified, because the other line:
sym.getComposition().getStage().$("corpus_txt").html("Test");
produces the expected result.
I have a workaround for this, which makes use of the timeline and labels, but quite frankly is very impractical.
Just to clear things, up, I know it's pointless to create that function to call it right below from the same "place" and only once. The result would be identical if just the "if" part was there. The plan is to make the function global and just call it from those "places".
Thanks to everyone who will be so kind to help out a newbie like me, and hopefully the answers will help other people as well.
I'm using OpenSeaDragon for the first time and I'm trying to display to the console zoom level and Viewport center.
Now I found out how to display coordinates on click (Openseadragon image cordinates), but I'm having trouble w/ zoom and center. From looking at the API doc, I'm thinking that I need to use getCenter and getZoom of method Viewport, but syntactically I'm lost. Any help would be much appreciated. Thanks!
So after some help, here's the code I ended up using to get click coordinates as well as zoom and center (in image coordinates):
viewer.addHandler('canvas-click', function(target, info) {
var viewportPoint = viewer.viewport.pointFromPixel(info.position);
var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint.x, viewportPoint.y);
console.log(imagePoint.x, imagePoint.y);
console.log(viewer.viewport.getZoom());
var viewportCenter = viewer.viewport.getCenter();
var imageCenter = viewer.viewport.viewportToImageCoordinates(viewportCenter.x, viewportCenter.y);
console.log(imageCenter.x, imageCenter.y);
});
You're on the right track. If your viewer is called viewer, you would do viewer.viewport.getZoom() for instance.
The viewport has a number of other coordinate conversion methods:
http://openseadragon.github.io/docs/symbols/OpenSeadragon.Viewport.html
...and there's also a plugin that provides even more, if you need:
https://github.com/msalsbery/openseadragonimaginghelper
I am experiencing a strange positioning issue when placing an overlay in my home city (Syracuse, NY). First the test map:
http://hotsdg.com/~downtown/map.html
This map uses the example code to place my image over newark. No problem here. The image is skewed and distorted of course, by placement occurs as expected.
The second map:
http://hotsdg.com/~downtown/map_two.html
This map uses the example code with coords adjusted to place the image over Syracuse, NY. At first glance the overlay appears to be missing. However, upon inspection I discovered that the element which is used for the overlay has it's top set to 94px (at the initial zoom), instead of 0px. Adjusting this manually brings the image into view.
Any thoughts as to what might be happening here, or more importantly, why it's happening?
A google.maps.LatLngBounds takes SW, NE LatLngs for the constructor.
Your working map does that (SW, NE):
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
the not working one is (NW, SE):
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(43.054340, -76.159101),
new google.maps.LatLng(43.042504, -76.142601));
I have a map that is taller than wide. I noticed that in some instances, the fitBounds method was failing to adjust the zoom and center correctly in order to display all of the markers.
I've managed to isolate the issue in this example:
http://jsbin.com/welcome/2568
In the example I first try to load 23 positions and you will notice its zoomed quite far in. What I'm doing is:
//extending 23 positions doesn't really work
bounds = new google.maps.LatLngBounds ();
for (var i = 0; i < markerList.length; i++) {
pos = new google.maps.LatLng (markerList[i]["Za"],markerList[i]["$a"])
bounds.extend(pos);
}
window.map.fitBounds(bounds);
After 5 seconds I run that basic script again, but this time instead of extending 23, I only extend the bounds 5 times. This time the map actually zooms out!
What I noticed is that to get this issue to reproduce, I have to set the width and height of the canvas div:
<div id="map_canvas" style="width:450px;height:600px;"></div>
So I guess my question is: How can I both set the map canvas size and successfully fitBounds() for 25+ positions?
I just figured what was happening is that I was setting the minZoom in the map configuration.
It seems that if the minZoom is lower than the one needed by fitBounds() to display all the positions, it silently fails.
The reason the width of the map influenced is that the thinner the map, the more it had to zoom out to display the whole set of positions, and when it met the constraint of minZoom, it would die.
The reason the subset of 5 positions would work I think is just because it wasn't reaching the minZoom.
To solve the issue I removed the minZoom setting.