Leaflet Custom Marker

Use a custom marker graphic 'marker-icon-red.png'. Here we extend the Default marker class, keeping the same shadow properties etc

<html>
<head>
   <title>Leaflet Custom Marker Example</title>
   
   <link rel="stylesheet" href="leaflet/leaflet.css" />
   
   
   <script src="leaflet/leaflet.js"></script>
   
   <script language="javascript">
      function init() {
         var map = new L.Map('map');                       
                 
      	 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
            maxZoom: 18
         }).addTo(map);
         map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.

var london = new L.LatLng(51.505, -0.09); 
         map.setView(london, 13);
         
         var markerLocation = new L.LatLng(51.5, -0.09);

//Extend the Default marker class
         var RedIcon = L.Icon.Default.extend({
            options: {
            	    iconUrl: 'marker-icon-red.png' 
            }
         });
         var redIcon = new RedIcon();
         
        /*
        //Other things we could have changed
            iconSize:     [25, 41], // size of the icon
            shadowSize:   [50, 64], // size of the shadow
            iconAnchor:   [12, 41]  // point of the icon which will correspond to marker's location
            shadowAnchor: [4, 62],  // the same for the shadow
            popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
        */
        
         
         L.marker(markerLocation, {icon: redIcon}).addTo(map);
                           
      }
   </script>
   
</head>
<body onLoad="javascript:init();">
   <div id="map" style="height: 200px"></div>
   
   
</body>                                                                                                                          
</html>

view directly

Home
Blog
About
Maps
Other
Contact

Harry Wood

Leaflet Custom Marker