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 © <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
