lennardv2 / leaflet.awesome-markers Goto Github PK

Would be great, if these markers could be printable, too, like leaflet default markers are.

For example printing http://jsfiddle.net/VPzu4/92

will result in

Hi, your work is awesome.

I would like to know, can we use icons provided by foundation framework ?

Because I am using foundation framework for my project rather than Bootstrap. If yes then please elaborate it.
Thank you in advance. Help would be more appreciated.

Bootstrap 3

took me quite a while to figure out what in my minified stack was breaking. it was because there is no trailing ; in the minified file.

the non-minified one does have it

thanks !

It would be very handy to have npm support for this repo.

https://www.npmjs.org/

The readme here seems a bit confusing. At one point you say the supported colors are:

'red'
'darkred'
'orange'
'green'
'darkgreen'
'blue'
'darkblue'
'purple'
'darkpurple'
'cadetblue'

Then just below that, you say the only icon colors you can have are:

white
black

So which one is it? It seems that by testing it out it appears to be white and black.

If that's supposed to be the only colors supported by Font-Awesome, maybe that should be a sub-category while the other colors are Twitter-bootstrap, they should be a subcategory of that. Or if that is supposed to be the only colors supported by spinning icons, it should be indented below that. It's kind of confusing the way it is. Also, your example has:

icon: 'red'

but upon using that code, the icons appear to be limited to black and white. So it doesn't seem like black and white are limited to just spinning icons, but all icons.

And one more thing, you should also put under the Using the plugin part at the top, "make sure to include font-awesome.css in your html, downloaded from.... I know you said "This plugin depends on Bootstrap or Font-Awesome for the rendering of the icons.", but it makes sense to have a clear section that tells people everything they need to do to get it working right in front of them, rather than split up among sections.

Just my 2c

Other than that, cool plugin!

Hello,

thanks for this plugin, it is really awesome (as its name says it !). I wonder if there is a way to get the raw images files for the map markers so that we can add our own colors.

It seems that you can only click on the marker in an area outside of the icon to bind the popup. This only happens in leaflet.master version.
Here's a JSFIddle:
http://jsfiddle.net/pufanalexandru/am454ygc/1/

Hey, maintainer(s) of lvoogdt/Leaflet.awesome-markers!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library lvoogdt/Leaflet.awesome-markers is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "lvoogdt/Leaflet.awesome-markers",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hi, When I try to embed font awesome icons, most of it is not appearing.
For eg., These are some of the icons which doesn't appear.
Street-view
Hotel
Dot-circle-o
Circle-thin
Cicle
Bullseye
Car
Flag
Could you please help me.
Example Link: http://jsfiddle.net/VPzu4/520/

This is the object added. {icon: 'street-view', markerColor: 'red', prefix: 'fa', spin:true}

Hello,

I need an action when I click on a marker but I have that error :
TypeError: listeners[i].action is undefined

This is my code :

var mark1 = L.marker([45.21996,6.22247], {icon: L.AwesomeMarkers.icon({icon: 'glass', prefix: 'fa', markerColor: 'red'}) });
        mark1.addTo(map).bindPopup("<b>You're here</b>");
        var mark2 = L.marker([45.21763,6.21749], {icon: L.AwesomeMarkers.icon({icon: 'glass', prefix: 'fa', markerColor: 'gray'}) });
        mark2.addTo(map).bindPopup("<b>You're not here</b>");

function onMarkerClick(text) {
        			alert('test '+text);
        		}

        mark1.on('click', onMarkerClick('abc'));
        mark2.on('click', onMarkerClick('efg'));

Could you help me please ?

When I use this control with the locatecontrol, i find that the awesome icons themselves aren't shown (seem to be hidden)

This issue was reported some time ago on the locatecontrol by another user, but no response was given. Not sure if it's an issue with this, or the other control!

domoritz/leaflet-locatecontrol#69

Thanks so much for your great work!

I think it is a nice project, but it seems abandoned... :(

I hope it will continue!

github doesnt allow script requests from external sources any more, as a result the jsfiddle is broken.

I just tried it, and didn't work..

I would like to pull request, maybe in a near future :)

I would like to use the font-awesome icons, which supply a special class 'fa-lg' to get 33% bigger icons. Unfortunately this doesn't work, because the css of awesome-markers overwrites the font-size afterwards with a statical value:

https://github.com/lvoogdt/Leaflet.awesome-markers/blob/af0bfc870cae53eb0bd18b84849fe65998e33667/dist/leaflet.awesome-markers.css#L42

Would you please consider to make the font-size adjustable? font-awesome icons seems to be a bit smaller and I would like to tune that a little bit.

Hi,
First of all: thank you for the awesome plugin!

In the CSS file, the background-position for white marker is off by 2 pixels:
.awesome-marker-icon-white {
background-position: -574px 0;
}
Should be instead:
.awesome-marker-icon-white {
background-position: -576px 0;
}

Interestingly, the background-position for the black marker is also off by 2 pixels compared to the 36 pixels step, but it renders fine. So it is probably misplaced in the sprite image, and the background-position corrects this difference.

Great plugin! It'd be great if you could choose custom colors via hexcode etc for the markerColor option.

Hi, great plugin, thanks for your work !

Just thought i'd notify you that the list of possible colors is not up to date :
"white", "black", "gray" work, but are not in the documentation.

I think other colors might be forgotten, I haven't tried all the possibilities ;)

Kind regards.

Just as the icon has the option to supply hex value I'd like to have the option to set icon color by hex value.

I noticed that too many mouseout and mouseover events were triggered on Awesome markers, especially while moving the mouse on top of them.

Steps to reproduce:

