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.
Related
I'm using Here Maps JS API within a Vue application. When toggling into full screen mode I'm dynamically setting the height of the container within which the Here Map is rendered. (100vh and 100vw)
I also have an event listener registered for the map so that it can respond to the resize event:
window.addEventListener('resize', () => {
this.map.getViewPort().resize();
});
The map does take up the entire page as I can see the logo at the bottom of the screen but there's a black bar with no map details along the bottom:
What could be causing this?
Looks like this was to do with the vue-fullscreen component that was being used. Calling the fullscreen API directly doesn't have the same problem so we've removed the reliance on the 3rd party and use the browser API in our own components using:
this.$refs.map.requestFullscreen(); // $refs allows the retrieval of an element based on a ref attribute on the element
and
document.exitFullscreen();
I have a large network diagram created by vis.js which is 100% wide in the browser and very tall, thus requires scrolling down the page to see it all - I want my page to operate like most other web pages in the world - but vis.js zooms when I scroll, instead of scrolling the page. How do I turn off zooming for the scroll but still allow it for say, pinch (or hold a key + scroll)?
Sure I can switch off zooming with this option - and add some built in zoom buttons instead:
var options = {
interaction: {
zoomView: false,
navigationButtons: true,
}
};
but this is not ideal. It requires the user to scroll to the bottom of the page to access the zoom controls. Plus I want a more accessing zoom feature (yeah, I know, I just turned that more accessible zoom feature off). Vis timeline diagrams seem to have more methods re zooming than network diagrams.
To summarise: I want mousewheel/trackpad scroll to be disabled for the diagram thus giving a natural whole page scrolling behaviour, plus a pinch (or holding a key down + scroll) to zoom.
The pinch zooming function is handled in the onwheel listener and can be detected with the ctrlKey property. You can override the handler with your own, immediately returning if a pinch is not detected and otherwise performing as usual.
this.network = container ? new Network(container, data, options) : {};
const { interactionHandler } = this.network;
if (interactionHandler) {
interactionHandler.body.eventListeners.onMouseWheel = (event) => {
if (!event.ctrlKey) return; // ctrlKey detects a mac touchpad pinch in onwheel event
interactionHandler.onMouseWheel(event);
};
}
I don't think there's some vis-network specific solution. You have to detect mouse scroll and handle it accordingly, something like this:
container.addEventListener("wheel", function(e){
if (e.stopPropagation) e.stopPropagation();
return false;
})
For supporting old browsers, you should use DOMMouseScroll and mousewheel events.
Unfortunatelly, I don't have a mouse at hand so can't really test this for you, but here's a playground where you can do this yourself: https://jsfiddle.net/9m433scr/8/
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'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
With the API version 3, How to change the size of an icon (created with MarkerImage) according to the zoom factor of the map ?
I suppose I must use scaledSize and map.getZoom() ?
This is code cut and free hand written from the api documentation but it might give you an idea where to start
google.maps.event.addListener(map, 'zoom_changed', function() {
yourMarker.setIcon("path to your icon here");
});
If you need to change all the icons on the map I would suggest putting them in an array and loop over them doing setIcon()