i want to add a leaflet.js map to a form view of odoo.

The Problem is that the Map is not showing. The Css files are already loaded and displayed in the form view.

Due to a external api dependcy i need to use leaflet.js

At first i integrated the css and js files in assets.xml file:

`<?xml version="1.0" encoding="utf-8"?>

<odoo>

    <template id="assets_backend" name="run training assets" inherit_id="web.assets_backend">

        <xpath expr="." position="inside">

            <link rel="stylesheet" type="text/css" href="/run_training/static/lib/leaflet/leaflet.css"/>

            <script type="text/javascript" src="/run_training/static/lib/leaflet/leaflet.js"/>

            <link rel="stylesheet" type="text/scss" href="/run_training/static/src/scss/run_training.scss"/>

            <script type="text/javascript" src="/run_training/static/src/js/run_training.js"/>

        </xpath>

    </template>

</odoo>

` 

Then linked from the __manifest__.py:

    {

    'name': 'Run training',

    'version': '12.0.1.0.0',

    'category': 'Extra Tools',

    'summary': 'Run training',

    'sequence': '10',

    'license': 'AGPL-3',

    'author': 'Paperbuilt',

    'maintainer': 'Paperbuilt',

    'depends': ['base'],

    'data': [

        'security/ir.model.access.csv',

        'views/assets.xml',

        'views/Runtraining.xml'

    ],

    'installable': True,

    'application': True,

    'auto_install': False,

}

After that i defined a div field in the form view.

View file: 

           <field name="arch" type="xml">

            <form string="Routes">

                <group>

                        <field name="contact_ids" widget="many2many_tags"/>

                </group>

                <group>

                        <group>

                            <field name="startpoint_id"/>

                        </group>

                        <group>

                            <field name="endpoint_id"/>

                        </group>

                </group>

                <group>

                    <button string="Generate opimiatzed Route" type="object" name="get_notes" class="oe_highlight"/>

                </group>

                 <!--<xpath expr="//button[@name='get_notes']" position="after">

                       <div id="mapid"></div>

                </xpath>-->

                <div id="mapid"></div>

            </form>

          </field>

The run_training.js File:

        odoo.define('run_training.worldmap', function (require) {

    "use strict";

    var map = L.map('mapid').setView([51.75840, 6.39612], 15);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

             'attribution':  'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',

             'useCache': true

              }).addTo(map);

    var marker = L.marker([51.76148,6.39604]).addTo(map);

    });

What am I missing here !? The div is just showing plain white, however with the defined size of the css fike.

Any help would be much appreciated