• Setup .on('mouseover', function (){console.log('over')}).on('mouseout', function () {console.log('out')})
• Move the mouse over the marker and notice the gust !

Basic markers do not behave this way.

It seems as though there's a version mismatch with your bower.json file. When bower tries to install Leaflet.awesome-markers as a dependency to angular-leaflet, I get the following error:

mismatch Version declared in the json (2.0.0) is different than the resolved one (2.0.1)

Calling "bower info Leaflet.awesome-markers" tells me that version 2.0.1 should be available, and in fact the output of "bower info" shows a bower.json printout with version 2.0.1, but your current bower.json file marks the version as 2.0.0. I don't know if its as simple as changing the version number, but I'd appreciate a fix.

After changing a marker's icon using this.setIcon() in an event handler function bound using marker.on() clicking and dragging the marker results in an error. Changing he icon outside of the handler works just fine and does not affect clicking or dragging.

Hello all!
It looks like this maintainer lost interest in the project?

We are willing to take it forward.

@lvoogdt hi?

(disclaimer: I'm not a JS programmer, I generally work with C/C++, Python, Pascal)
my understanding is that when you create a marker and you add it to a map, an icon is created and put in the DOM. I am building a user interface (http://gardens.ghini.me / http://github.com/Ghini/ghini.web) that would let the user select items on the map and I want to highlight their selection. I am thinking of achieving this by the element id and a jquery selector. my element id comes from a database.
is there a deeper reasoning behind the fact that we cannot do this?

this does not work:

    var marker = L.marker([item.lat, item.lon],
                          item);
    marker.addTo(l).bindPopup(models[g].text.formatU(item),
                              {marker: marker});
    var marker_id = generate_guid(item._id);
    marker._icon.id = marker_id;

because the _icon property of the marker is not immediately available.

Hello,

font awesome has a map marker , I think it could be used instead of the image sprite, allowing any color

I can do it if you want.
Regards

// Creates a red marker with the coffee icon
var redMarker = L.AwesomeMarkers.icon({
icon: 'coffee',
markerColor: 'red'
});

L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);

need to add prefix: 'fa'

I have something like:

   var trafficCamIcon = L.AwesomeMarkers.icon({
       icon:  'coffee',
   }); 
   ...
  var marker = L.marker( [lat, lng],
                     {  icon: trafficCamIcon, keyboard: false, riseOnHover: true, })
                     .addTo(map);

The markers show up, but no icons, and no errors that I can see in the console.

Verified in latest non-beta firefox and chrome.

Also tried using provided basic-example.html with same behavior.

An online demo would be a nice addition instead of just a screenshot.

Awesome project btw!

Hey there,
would it be possible to use the map-icons (http://map-icons.com/) in conjunction with awesome-markers?
In case not, what would need to be done?

Cheers,
Daniel

Hi all,
this is an awesome plugin.
but i want to change the marker size by multiply 1.5,2.0,3.5 ....
how could i implement this function?

Regards

In 2x version of «soft» marker style ([email protected]), green-colored marker has outer shadow.

It doesn't have shadow in small-sized icons (markers-soft.png).

All other markers (with other colors) in «soft» style do not have shadows (except for the light-green marker, that is an altered copy of the green marker).

Readme/Documentation lists a marker color option as "darkpuple" instead of "darkpurple" under section "Properties"->"iconColor"

I modify the JSFiddle to use the latest version of Leaflet and it stopped working

in js file line 31, the L.setOptions shortcut doesn't work:
options = L.Util.setOptions(this, options);

would you mind register the project in bower? That will make it a lot easier for us to manage dependency :)

I'm using brunch with chaplin and your plugin looks for the images folder inside the stylesheets sub-folder (because that is where the css files are). Changing the css file to use /images/markers... instead of images/markers... fixed it.

Thank you for the project, it is working quite well.

There is a conspicuous lack of a yellow icon, one of the basic colors, while all of the others are represented.

do you support the ion icons with an android prefix? I cannot get them to work. "Default" ion icons work without issue, e.g. ion-person, I only have a problem when I try to use ones with an android prefix, e.g. ion-android-walk. thanks

Hello,

The new version of FontAwesome 4.3.0 icons are not working. The icons that were in version 4.0 are working fine but the new icons are just showing a box.

Is it possible to use this plugin with Require JS, if so how and maybe it should be documented. Otherwise, why not?

Hi,

I needed some custom html text inside the marker, so I made this small change.

-Olli

diff.txt

Are you able to make available the source files for the PNG icon sprites?

Perhaps you have an SVG version? Currently it is very hard to add new colours.

Is there documentation for the hex or rgb color codes for the markers? For example, It would be great to know what color "darkred" is.

There is a 2x version for all marker styles, except «plain».

When using awesome-markers, popups don't work right for me anymore.
The popups do appear when clicking a marker, but will not disappear when clicking the popup close-button or clicking outside the popup callout.

Seems strange but I'm afraid it's real:

The 'leaflet.awesome-markers.min.js' file in version "2.0.1" just does not extend the 'extraClasses' option.

Thank you for the markers. They look great.

Is the plugin compatible with the latest version of Leaflet (0.7.1)? I tried to use it myself and got some strange results.

I also forked the JSFiddle and updated to Leaflet 0.7.1. Here the markers do not display at all. I did not update the javascript code as I could not spot any differences in the API here.

You currently have icons for iPhone devices, but Android has higher screen resolutions.

Apple retina ~= Android XHDPI

So you are missing sprite sets for XXHDPI on android devices. I could help create those sprites but that requires access to the raw images you used for your sprites. Hopefully they are SVG such that we can create the correct size sprites without have to scale the existing png up.

Relates to #16

Any plan on supporting new google material design icons?
https://www.google.com/design/icons/