Leaflet awesome markers support

[zolotyx]

Leaflet awesome markers do not work, even in given example.
http://tombatossals.github.io/angular-leaflet-directive/examples/markers-update-example.html

In this example many other features do not work (popup message, draggable can not be turned off)

[tombatossals]

Hi, you're right, that old example is not working as expected.

I will solve that in a few days, it will not be a harder one, but I would like to restyle the example.

Thanks for reporting

[tombatossals]

I finally managed to solve this, it was an easy one. I have reworked the example to make it working again, you can see the new version here:

http://tombatossals.github.io/angular-leaflet-directive/examples/markers-update-example.html

About the AwesomeMarkers management, I have to document this a little but now you must declare an icon as an AwesomeMarker like this:

$scope.markers.first = {
    lat: 51.505,
    lng: -0.09,
    focus: true,
    draggable: false,
    message: "Hi there!",
    icon: {
        type: "awesomeMarker",
        icon: "cofee",
        markerColor: "red"
    }
}

[zolotyx]

Thank You for solving this issue, but i found that icon of awesome marker does not display (may be I'm doing something wrong) and changing marker message to ""(empty) work some kind of buggy in Your example.

[mchambaud]

@zolotyx the demo uses icon cofee which is invalid. I tried with other ones and it works fine.

[tombatossals]

Hi, I have updated the demo, now it works better:

http://tombatossals.github.io/angular-leaflet-directive/examples/markers-update-example.html

[rriemann]

I spend quite a view time to find this thread. Would you please add the example above to the examples page http://tombatossals.github.io/angular-leaflet-directive/#!/examples/simple-map ?

[kpennell]

@tombatossals Is there a way to use Awesome markers while using geojson to bring the markers in? I don't see anyway to style the icons when they come via geojson.

[kpennell]

Probably a bit too late but I recently released this to help people use geojson and font awesome markers together. Hope it helps.

[nweis]

We still have an issue displaying font-awesome icons. It seems to me that the className and prefix is not set by the icon type in the angular-leaflet-directive. I've modified leaflet.awesome-markes.js to use 'fa' as default prefix instead of 'glyphicon' to make it work.

[kpennell]

@nweis Can you please share how you did this? I'm getting a class not found error and pretty sure it's tied to this.

[nweis]

Sure - I've modified leaflet.awesome-markers.js as follows:

L.AwesomeMarkers.Icon = L.Icon.extend({
    options: {
        iconSize: [35, 45],
        iconAnchor: [17, 42],
        popupAnchor: [1, -32],
        shadowAnchor: [10, 12],
        shadowSize: [36, 16],
        className: 'awesome-marker',
        prefix: 'fa', // changed from 'glyphicon' to 'fa' by nweis
        spinClass: 'fa-spin',
        extraClasses: '',
        icon: 'home',
        markerColor: 'blue',
        iconColor: 'white'
    },

[kpennell]

Thanks!

On Thu, Mar 19, 2015 at 7:16 AM, nweis [email protected] wrote:

Sure - I've modified leaflet.awesome-markers.js as follows:

L.AwesomeMarkers.Icon = L.Icon.extend({
options: {
iconSize: [35, 45],
iconAnchor: [17, 42],
popupAnchor: [1, -32],
shadowAnchor: [10, 12],
shadowSize: [36, 16],
className: 'awesome-marker',
prefix: 'fa', // changed from 'glyphicon' to 'fa' by nweis
spinClass: 'fa-spin',
extraClasses: '',
icon: 'home',
markerColor: 'blue',
iconColor: 'white'
},

—
Reply to this email directly or view it on GitHub
#258 (comment)
.

[nweis]

Glad to help. :)

[orenww]

Which color format should I use?
I try to set the value "#00ff00" and it doesn't work
but when I set the value "green" it work well.

I get the color value from the server and I don't have the color name so I can't to set the color.
any solution?

let marker = {
lat: lat,
lng:lon,
message:msg,
icon: {
type: 'awesomeMarker',
prefix:'fa',
icon: iconName,
markerColor: iconColor
}
}

[tombatossals]

Take a look at the new icons example:
http://tombatossals.github.io/angular-leaflet-directive/examples/0503-markers-icons-example.html

[fdlk]

@tombatossals I think you need to add the prefix fa or else it'll depend on and use bootstrap glyphicons.

[axelgunn]

I'm having difficulties resizing the marker. This is the code I have. Any idea.. someone
var map = L.map('map',
{
crs: customCRS,
zoomSnap: 0,
zoomDelta: 0.5,
wheelPxPerZoomLevel: 100
}),
realtime = L.realtime(undefined, {
//getFeatureId: function (f) { return f.properties.id; },
start: false,
pointToLayer: function (feature, latlng) {
var smallIcon = new L.AwesomeMarkers.Icon({
icon: feature.properties.icon,
prefix: "fa",
markerColor: feature.properties.color
});
return L.marker(latlng,
{
icon: smallIcon
});
},
onEachFeature: onEachFeature
}).addTo(map);