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();
Related
The calendar (so far) doesn't seem to account for collision detection when deciding the position of the calendar. For example :
In the screen shot you can see that the calendar goes off screen. Even if I disable horizontal scroll (overflow-x: hidden;), it still renders off screen.
Is there a solution to this without hacking away at the styles?
react-day-picker's DayPickerInput API now has classNames which allows you to change the name of the classes for the overlay and the overlay wrapper. You are basically renaming them so that in your own CSS/LESS file, you can use that name to style the overlay and have it use that instead of the classes in the react-day-picker-style.css (which you should not try to change as a best practice).
If you want to change the default props for the overlay (calendar popup), then you would do something like this wherever you are creating the component:
createElement(DayPicker.Input,
{ //all other props
classNames: {
overlay: "TheNewNameForTheClass",
overlayWrapper: "TheOtherNewNameForTheClass"
}
}
})
And then in your styling file, you would use TheNewNameForTheClass and TheOtherNewNameForTheClass to style the overlay.
I am using the #angular/material library and am trying to create a sort of bootstrap toast like effect. Where I want potentially multiple dialogs to appear in the top right hand corner and stack up below the most recent one.
By disabling the backdrop and closing features, I have this code:
let dialogRef = this.dialog.open(NotificationInputComponent, {disableClose: true, hasBackdrop: false});
dialogRef.afterClosed().subscribe(result => {
this.selectedOption = result;
});
Which works quite well, so when triggered, I get this in the middle of my screen:
If I manually change the elements css to position: absolute; right: 10px then it goes to the right hand side of the screen and looks correct. The issue is, now if I trigger another dialogue, I have to do the same again, but set the top property to stop it overlaying the existing dialog. I could presumably keep track of all the triggered dialogs in my component and manually update the top margin. But I was wondering if there is a neater way of doing it, either getting them to stack in css, or possibly is there a way to inject the triggered dialog into an #angular/flexbox layout?
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.
I just started working with Google Maps API v3 and I'm using the map div alongside some other DOM elements showing above it by seting position aboslute and working with z-index.
My problem is I have to show the infoWindow of google maps that is generated inside de Map div above the others DOM elements.
I'm not getting there. I also tried to put the DOM elements inside the Map div but it seems de API erases them.
Does anyone know what it could be done in order to infoWindow show above everything else?
Use custom overlay's to place the elements on the map. The elements need to have position set to fixed.
You can try to use custom controls instead of DOM elements to place on the map. The custom controls are placed above the map and when you open an InfoWindow, Google maps detects the position of the controls and automatically moves and opens the InfoWindow below the controls, so the both don't overlap. In this case it is better to use it instead of the custom overlay, because the overlay moves when you drag or zoom the map and the control always stays at the same position.
I have a notification bar that is 'hiding' behind my header by default:
It is only shown after an AJAX request (via jQuery animate()) to tell the user if it was successful:
But when the user scrolled down the page and does not see the header, the way I build it at the moment, it just hangs in the air:
So there are 2 cases:
if the user sees the header, it should be right beneath it
if the user does NOT see the header, it should be attached to the top of the page
And of course when the user scrolls it should move smoothly between the states.
How would I do this? CSS only / with JS?
Position the info bar using position:relative in your CSS. Get everying working in this normal state.
Then use the scroll event on the window in Javascript to find if the user has scrolled more than the height of the header. If this is the case, add a class to the info bar that sets it's position using position:fixed; top:0;.
Remove the class when the scrollTop height is less than the height of the header