Skip to content

Latest commit

 

History

History
44 lines (35 loc) · 1.91 KB

README.md

File metadata and controls

44 lines (35 loc) · 1.91 KB
Raw

Leaflet.IconMaterial

Just another shameless copy of Awesome-Markers, but this time with Material Icons icons and customizable fill and outline colors of the marker.

Leaflet.IconMaterial screenshot

Using the plugin

  1. Include Material Icons web font in your application. See Google's Guide to learn many ways of doing it. But most likely you will end up with something like that in the <head> of your HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  1. Next, include Leaflet.IconMaterial's JavaScript and CSS:
<link href="css/leaflet.icon-material.css" rel="stylesheet">
<script src="js/leaflet.icon-material.js"></script>

or

npm i leaflet-iconmaterial
  1. Create a Material icon and add it to your Leaflet map
  // Create a semi-transparent bus icon
  var busIcon = L.IconMaterial.icon({
    icon: 'directions_bus',            // Name of Material icon
    iconColor: '#aa2187',              // Material icon color (could be rgba, hex, html name...)
    markerColor: 'rgba(255,0,0,0.5)',  // Marker fill color
    outlineColor: 'yellow',            // Marker outline color
    outlineWidth: 1,                   // Marker outline width 
    iconSize: [31, 42]                 // Width and height of the icon
  })
  
  // Attach the icon to the marker and add to the map
  L.marker([41.76,-72.67], {icon: busIcon}).addTo(map)

Credits

  1. Shamelessly adapted from Leaflet.AwesomeMarkers by @lvoogdt - MIT License
  2. SVG and other magic by @wesleyvandevoorde from a never merged pull request
  3. Material Icons by Google - Apache-2.0 license.