npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@luomus/leaflet.vector-markers

v0.0.6

Published

Vector SVG markers for Leaflet, with an option for Font Awesome/Twitter Bootstrap icons.

Downloads

57

Readme

Leaflet.vector-markers

Vector SVG markers for Leaflet, with an option for Font Awesome/Twitter Bootstrap/Maki icons.

Thanks to https://github.com/lvoogdt for https://github.com/lvoogdt/Leaflet.awesome-markers.

Version 0.0.6 of Leaflet.vector-markers is tested with:

  • Bootstrap 3
  • Font Awesome 4.3
  • Leaflet 0.7.7
  • Maki icon 0.4.2

Example

Please have a look at the examples or check out this example: http://codepen.io/anon/pen/Jdayb.

Twitter Bootstrap/Font-Awesome icons

This plugin depends on either Bootstrap or Font-Awesome for the rendering of the icons. See these urls for more information:

For Font-Awesome

  • http://fortawesome.github.com/Font-Awesome/
  • http://fortawesome.github.com/Font-Awesome/#integration

For Twitter bootstrap:

  • http://getbootstrap.com

For Maki icons:

  • https://www.mapbox.com/maki/

Using the plugin

    1. First, follow the steps for including Font-Awesome or Twitter bootstrap into your application.

For Font-Awesome, steps are located here:

http://fortawesome.github.io/Font-Awesome/get-started/

For Twitter bootstrap, steps are here:

http://getbootstrap.com/getting-started/

    1. Next, copy the leaflet-vector-markers.css, and leaflet-vector-markers.js from dist/ to your project and include them:
<link rel="stylesheet" href="css/leaflet-vector-markers.css">
<script src="js/leaflet-vector-markers.js"></script>
    1. Now use the plugin to create a marker like this:
  // Creates a red marker with the coffee icon
  var redMarker = L.VectorMarkers.icon({
    icon: 'coffee',
    markerColor: 'red'
  });

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

Or for Maki icons

  // Creates a red marker with the bus icon
  var redMarker = L.VectorMarkers.icon({
    icon: 'bus',
    prefix: '',
    extraClasses: 'maki-icon',
    markerColor: 'red'
  });

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

Properties

| Property | Description | Default Value | Possible values | | --------------- | ---------------------- | ------------- | ---------------------------------------------------- | | icon | Name of the icon | 'home' | See glyphicons or font-awesome | | prefix | Select de icon library | 'fa' | 'fa' for font-awesome or 'glyphicon' for bootstrap 3 | | markerColor | Color of the marker | 'blue' | Any HEX color you can find | | iconColor | Color of the icon | 'white' | 'white', 'black' or css code (hex, rgba etc) | | opacity | Opacity of the marker | 1 | Float between 0.0 and 1.0 | | spin | Make the icon spin | false | true or false. Font-awesome required | | extraClasses | Additional classes in the created tag | '' | 'fa-rotate90 myclass' eller other custom configuration |

Supported icons

The 'icon' property supports these strings:

  • 'home'
  • 'glass'
  • 'flag'
  • 'star'
  • 'bookmark'
  • .... and many more, see: http://fortawesome.github.io/Font-Awesome/icons/
  • Or: http://getbootstrap.com/components/#glyphicons

Todo

  • SVG shadows
  • Adding more shapes
  • Support for custom SVG

License

  • Leaflet.VectorMarkers and colored markers are licensed under the MIT License - http://opensource.org/licenses/mit-license.html.
  • Font Awesome: http://fortawesome.github.io/Font-Awesome/license/
  • Twitter Bootstrap: http://getbootstrap.com/

Contact

  • Website: http://www.hiasinho.com