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
Related
Using this example: https://developer.here.com/api-explorer/maps-js/infoBubbles/open-infobubble . I have a new map with two points.If I change the div of map adding width:100%;height:100% and position:absolute. I have a full screen map, but in this versión if i load the first time the page without full screen and a click a full screen windows i have a grey backgroud color. The same issue with a movile browswer when change the screen orientation. In the other API it didnt happened, all time the map is in full screen. ¿How can i fix it?
And the other question in this api, how i can close a infobubbles ??.
Regards and sorry for my english.
If I understand you correctly...
When you change the size of the map's container you need to call a refresh to the map.
For example - create your map:
var map = new H.Map(
document.getElementById(map_div),
defaultLayers.normal.map,
{
zoom: 4,
center: { lat: 45.3367, lng: -95.4492 },
});
Then add a listener for a window resize:
window.addEventListener('resize', function () {
map.getViewPort().resize();
});
Or call the resize method whenever you change the size of your div map container.
As for dealing with closing info bubbles, I am assuming you already have your HERE Maps UI object setup for adding/showing info bubbles.
To close the open one use the HERE Maps UI object:
ui.removeBubble(bubble);
if your issue is keeping track of what is currently open, trying assigning it to a script wide variable anytime you add a bubble:
//show info bubble
ui.addBubble(bubble);
openInfoBubble = bubble;
Then when you need to close the open InfoBubble:
if (openInfoBubble != null)
ui.removeBubble(openInfoBubble);
Hopefully, that answers your questions... good luck.
Have a huge problem, searching for weeks now. I have many markers and big InfoWindows per marker that most of time don't show up completely in my map-bounds. How to move the map automaticly and show these big InfoWindow exactly in the center? Further I think of showing it not only in the center (because the InfoWindows are more long than broad) but, say, in a lower position of center (centered, but near to bottom on the map-bounds). I hope you understand, what I mean.
Further, my InfowWindow even changed in size after I click on a link in it and get even bigger (o my god ;-), so I also have to handle this also.
You probably know that InfoWindow has an option disableAutoPan, but it's defaulted to false so that you should automatically see it whenever it's opened. If you want it in the center, then your best bet is in the click event before opening the InfoWindow, to center the map on the marker first. The autopan from opening should handle automatically and adjust the viewport to fit the InfoWindow from there as necessary.
//marker and map defined somewhere already
var iw = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function(){
map.setCenter(marker.getPosition());
iw.setContent('your content');
iw.open(map,marker);
});
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.
I have, for example, 10 markers on Google Map. But I zoomed and in visible area left only 2 markers.
Can Google Maps API somehow return me a number of markers in visible area (2 for my example)?
You can evaluate map.getBounds().contains(marker.getPosition()) with each marker to see which ones are included in the current viewport.
The above code is not working. There is no method as such getBounds(). Below is the updated code :
VisibleRegion visibleRegion = map.getProjection().getVisibleRegion();
LatLngBounds mapBound = visibleRegion.latLngBounds;
if(mapBound.contains(marker.getPosition()){
// do somethings i.e. such as changing marker icon and others.
}