Search code examples
javascriptangularjsionic-frameworkleafletangular-leaflet-directive

Angular leaflet directive issue: other parts besides the map does't show the second time entering the page

Angular leaflet directive issue: other parts besides the map does't show the second time entering the page. I am using ionic and angular leaflet directive to develop a map function. On iPhone, iOS10 this issue occurs, while on browser, it works fine.

As seen in the picture 1, the panel in the right below corner, will not show the second time I get in the page until I tap the map for one or two times. But the first time I get in the page, it works.

screen

The code is listed below:

<div data-tap-disabled="true" class="map-container" style="height:100%">

<leaflet id='mapbox' defaults="defaults"  tiles="tiles" lf-center="mapCenter" event-broadcast="events" maxbounds="maxbounds" markers="markersArray" width="100%" height="100%"></leaflet>

</div>

<div class="button-panel">
    <div class="tripguide-icon-hotel" ng-click="selectSitesAround(1)" ng-class="{selected:hotelSelected, deselected:!hotelSelected}"></div>
    <div class="tripguide-icon-poi" ng-click="selectSitesAround(2)" ng-class="{selected:poiSelected, deselected:!poiSelected}"></div>
    <div class="tripguide-icon-dining" ng-click="selectSitesAround(3)" ng-class="{selected:diningSelected, deselected:!diningSelected}"></div>
    <div class="tripguide-icon-list" ng-click="clickList()" ng-class="{deselected:!listSelected}"></div>
</div>

CSS:

.button-panel {
   z-index: 1000;
   opacity: 0.85;
   width: 76px;
   right: 80px;
   bottom: 128px;
   position: absolute;
}
Solution

  • I resolved this issue by using ionic's directive instead of using div.

    <ion-pane class="map-panel-pane">
<div class="button-panel">
    <div class="tripguide-icon-hotel" ng-click="selectSitesAround(1)" ng-class="{selected:hotelSelected, deselected:!hotelSelected}"></div>
    <div class="tripguide-icon-poi" ng-click="selectSitesAround(2)" ng-class="{selected:poiSelected, deselected:!poiSelected}"></div>
    <div class="tripguide-icon-dining" ng-click="selectSitesAround(3)" ng-class="{selected:diningSelected, deselected:!diningSelected}"></div>
    <div class="tripguide-icon-list" ng-click="clickList()" ng-class="{deselected:!listSelected}"></div>

</div>
</ion-pane>