Loading the leaflet Map in Lightning Web Component












3















When I am trying to load the lightning web component map is not loading.



<template>
<div id="map" lwc:dom="manual"></div>
</template>

import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import leaflet from '@salesforce/resourceUrl/leaflet';


export default class Leaflet extends LightningElement {
@api leafletInitialized = false;
@api recordId;
renderedCallback() {
if (this.leafletInitialized) {
return;
}
this.leafletInitialized = true;

Promise.all([
loadScript(this, leaflet + 'leaflet/leaflet.js'),
loadStyle(this, leaflet + '/leaflet/leaflet.css')
])
.then(() => {
this.initializeleaflet();
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error loading D3',
message: error.message,
variant: 'error'
})
);
});
}

initializeleaflet() {
var map = L.map('map').setView([39.7392, -104.991531], 14);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);

}
}









share|improve this question























  • any error or warning in the console?

    – glls
    5 hours ago











  • TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4),Uncaught (in promise) TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4)

    – Vidhyasagaran Muralidharan
    5 hours ago













  • also, where are you trying to use your component? LEX, communities?

    – glls
    4 hours ago











  • lightning home page

    – Vidhyasagaran Muralidharan
    4 hours ago
















3















When I am trying to load the lightning web component map is not loading.



<template>
<div id="map" lwc:dom="manual"></div>
</template>

import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import leaflet from '@salesforce/resourceUrl/leaflet';


export default class Leaflet extends LightningElement {
@api leafletInitialized = false;
@api recordId;
renderedCallback() {
if (this.leafletInitialized) {
return;
}
this.leafletInitialized = true;

Promise.all([
loadScript(this, leaflet + 'leaflet/leaflet.js'),
loadStyle(this, leaflet + '/leaflet/leaflet.css')
])
.then(() => {
this.initializeleaflet();
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error loading D3',
message: error.message,
variant: 'error'
})
);
});
}

initializeleaflet() {
var map = L.map('map').setView([39.7392, -104.991531], 14);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);

}
}









share|improve this question























  • any error or warning in the console?

    – glls
    5 hours ago











  • TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4),Uncaught (in promise) TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4)

    – Vidhyasagaran Muralidharan
    5 hours ago













  • also, where are you trying to use your component? LEX, communities?

    – glls
    4 hours ago











  • lightning home page

    – Vidhyasagaran Muralidharan
    4 hours ago














3












3








3


1






When I am trying to load the lightning web component map is not loading.



<template>
<div id="map" lwc:dom="manual"></div>
</template>

import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import leaflet from '@salesforce/resourceUrl/leaflet';


export default class Leaflet extends LightningElement {
@api leafletInitialized = false;
@api recordId;
renderedCallback() {
if (this.leafletInitialized) {
return;
}
this.leafletInitialized = true;

Promise.all([
loadScript(this, leaflet + 'leaflet/leaflet.js'),
loadStyle(this, leaflet + '/leaflet/leaflet.css')
])
.then(() => {
this.initializeleaflet();
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error loading D3',
message: error.message,
variant: 'error'
})
);
});
}

initializeleaflet() {
var map = L.map('map').setView([39.7392, -104.991531], 14);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);

}
}









share|improve this question














When I am trying to load the lightning web component map is not loading.



<template>
<div id="map" lwc:dom="manual"></div>
</template>

import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import leaflet from '@salesforce/resourceUrl/leaflet';


export default class Leaflet extends LightningElement {
@api leafletInitialized = false;
@api recordId;
renderedCallback() {
if (this.leafletInitialized) {
return;
}
this.leafletInitialized = true;

Promise.all([
loadScript(this, leaflet + 'leaflet/leaflet.js'),
loadStyle(this, leaflet + '/leaflet/leaflet.css')
])
.then(() => {
this.initializeleaflet();
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error loading D3',
message: error.message,
variant: 'error'
})
);
});
}

initializeleaflet() {
var map = L.map('map').setView([39.7392, -104.991531], 14);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);

}
}






lightning lightning-web-components






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked 6 hours ago









Vidhyasagaran MuralidharanVidhyasagaran Muralidharan

390316




