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.

@Ale No need for that, quoting the [Leaflet docs](http://leafletjs.com/reference.html#map-l.map): `L.Map( id, options)` - "Instantiates a map object given a div element (or its id)". This seems to pass an HTML element, which is fine. — Jieter, Jun 17 '16 at 16:49

score 1 · Accepted Answer · answered Jun 17 '16 at 18:10

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.

leaflet map is moved out of div tag

1 Answers1