Name: Leaflet.vector-markers
Owner: looker
Description: Vector SVG markers for Leaflet, with an option for Font Awesome/Twitter Bootstrap/Maki icons.
Forked from: hiasinho/Leaflet.vector-markers
Created: 2016-12-19 16:00:30.0
Updated: 2016-12-19 16:00:33.0
Pushed: 2017-01-09 21:28:38.0
Size: 69
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
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:
Please have a look at the examples or check out this example: http://codepen.io/anon/pen/Jdayb.
This plugin depends on either Bootstrap or Font-Awesome for the rendering of the icons. See these urls for more information:
For Font-Awesome
For Twitter bootstrap:
For Maki icons:
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/
2) Next, copy the leaflet-vector-markers.css, and leaflet-vector-markers.js from dist/ to your project and include them:
k rel="stylesheet" href="css/leaflet-vector-markers.css">
ipt src="js/leaflet-vector-markers.js"></script>
3) Now use the plugin to create a marker like this:
reates a red marker with the coffee icon
redMarker = L.VectorMarkers.icon({
: 'coffee',
erColor: 'red'
rker([48.15491,11.54183], {icon: redMarker}).addTo(map);
Or for Maki icons
Creates a red marker with the bus icon
r redMarker = L.VectorMarkers.icon({
icon: 'bus',
prefix: '',
extraClasses: 'maki-icon',
markerColor: 'red'
;
marker([48.15491,11.54183], {icon: redMarker}).addTo(map);
| 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) | | 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 |
The 'icon' property supports these strings: