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%.
Related
I'm using google-map-react to show some markers on the map and when the user clicks on the marker some information is displayed in a custom popover made with Reactstrap. But the issue is when the market is near the edge of the map the popover is displayed outside of the map. Is there any way to pan the map automatically when there's no space for the popover? Thanks.
You can check the attached gif for proper understandings
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'm working on a web app that uses lots of modal overlays with scrollable content in the modal . On touch devices, and in particular on Android, the mobile browser wants to scroll the body content behind the modal instead of the actual scrollable content area within the modal. Or, if the content does scroll, when it hits the top or bottom of the scrollable area, the scrolling then continues on the body. I don't want the body to scroll at all under any circumstances when the modal is visible/active.
I tried to prevent this with the following code but it seems to have no effect (in this case, $context is the document root):
$context.on('touchmove touchstart touchend', '[data-modal-content]', function(e) {
e.stopPropagation();
});
Anyone have other ideas/insight?
Is there anything wrong with the provided z-index of your elements? Maybe the Modal itself or an inner container isn't stacked on top of the body-text
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 ?