We are trying to add a Google map custom control to the 4th tab of a tabbed pane in XPages
When we do we get this:
A map with ONLY the first small 10th of the map draw in the top left corner.
As you can see only the first section of the map will load.
I've googled around and it appears that if the map IS NOT on the first tab it wont work without a 'tab change recall of the map initialise function'
I've tested this and it's true, when the map is the selected tab the map loads fine.
Here is our markup:
<xe:djTabPane id="djTabPaneMap" title="Map">
<xp:panel style="height:290px;width:860px" id="panel6">
<xc:ccGoogleMaps map_height="290" map_width="860"
map_width_measurement="px" map_height_measurement="px"
map_zoom="5" map_type="ROADMAP" map_center_type="Address"
map_center_address="Broadstairs">
</xc:ccGoogleMaps>
</xp:panel>
</xe:djTabPane>
It's really basic stuff I know, but we can't seem to get the initialise map function called from switching the tab.
Any ideas???
I am afraid that despite many attempts to call the build map function on tab change - using either the ID or CSS class name we are unable to draw our map fully.
When the map is outside the tabbed panel there is no issue.
Once I use Firebug to inspect the panel the map renders correctly
Many thanks!
Andrew
AFAIK, a Google map must be in an IFRAME. Or is it ?
Related
I'm about to try to create a walkthrough for a web app created using React. I'm trying to think of the best way to do it, and have been thinking of using things like Material UI's modal component. I'm thinking I should also include some kind of arrow component that points the user to whichever element (button, link, etc) on my page I want them to click next. Also I will want to create a backdrop to fade the screen except for whichever element I want the users attention to be drawn to.
I feel like this must have been done many times before, but I can't find anything from searching. Obviously whenever I Google "react walkthrough/guide/intro" I just get suggestions for teaching basic React.
(NB: I'm not looking to do one of those intro sliders, as I want to provide a more detailed step-by-step)
The keyword your need to search for is 'tour'. Searching on google for 'react tour', I found 2 libraries for you:
React Joyride: https://github.com/gilbarbara/react-joyride | Live Demo
reactour: https://github.com/elrumordelaluz/reactour | Live Demo
Both seem to have similar features:
Instruction modal that explains about an element on the page.
The modal is positioned next to the highlighted element.
The window will scroll down to the highlighted element if it's outside of the viewport.
The element is highlighted to bring more attention while the rest of the page is in the backdrop.
There are steppers on the modal to indicate which step you're on.
I have a google map (rendered using React-Google-Maps) that has several overlay view components, and a map marker component. I'd like the map marker to always be on top of the overlay views.
What I have looks something like this:
I've tried a few solutions, but so far nothing has worked:
I tried setting z-indexes in every way imaginable, and it does not appear to make a difference.
I've set the map marker options to include {optimized: false}, but that also does not affect rendering.
I can't move the overlay views to a different pane because I need them to be clickable, and the OVERLAY_MOUSE_TARGET is the only pane where that is possible.
I even tried to render the elements in a different order using setTimeout(), but that also did not fix the issue.
Is there any way to force the marker to render on top of the OverlayViews?
I'm working on a mapping app using ionic and leaflet. Note that I am not using the leaflet angular directive, I am using straight JS for the leaflet map (I know, I know...).
The initial state in my app loads the leaflet map just fine. If I switch to another state and back to the map everything is also fine. However, if I launch the app, switch to a different state and open a modal window in that state, then return to the original state, the map is broken and displays a number of grey tiles. The map will not update until the browser window resizes or the orientation of the mobile device is changed.
Here's a demo on Plunker: http://plnkr.co/edit/w67K2b?p=preview. To reproduce:
Click the button at the right side of the navbar which will take you to a different state.
Click the 'Back to map' button to go back to the original state. The map looks just fine.
Click the button in the navbar again.
Click the 'Open modal' button and then close the modal.
Click the 'Back to map' button and you will see that the map is now broken.
I've seen other people report issues with grey tiles, which typically can be resolved with a call to:
map.invalidateSize()
Unfortunately this does not resolve my issue. I'm pretty much a newb, but I think the problem is that when the modal opens, the invalidateSize() method in the leaflet source code is run, since the map div is not visible, the 'size' gets set to x:0, y:0 which ends up breaking the map when I transition back to the original state.
I'm not really sure where to go from here. Perhaps I can use JS to dynamically resize the div and trick leaflet into thinking a resize event has occurred? How would I do this? Any other thoughts?
Thanks!
I can't figure out how to remove the scroll bar from my website.
I've looked up ways of doing it on SO but with no luck. It just keeps staying in the box.
I also want to be scrollable but just without the actual scroll bar visible from computers.
(It's not visible via mobile devices which is okay)
Regards,
Alex
There is no standard cross-browser CSS code you can use to render scroll bars invisible. However, you can put your <div id="shoutbox_data"> element inside another <div> element with an id field like "shoutbox_wrapper", set the CSS overflow property of the wrapper element to hidden, and then use JavaScript to automatically resize the wrapper element so it covers up the scrollbox. The idea comes from Jan Bilek, and you can find the JavaScript to accomplish this on his blog.
The map shows if it just a normal map but does not show when the location service is added to show the users current position
I had tried the fix for this
<script>
$("#dashboard").on("next", "click", function(event, ui)
{
map.invalidateSize(false);
});
</script>
Leaflet map not displayed properly inside tabbed panel
but this does not work. It only shows a tiny piece of the map in the top left hand corner and also destroys the initial zoom and is zoomed out to the max.
If i pan the map it will briefly show a section of the map and then disappear. The added marker is set though.
http://jsfiddle.net/JRhCB/
I was able to get it to work by wrapping the whole map creation in a function mapInit() and then i just called that function on the button click that showed that section of the page. Zoom , location, options and the display of the map all work 100%.