CODEWITHSUNDEEP
ionic-frameworkleaflet
Martin I
Martin I

Reputation: 45

How to use leaflet in ionic 4 (Adding markers to the map)

I am trying to use leaflet leaflet in ionic. I imported leaflet like this: import leaflet from 'leaflet';

To build the map I wrote this: 

  loadmap() {
setTimeout(() => {
  this.map = new leaflet.Map('map').setView([this.lat, this.lng], this.zoomLevel);
  leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     // tslint:disable-next-line
    attribution: 'Map data &copy; <a '
  + 'href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a '
  + 'href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery '
  + '© <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18
  }).addTo(this.map);

}, 50);

} This works just fine. The next thing I want to do is to add markers to the map like this: leaflet.L.marker([this.lat, this.lng]).addTo(this.map).bindPopup('Hello!');

This however does not work, I get the following error message

ERROR TypeError: Cannot read property 'marker' of undefined

How can adress 'L', I have already tried some differnt ways, but with no sucess. Any suggestions?

Best regards!

Upvotes: 1

Views: 1213

Answers (1)

ghybs
ghybs

Reputation: 53185

Just modify your import: import L from 'leaflet'

Then the rest of your code becomes like the documentation, i.e. L.map(), L.tileLayer(), L.marker(), etc.

Otherwise, if you keep your current import syntax, simply replace the L namespace from the documentation by your default import, i.e. "leaflet" in your case: leaflet.map(), leaflet.tileLayer(), leaflet.marker(), etc.

Upvotes: 2

Related Questions