leaflet map is moved out of div tag

Question

I'm trying to show a leaflet map inside a div tag. Unfortunately it gets moved out of the tag.

This is my angular directive:

import L from 'leaflet';
import esri from 'esri-leaflet';
import 'leaflet/dist/leaflet.css';

class MapDirective {

    constructor() {
        this.resctrict = 'E';
        this.controller = MapController;
    }

    link(scope, element) {

        let map = L.map(element[0]).setView([51.505, -0.09], 8);

        esri.tiledMapLayer({
            url: "https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
        }).addTo(map);


    }

    /**
     * @returns {MapDirective}
     */
    static directiveFactory() {
        return new MapDirective();
    }
}

And this is my html template code:

<h1>Leaflet Map Integration</h1>

<div style="width: 500px; height: 500px">
    <map></map>
</div>

I already tried adding a

map.invalidateSize();

mentioned here Leaflet Map not showing in bootstrap div but that did not help.

The full project code can be found at github.

Answer 1

I found the solution. In the getting started there is this statement:

Make sure the map container has a defined height, for example by setting it in CSS.

To bad something that important is only mentioned there.

I changed the directive type from "E" to "EA". This makes it possible to change the template into

<h1>Leaflet Map Integration</h1>

<div>
    <div map style="height: 500px"></div>
</div>

And everything is working as expected.