html – Leaflet.draw in Node with LWC configuration issues-ThrowExceptions

Exception or error:

I’ve been trying to add Leaflet Draw to my SFDX Project with limited success. I’ve looked at the other posts here regarding it as well as their documentation to try and replicate it to get everything working, but I haven’t been able to. All of this is very new to me so it is a struggle but doing what I can.

Currently, I am trying to enable the Draw toolbar in leaflet so users can draw shapes to define regions. In order to do that, I am trying to set-up my HTML file and my map.js file.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css" el="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
    </head>
    <template>
        <lightning-card title="Geospatial Map">
            <div class="map-root" lwc:dom="manual"></div>

        </lightning-card>
    </template>
</html>

Error:
I’ve tried a few permutations of the and tags in terms of location and nesting, but keep getting an error either saying LWC1051: Forbidden tag found in template: '<link>' tag is not allowed.

or in the current setup

LWC1075: Multiple roots found
LWC1079: Expected root tag to be template, found link

Do I need to be formatting this differently/putting it somewhere else?

Map.js:

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import leaflet from '@salesforce/resourceUrl/leaflet';
var leafletDraw = require('leaflet-draw');
/* L is the Leaflet object constructed by the leaflet.js script */
/*global L*/

export default class Map extends LightningElement {

    map; // L.map, a leaflet map. constructed in initializeleaflet

    /**
     * When the Map LWC is ready, start downloading Leaflet.
     * 
     * When this is complete, call initializeleaflet()
     */


    connectedCallback() {
        Promise.all([
            loadScript(this, leaflet + '/leaflet.js'),
            loadStyle(this, leaflet + '/leaflet.css')
        ]).then(() => {
            this.initializeLeaflet();
            this.setupBaseTiles();
            this.dispatchEvent(new CustomEvent('ready', { detail: this.map }));
        });
    }


    /**
     * Constructs the Leaflet map on the page and initializes this.map
     */
    initializeLeaflet() {
        const mapRoot = this.template.querySelector('.map-root');
        this.map = L.map(mapRoot, {drawControl: true});
        this.map.fitWorld();
        L.control.scale().addTo(this.map);
        this.map.setMinZoom(2);
        this.map.setMaxZoom(17);
        this.addDrawTools();
    }

    addDrawTools() {
        const drawnItems = new L.FeatureGroup();
        this.map.addLayer(drawnItems);

        const drawControl = new L.Control.Draw({
            edit: {
                featureGroup: drawnItems
            }
        });
        L.control.drawControl(drawControl).addTo(this.map);

        const toolbar = L.Toolbar();
        const modifiedDraw = L.drawLocal.extend({
            draw: {
                toolbar: {
                    buttons: {
                        polygon: 'Draw a polygon!'
                    }
                }
            }
        });
        this.map.addLayer(modifiedDraw);
        toolbar.addToolbar(this.map);
    }

    /**
     * Setup the base OpenStreetMap tile layer
     */
    setupBaseTiles() {
        const mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

        L.tileLayer(
            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                attribution: '&copy; ' + mapLink + ' Contributors',

            })
            .addTo(this.map);
    }
}

Error:
When I deploy this to Salesforce, I get an error saying that L.Draw.Control is not a constructor, which I assume has to do with the incorrect set-up.

In the docs, it says to use npm install leaflet-draw, then to put var leafletDraw = require('leaflet-draw'); at the top of the file. Could someone provide insight on how I am to use the leafletDraw in conjuction with the other leafletDraw code snippets that I have in the file already, which come from the setup documentation?

Thank you in advance for any help!!

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *