CODEWITHSUNDEEP
javascriptleafletfont-awesome
Akin_Glen
Akin_Glen

Reputation: 767

Leaflet Awesome Markers - Balloons not showing

This is actually rather strange.

I'm new to this library, so I don't know if anything has changed and the tutorial is outdated.

When I do this:

L.marker([51.344853, 0.098877]).addTo(mymap);

The default blue balloon marker shows.

If I do this:

var redMarker = L.AwesomeMarkers.icon({
        icon: 'coffee',
        iconColor: 'black',
        prefix: 'fa',
        markerColor: 'red'
});
L.marker([51.344853, 0.098877], {icon: redMarker}).addTo(mymap);

I expect a red balloon to show, along with a coffee icon. But what I'm getting is the coffee icon alone and no balloon.

Please, is there something else I'm supposed to be setting?

Thanks!

Upvotes: 0

Views: 1864

Answers (1)

deevee
deevee

Reputation: 1855

I'm guessing you forgot to attach some dependencies. Did you remember to add links to font-awesome and Leaflet.awesome-markers css and js files?

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>

Please check out the working pen example:

https://codepen.io/dagmara223/pen/BpqdZm

Upvotes: 2

Related Questions