# Using leaflet on custon app plugin

**URL:** <https://discuss.elastic.co/t/using-leaflet-on-custon-app-plugin/47358>\
**Category:** Kibana\
**Created:** [April 14, 2016, 8:21am UTC](https://discuss.elastic.co/t/using-leaflet-on-custon-app-plugin/47358 "2016-04-14T08:21:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bigtn](https://avatars.discourse-cdn.com/v4/letter/b/958977/32.png) [@bigtn](https://discuss.elastic.co/u/bigtn)\
**Post date:** [April 14, 2016, 8:21am UTC](https://discuss.elastic.co/t/using-leaflet-on-custon-app-plugin/47358/1 "2016-04-14T08:21:21Z")

</div>

hi,

im creating a custom app plugin on kibana

the idea is to add a map using leaflet

this the content of my controller :

```
//leaflet
angular.extend($scope, {
    london: {
        lat: 51.505,
        lng: -0.09,
        zoom: 8
    },
    defaults: {
        tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
        tileLayerOptions: {
            opacity: 0.9,
            detectRetina: true,
            reuseTiles: true,
        },
        scrollWheelZoom: false
    }
});    

```

in my template :

`<leaflet center="london" defaults="defaults" width=400 height=400></leaflet>`

i have no error and i don't have the map too.

any idea?

---

<div class="post-metadata">

**Author:** ![bigtn](https://avatars.discourse-cdn.com/v4/letter/b/958977/32.png) [@bigtn](https://discuss.elastic.co/u/bigtn)\
**Post date:** [April 14, 2016, 1:59pm UTC](https://discuss.elastic.co/t/using-leaflet-on-custon-app-plugin/47358/2 "2016-04-14T13:59:45Z")

</div>

after installing

```
npm install ui-leaflet
npm install angular-simple-logger

```

- 

```
import nemLogging from 'angular-simple-logger';
import leaflet from 'ui-leaflet';
var app = uiModules.get('app/appname', ['nemLogging', 'ui-leaflet'])

```

i get

```
Uncaught TypeError: angular.module is not a function (https://localhost:5601/ngb/bundles/..

```

so if i replace

```
import nemLogging 'angular-simple-logger';

```

with

```
import './lib/angular-simple-logger/dist/index.js';

```

i get the same error

or if test light one

```
import ‘./lib/angular-simple-logger/dist/index.light.js’;

```

i get this error

```
 ReferenceError: L is not defined

```

any idea?

---

<div class="post-metadata">

**Author:** ![hamzaezzi](https://avatars.discourse-cdn.com/v4/letter/h/9de053/32.png) [@hamzaezzi](https://discuss.elastic.co/u/hamzaezzi)\
**Post date:** [April 15, 2016, 3:23pm UTC](https://discuss.elastic.co/t/using-leaflet-on-custon-app-plugin/47358/3 "2016-04-15T15:23:39Z")

</div>

use 5.0 branch

full sample from the gist of Reefstah

> <https://gist.github.com/Reefstah/c6806820d41707e74f2682c5d979f709>

---

<div class="post-metadata">

**Author:** ![bigtn](https://avatars.discourse-cdn.com/v4/letter/b/958977/32.png) [@bigtn](https://discuss.elastic.co/u/bigtn)\
**Post date:** [April 15, 2016, 3:24pm UTC](https://discuss.elastic.co/t/using-leaflet-on-custon-app-plugin/47358/4 "2016-04-15T15:24:49Z")

</div>

yeah

full discuss

> **[Developing Kibana Plugins - Luminis Amsterdam](https://amsterdam.luminis.eu/2016/04/07/developing-kibana-plugins/#comment-7194)**
>
> For quite some time I’ve been meaning to rewrite an old Elasticsearch plugin to a new Kibana plugin. It’s quite different than you were used to. The Kibana plugins are quite new and were released in version 4.2.0. There are quite a few warnings on...

---

<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:** [July 6, 2017, 1:56pm UTC](https://discuss.elastic.co/t/using-leaflet-on-custon-app-plugin/47358/5 "2017-07-06T13:56:01Z")

</div>

Closed on July 6, 2017, 1:56pm UTC