# Leaflet: Unhandled promise rejection

**URL:** <https://discuss.elastic.co/t/leaflet-unhandled-promise-rejection/116752>\
**Category:** Kibana\
**Created:** [January 23, 2018, 9:00pm UTC](https://discuss.elastic.co/t/leaflet-unhandled-promise-rejection/116752 "2018-01-23T21:00:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![michimau](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/michimau/32/23262_2.png) [@michimau](https://discuss.elastic.co/u/michimau)\
**Post date:** [January 23, 2018, 9:00pm UTC](https://discuss.elastic.co/t/leaflet-unhandled-promise-rejection/116752/1 "2018-01-23T21:00:10Z")

</div>

I have a plugin which make use of leaflet, it used to work fine under 5.5.

Under 6.1.x i bump into:  
Unhandled promise rejection Error: Map container not found.

in my controller.js have:  
"var map = null;  
map = L.map('.map-vis', {  
scrollWheelZoom: true,  
wheelPxPerZoomLevel: 5,  
wheelDebounceTime: 40,  
zoomDelta: 0.5,  
center: [53, 11],  
zoom: 4,  
maxZoom: 30,  
minZoom: 3  
});"

my vis template is:  
"\< div ng-controller="leafletwmsController" \>  
\< div class="map-vis"\>  
\< /div \>  
\< /div \>"

it looks like "map-vis" does not exists when it is used in the controller.js.  
any clue why it stopped to work under 6?

best  
michimau

---

<div class="post-metadata">

**Author:** ![Nathan\_Reese](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nathan_reese/32/84829_2.png) [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)\
**Post date:** [January 24, 2018, 9:02pm UTC](https://discuss.elastic.co/t/leaflet-unhandled-promise-rejection/116752/2 "2018-01-24T21:02:07Z")

</div>

Try wrapping map initialization inside `$timeout(initMap, 0);`. This will allow the current digest cycle to finish and the DOM to be updated before calling your initMap functionality.

---

<div class="post-metadata">

**Author:** ![michimau](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/michimau/32/23262_2.png) [@michimau](https://discuss.elastic.co/u/michimau)\
**Post date:** [January 25, 2018, 2:45pm UTC](https://discuss.elastic.co/t/leaflet-unhandled-promise-rejection/116752/3 "2018-01-25T14:45:30Z")

</div>

Thank you Nathan,

i am not sure i can follow your advice tho ☹  
With the same outcome, I have tried both:

> setTimeout(initMap(), 0);  
> function initMap() {  
> var mymap = L.map('map-vis').setView([51.505, -0.09], 13);  
> }

> $timeout(initMap(), 0);  
> function initMap() {  
> var mymap = L.map('map-vis').setView([51.505, -0.09], 13);  
> }

> var initMap = function () {  
> var mymap = L.map('map-vis').setView([51.505, -0.09], 13);  
> }  
> $timeout(initMap(), 0);

if you want to have a deeper look, i have uploaded a minimalistic example:

> <https://github.com/michimau/leaflet_test/blob/master/public/leaflet-wms_controller.js>

---

<div class="post-metadata">

**Author:** ![michimau](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/michimau/32/23262_2.png) [@michimau](https://discuss.elastic.co/u/michimau)\
**Post date:** [February 5, 2018, 7:38am UTC](https://discuss.elastic.co/t/leaflet-unhandled-promise-rejection/116752/4 "2018-02-05T07:38:33Z")

</div>

I was distracted by other matters and i forgot to comment. I confirm you nailed it 🎯  
Thanks 🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [March 5, 2018, 7:38am UTC](https://discuss.elastic.co/t/leaflet-unhandled-promise-rejection/116752/5 "2018-03-05T07:38:36Z")

</div>

Closed on March 5, 2018, 7:38am UTC

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.