390316













  • any error or warning in the console?

    – glls
    5 hours ago











  • TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4),Uncaught (in promise) TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4)

    – Vidhyasagaran Muralidharan
    5 hours ago













  • also, where are you trying to use your component? LEX, communities?

    – glls
    4 hours ago











  • lightning home page

    – Vidhyasagaran Muralidharan
    4 hours ago



















  • any error or warning in the console?

    – glls
    5 hours ago











  • TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4),Uncaught (in promise) TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4)

    – Vidhyasagaran Muralidharan
    5 hours ago













  • also, where are you trying to use your component? LEX, communities?

    – glls
    4 hours ago











  • lightning home page

    – Vidhyasagaran Muralidharan
    4 hours ago

















any error or warning in the console?

– glls
5 hours ago





any error or warning in the console?

– glls
5 hours ago













TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4),Uncaught (in promise) TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4)

– Vidhyasagaran Muralidharan
5 hours ago







TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4),Uncaught (in promise) TypeError: Cannot read property 'message' of undefined at leafletInitialized.Promise.all.then.catch.a (leaflet.js:4)

– Vidhyasagaran Muralidharan
5 hours ago















also, where are you trying to use your component? LEX, communities?

– glls
4 hours ago





also, where are you trying to use your component? LEX, communities?

– glls
4 hours ago













lightning home page

– Vidhyasagaran Muralidharan
4 hours ago





lightning home page

– Vidhyasagaran Muralidharan
4 hours ago










2 Answers
2






active

oldest

votes


















1














L.map(<String> id, <Map options> options?) is the initialization factory, in which you provide the ID of your element for the component to initialize, LWC doesn't seem to support passing in the id for leaflet to init since (from the doc):




Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID.




leaflet also supports passign in the ELEMENT, so, if you pass the element rather than the string id, you should be fine (for the most part):



L.map(<HTMLElement> el, <Map options> options?)


if you change your code to



const mapRoot = this.template.querySelector(".map-root")
var map = L.map(mapRoot).setView([39.7392, -104.991531], 14);


you will be able to pass the instantiated HTML element to the factory.
You will need to add a class name to your div in order to use it as a query selector, since id's are not supported. Ex:



<template>
<div class="map-root" lwc:dom="manual"></div>
</template>


and one last thing, dont forget your css file, if you dont add a component height, the component will load but will appear with a height of 0px:



.map-root{
height: 180px;
}


enter image description here
Leaflet Documentation



LWC Documentation - Access Elements the Component Owns






