Exploring the use of leaflets within LitElement

Question

Exploring the use of leaflets within LitElement

I have been working on a project involving LitElement components and I am looking to incorporate Leaflet into it. However, I am encountering difficulties with displaying the map properly. After installing Leaflet through npm in my project, I created a class that resembles the following code snippet.

import {LitElement, html, css} from 'lit-element';
import './node_modules/leaflet/dist/leaflet';

class Map extends LitElement{

    static get styles() {
        return [css``];
    }

    constructor() {
        super();
    }
    connectedCallback() {
        super.connectedCallback();
        let map = L.map('mapid').setView([51.505, -0.09], 13);

        let urlTemplate = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
        map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}));
    }

    render() {
        return html`
            <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
            <div id="mapid" style="height: 100%"></div>

        `;
    }
}

customElements.define("my-map", Map);

Upon running my application, I encounter the error message: Uncaught TypeError: Cannot set property 'L' of undefined. I am unsure how to effectively utilize Leaflet to showcase a map within my LitElement application and would greatly appreciate any guidance or pointers in the correct direction.

javascript leaflet polymer lit-element

Answer 1

Answer №1

When working on projects involving Lit, we recommend using es-module imports to keep things organized (although this is not mandatory). Instead of simply importing from

import './node_modules/leaflet/dist/leaflet';

try this approach:

import {map as createMap, tileLayer} from './node_modules/leaflet/dist/leaflet-src.esm.js';

Es modules are more compatible with the modular structure of web components and can be optimized effectively by bundlers compared to calling window.L

Update your leaflet calls accordingly. For instance:

let map = L.map('mapid').setView([51.505, -0.09], 13);

// should be
let map = createMap('mapid').setView([51.505, -0.09], 13);

// and
map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}))

// should be
map.addLayer(tileLayer(urlTemplate, {minZoom: 4}))

Libraries needing a global ID might face issues in web components with shadow DOM as it scopes DOM queries to their roots. Thankfully, leaflet's documentation suggests passing an element reference rather than just an id. To achieve this, fetch the element reference like so:

const mapEl = this.shadowRoot.querySelector('#mapid');

This reference can then be passed into the createMap function

const mapEl = this.shadowRoot.querySelector('#mapid');
let map = createMap(mapEl).setView([51.505, -0.09], 13);

If you encounter the issue where mapEl is null, it may be because LitElement delays rendering its contents until the firstUpdated lifecycle callback. In such cases, move the map creation from connectedCallback to firstUpdated.

An example integrating these changes along with some basic styling for the custom element can be found here: https://jsbin.com/fumusodake/edit?html,output

Answer 2

When working on projects involving Lit, we recommend using es-module imports to keep things organized (although this is not mandatory). Instead of simply importing from

import './node_modules/leaflet/dist/leaflet';

try this approach:

import {map as createMap, tileLayer} from './node_modules/leaflet/dist/leaflet-src.esm.js';

Es modules are more compatible with the modular structure of web components and can be optimized effectively by bundlers compared to calling window.L

Update your leaflet calls accordingly. For instance:

let map = L.map('mapid').setView([51.505, -0.09], 13);

// should be
let map = createMap('mapid').setView([51.505, -0.09], 13);

// and
map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}))

// should be
map.addLayer(tileLayer(urlTemplate, {minZoom: 4}))

Libraries needing a global ID might face issues in web components with shadow DOM as it scopes DOM queries to their roots. Thankfully, leaflet's documentation suggests passing an element reference rather than just an id. To achieve this, fetch the element reference like so:

const mapEl = this.shadowRoot.querySelector('#mapid');

This reference can then be passed into the createMap function

const mapEl = this.shadowRoot.querySelector('#mapid');
let map = createMap(mapEl).setView([51.505, -0.09], 13);

If you encounter the issue where mapEl is null, it may be because LitElement delays rendering its contents until the firstUpdated lifecycle callback. In such cases, move the map creation from connectedCallback to firstUpdated.

An example integrating these changes along with some basic styling for the custom element can be found here: https://jsbin.com/fumusodake/edit?html,output

Exploring the use of leaflets within LitElement

Answer №1

Similar questions

Generate a library using Vue CLI from a component and then import it into your project

The Next.js website displays a favicon in Chrome, but it does not appear in Brave browser

What is the best way to update my component when the selected value is changed?

How can I make a clickable button or link within an anchor tag that is still able to be right-clicked?

I have a JavaScript code stored as a string that I need to transform into plain JavaScript

use javascript or jquery to conceal the textbox control

Any tips for customizing the appearance of a {Switch} component from react-router-dom? I attempted to encase it in a <div> element, but it did

Sending a variable using the onchange function in jQuery

Error: React/Express - The renderToString() function encountered an unexpected token '<'

In ReactJs, what is the best way to load a new component when a button is clicked?

Tips for displaying HTML content using an array in Vue JS

Incorporate distinct items into an array using reactjs

Having trouble viewing the image slider on an HTML webpage

Slerping with quaternions in Three.js can produce undesirable outcomes when near the poles

Error: Appwrite Login Authentication failed due to account.createEmailSession function not recognized as a valid function

The timing of the RequestAnimationFrame function varies based on the dimensions of my canvas

What is the best way to merge two JSON arrays using Axios in a React project?

Concise way to add or insert an element into an array, at a specific property of an object

Display the execution duration on an HTML document

Access Images from Server using Front-End Technology