0

I am using angularjs and ngmap (https://ngmap.github.io). The map is initially hidden from view (using ng-show), and i want to be able to toggle between views without having to reload the whole map. I also want to display a kml on the map.

The map is only initialized (using lazy initialization) when that part of the page is shown.

It seems to work fine, except that sometimes the map can't zoom into the kml (using fitBounds). I think I have established that this is because the height of the containing div is zero (due to the controller code firing before the view is actually rendered), and fitBounds needs that.

I am trying to wait until I am sure the map is good and ready. I have tried the following events:

  • bounds_changed
  • tilesloaded

but neither do what I want.

Currently I am using a $timeout, but I don't like it, as I don't know how long it takes to initialize the map, and whether or not my code will fire between that time.

My next idea is to repeatedly check for the height of the map, but I would prefer something more explicit.

Another idea is to always have the map in the background, and use absolute positioning to cover it with the other information when that part is visible, but that breaks my current design.

zod
  • 2,688
  • 5
  • 27
  • 49
  • 1
    I assume you tried this https://ngmap.github.io/#/!map-initialized-callback.html? Also make sure you do set the height and width for the containing div (in css or even `style` attribute) – Dziad Borowy Apr 26 '16 at 14:49
  • no. looks like that is what i was looking for. i can close this question as stupid, or accept your comment as an answer if you want. – zod Apr 26 '16 at 15:07
  • nope... is spoke way too soon. the problem isn't always that i have to initialize the map. i want to keep the map initialized, but be able to show, hide it. I am using ng-show (on a containing element) and that is what makes the height zero. fit to bounds breaks under that condition I think. – zod Apr 26 '16 at 15:11
  • 1
    in that case I'd suggest that you set height/width on the map container but do the `ng-show` on a parent div (that should not affect the map container's height). If that doesn't work - maybe try to re-render the map once the containers are visible. Anyway, a working js-fiddle would be helpful with debugging. – Dziad Borowy Apr 27 '16 at 09:43
  • cheers @tborychowski. i've given up. the map was already contained in a div. I made a fiddle to prove to myself that the height of a hidden element is zero no matter what https://jsfiddle.net/dru_zod/9hau7zcg/1/. I have a solution, and that is basically to not even try. Will answer shortly – zod Apr 27 '16 at 10:10
  • this person basically had the same issue as me: http://stackoverflow.com/questions/30443918/ng-map-shows-partial-map-in-html – zod Apr 27 '16 at 12:14

1 Answers1

0

I've decided to avoid the issue.

The map is always going to be there, but I use some ng-class s to make it "visibility: hidden" and hide an unneeded scroll bar when the map tab is unselected.

As long as the visibility is hidden (instead of display: none) the initialization and positioning of the map goes okay.

It isn't perfect (I might need to scroll the other tabs one day), but it works for me for now.

zod
  • 2,688
  • 5
  • 27
  • 49