share|improve this answer

































    0














    The other answer about using the css class instead of id is great . I will add few more things that could be cause for this.



    Check that the zip file you have for leaflet in the static resource is properly zipped and you are using the proper path .



    I downloaded from the site and uploaded to static resource and named the static resource as leaflet .



    I had to change the path as below



    renderedCallback() {
    if (this.leafletInitialized) {
    return;
    }
    this.leafletInitialized = true;

    Promise.all([
    loadScript(this, leaflet + '/leaflet.js'),
    loadStyle(this, leaflet + '/leaflet.css')
    ])
    .then(() => {
    this.initializeleaflet();
    })
    .catch(error => {
    console.log(error);
    this.dispatchEvent(
    new ShowToastEvent({
    title: 'Error loadingLeaflet',
    message: error,
    variant: 'error'
    })
    );
    });
    }


    Also to see the exceptions of promise reject just log the error that will tell you true error .



    Also just a thought what makes you use leaflet . There is a lightning-map lwc component provided by salesforce and why not just use it .






    share|improve this answer

























      Your Answer








      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "459"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: false,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: null,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f254214%2floading-the-leaflet-map-in-lightning-web-component%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      1














      L.map(<String> id, <Map options> options?) is the initialization factory, in which you provide the ID of your element for the component to initialize, LWC doesn't seem to support passing in the id for leaflet to init since (from the doc):




      Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID.




      leaflet also supports passign in the ELEMENT, so, if you pass the element rather than the string id, you should be fine (for the most part):



      L.map(<HTMLElement> el, <Map options> options?)


      if you change your code to



      const mapRoot = this.template.querySelector(".map-root")
      var map = L.map(mapRoot).setView([39.7392, -104.991531], 14);


      you will be able to pass the instantiated HTML element to the factory.
      You will need to add a class name to your div in order to use it as a query selector, since id's are not supported. Ex:



      <template>
      <div class="map-root" lwc:dom="manual"></div>
      </template>


      and one last thing, dont forget your css file, if you dont add a component height, the component will load but will appear with a height of 0px:



      .map-root{
      height: 180px;
      }


      enter image description here
      Leaflet Documentation



      LWC Documentation - Access Elements the Component Owns






      share|improve this answer






























        1














        L.map(<String> id, <Map options> options?) is the initialization factory, in which you provide the ID of your element for the component to initialize, LWC doesn't seem to support passing in the id for leaflet to init since (from the doc):




        Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID.




        leaflet also supports passign in the ELEMENT, so, if you pass the element rather than the string id, you should be fine (for the most part):



        L.map(<HTMLElement> el, <Map options> options?)


        if you change your code to



        const mapRoot = this.template.querySelector(".map-root")
        var map = L.map(mapRoot).setView([39.7392, -104.991531], 14);


        you will be able to pass the instantiated HTML element to the factory.
        You will need to add a class name to your div in order to use it as a query selector, since id's are not supported. Ex:



        <template>
        <div class="map-root" lwc:dom="manual"></div>
        </template>


        and one last thing, dont forget your css file, if you dont add a component height, the component will load but will appear with a height of 0px:



        .map-root{
        height: 180px;
        }


        enter image description here
        Leaflet Documentation



        LWC Documentation - Access Elements the Component Owns






        share|improve this answer




























          1












          1








          1







          L.map(<String> id, <Map options> options?) is the initialization factory, in which you provide the ID of your element for the component to initialize, LWC doesn't seem to support passing in the id for leaflet to init since (from the doc):




          Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID.




          leaflet also supports passign in the ELEMENT, so, if you pass the element rather than the string id, you should be fine (for the most part):



          L.map(<HTMLElement> el, <Map options> options?)


          if you change your code to



          const mapRoot = this.template.querySelector(".map-root")
          var map = L.map(mapRoot).setView([39.7392, -104.991531], 14);


          you will be able to pass the instantiated HTML element to the factory.
          You will need to add a class name to your div in order to use it as a query selector, since id's are not supported. Ex:



          <template>
          <div class="map-root" lwc:dom="manual"></div>
          </template>


          and one last thing, dont forget your css file, if you dont add a component height, the component will load but will appear with a height of 0px:



          .map-root{
          height: 180px;
          }


          enter image description here
          Leaflet Documentation



          LWC Documentation - Access Elements the Component Owns






          share|improve this answer















          L.map(<String> id, <Map options> options?) is the initialization factory, in which you provide the ID of your element for the component to initialize, LWC doesn't seem to support passing in the id for leaflet to init since (from the doc):




          Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID.




          leaflet also supports passign in the ELEMENT, so, if you pass the element rather than the string id, you should be fine (for the most part):



          L.map(<HTMLElement> el, <Map options> options?)


          if you change your code to



          const mapRoot = this.template.querySelector(".map-root")
          var map = L.map(mapRoot).setView([39.7392, -104.991531], 14);


          you will be able to pass the instantiated HTML element to the factory.
          You will need to add a class name to your div in order to use it as a query selector, since id's are not supported. Ex:



          <template>
          <div class="map-root" lwc:dom="manual"></div>
          </template>


          and one last thing, dont forget your css file, if you dont add a component height, the component will load but will appear with a height of 0px:



          .map-root{
          height: 180px;
          }


          enter image description here
          Leaflet Documentation



          LWC Documentation - Access Elements the Component Owns







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited 3 hours ago

























          answered 4 hours ago









          gllsglls

          11.1k72150




          11.1k72150

























              0














              The other answer about using the css class instead of id is great . I will add few more things that could be cause for this.



              Check that the zip file you have for leaflet in the static resource is properly zipped and you are using the proper path .



              I downloaded from the site and uploaded to static resource and named the static resource as leaflet .



              I had to change the path as below



              renderedCallback() {
              if (this.leafletInitialized) {
              return;
              }
              this.leafletInitialized = true;

              Promise.all([
              loadScript(this, leaflet + '/leaflet.js'),
              loadStyle(this, leaflet + '/leaflet.css')
              ])
              .then(() => {
              this.initializeleaflet();
              })
              .catch(error => {
              console.log(error);
              this.dispatchEvent(
              new ShowToastEvent({
              title: 'Error loadingLeaflet',
              message: error,
              variant: 'error'
              })
              );
              });
              }


              Also to see the exceptions of promise reject just log the error that will tell you true error .



              Also just a thought what makes you use leaflet . There is a lightning-map lwc component provided by salesforce and why not just use it .






              share|improve this answer






























                0














                The other answer about using the css class instead of id is great . I will add few more things that could be cause for this.



                Check that the zip file you have for leaflet in the static resource is properly zipped and you are using the proper path .



                I downloaded from the site and uploaded to static resource and named the static resource as leaflet .



                I had to change the path as below



                renderedCallback() {
                if (this.leafletInitialized) {
                return;
                }
                this.leafletInitialized = true;

                Promise.all([
                loadScript(this, leaflet + '/leaflet.js'),
                loadStyle(this, leaflet + '/leaflet.css')
                ])
                .then(() => {
                this.initializeleaflet();
                })
                .catch(error => {
                console.log(error);
                this.dispatchEvent(
                new ShowToastEvent({
                title: 'Error loadingLeaflet',
                message: error,
                variant: 'error'
                })
                );
                });
                }


                Also to see the exceptions of promise reject just log the error that will tell you true error .



                Also just a thought what makes you use leaflet . There is a lightning-map lwc component provided by salesforce and why not just use it .






                share|improve this answer




























                  0












                  0








                  0







                  The other answer about using the css class instead of id is great . I will add few more things that could be cause for this.



                  Check that the zip file you have for leaflet in the static resource is properly zipped and you are using the proper path .



                  I downloaded from the site and uploaded to static resource and named the static resource as leaflet .



                  I had to change the path as below



                  renderedCallback() {
                  if (this.leafletInitialized) {
                  return;
                  }
                  this.leafletInitialized = true;

                  Promise.all([
                  loadScript(this, leaflet + '/leaflet.js'),
                  loadStyle(this, leaflet + '/leaflet.css')
                  ])
                  .then(() => {
                  this.initializeleaflet();
                  })
                  .catch(error => {
                  console.log(error);
                  this.dispatchEvent(
                  new ShowToastEvent({
                  title: 'Error loadingLeaflet',
                  message: error,
                  variant: 'error'
                  })
                  );
                  });
                  }


                  Also to see the exceptions of promise reject just log the error that will tell you true error .



                  Also just a thought what makes you use leaflet . There is a lightning-map lwc component provided by salesforce and why not just use it .






                  share|improve this answer















                  The other answer about using the css class instead of id is great . I will add few more things that could be cause for this.



                  Check that the zip file you have for leaflet in the static resource is properly zipped and you are using the proper path .



                  I downloaded from the site and uploaded to static resource and named the static resource as leaflet .



                  I had to change the path as below



                  renderedCallback() {
                  if (this.leafletInitialized) {
                  return;
                  }
                  this.leafletInitialized = true;

                  Promise.all([
                  loadScript(this, leaflet + '/leaflet.js'),
                  loadStyle(this, leaflet + '/leaflet.css')
                  ])
                  .then(() => {
                  this.initializeleaflet();
                  })
                  .catch(error => {
                  console.log(error);
                  this.dispatchEvent(
                  new ShowToastEvent({
                  title: 'Error loadingLeaflet',
                  message: error,
                  variant: 'error'
                  })
                  );
                  });
                  }


                  Also to see the exceptions of promise reject just log the error that will tell you true error .



                  Also just a thought what makes you use leaflet . There is a lightning-map lwc component provided by salesforce and why not just use it .







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited 2 hours ago

























                  answered 3 hours ago









                  Mohith ShrivastavaMohith Shrivastava

                  61.3k7102145




                  61.3k7102145






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Salesforce Stack Exchange!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f254214%2floading-the-leaflet-map-in-lightning-web-component%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      How to label and detect the document text images

                      Vallis Paradisi

                      Tabula Rosettana