Custom icon with Leaflet

Question

I'm trying to add custom icon in Leaflet, but it doesn't show on map.

This is my code:

<script type="text/javascript">

        function fc_MapMod_initialize_99()
        {
            var locations = [ ['<h4 class="fleximaptitle">[copy] test feature</h4><p>Marseille, France</p> <p class=\"link\"><a href=\"/flexi-dev/index.php?option=com_flexicontent&amp;view=item&amp;cid=8&amp;id=11&amp;Itemid=126\" target=\"\">FLEXI_GOOGLEMAP_READMORE_TXT</a></p> <div class="directions"><a href="https://maps.google.com/?q=Marseille,+France&ftid=0x12c9bf4344da5333:0x40819a5fd970220" target="_blank" class="direction">FLEXI_GOOGLEMAP_DIRECTIONNAME_TXT</a></div>',43.296482,5.36978,'http://localhost/flexi-dev/\images/icons-map/army.png']
,['<h4 class="fleximaptitle">[copy] test feature</h4><p>Paris, France</p> <p class=\"link\"><a href=\"/flexi-dev/index.php?option=com_flexicontent&amp;view=item&amp;cid=8&amp;id=12&amp;Itemid=126\" target=\"\">FLEXI_GOOGLEMAP_READMORE_TXT</a></p> <div class="directions"><a href="https://maps.google.com/?q=Paris,+France&ftid=0x47e66e1f06e2b70f:0x40b82c3688c9460" target="_blank" class="direction">FLEXI_GOOGLEMAP_DIRECTIONNAME_TXT</a></div>',48.856614,2.3522219,'http://localhost/flexi-dev/\images/icons-map/accesdenied.png']
,['<h4 class="fleximaptitle">NY test feature</h4><p>New York, État de New York, États-Unis</p> <p class=\"link\"><a href=\"/flexi-dev/index.php?option=com_flexicontent&amp;view=item&amp;cid=8&amp;id=13&amp;Itemid=126\" target=\"\">FLEXI_GOOGLEMAP_READMORE_TXT</a></p> <div class="directions"><a href="https://maps.google.com/?q=New+York,+%C3%89tat+de+New+York,+%C3%89tats-Unis&ftid=0x89c24fa5d33f083b:0xc80b8f06e177fe62" target="_blank" class="direction">FLEXI_GOOGLEMAP_DIRECTIONNAME_TXT</a></div>',40.7127753,-74.0059728,'http://localhost/flexi-dev/\images/icons-map/air_fixwing.png']
,['<h4 class="fleximaptitle">test feature</h4><p>82 Rue de Fenouillet, 31200 Toulouse, France</p> <p class=\"link\"><a href=\"/flexi-dev/index.php?option=com_flexicontent&amp;view=item&amp;cid=8&amp;id=3&amp;Itemid=126\" target=\"\">FLEXI_GOOGLEMAP_READMORE_TXT</a></p> <div class="directions"><a href="https://maps.google.com/?q=82+Rue+de+Fenouillet,+31200+Toulouse,+France&ftid=0x12aea4ca3e8f6c0b:0x26677de5987f1b9a" target="_blank" class="direction">FLEXI_GOOGLEMAP_DIRECTIONNAME_TXT</a></div>',43.6320424,1.4229078,'http://localhost/flexi-dev/\images/banners/osmbanner1.png']
,['<h4 class="fleximaptitle">tokyo [copy] test feature</h4><p>Tokyo, Japon</p> <p class=\"link\"><a href=\"/flexi-dev/index.php?option=com_flexicontent&amp;view=item&amp;cid=8&amp;id=10&amp;Itemid=126\" target=\"\">FLEXI_GOOGLEMAP_READMORE_TXT</a></p> <div class="directions"><a href="https://maps.google.com/?q=Tokyo,+Japon&ftid=0x60188b857628235d:0xcdd8aef709a2b520" target="_blank" class="direction">FLEXI_GOOGLEMAP_DIRECTIONNAME_TXT</a></div>',35.6803997,139.7690174,'http://localhost/flexi-dev/\images/icons-map/bats.png']
  ];

            var markerClusters;
            var markers = [];

            var lat = 48.852969;
            var lon = 2.349903;

            theMap_99 = L.map('fc_module_map_99').setView([lat, lon], 11);
            markerClusters = L.markerClusterGroup({ disableClusteringAtZoom: 15,removeOutsideVisibleBounds:true,animate:true, maxClusterRadius :50 });          // Title display
            L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
            {
                // Datas sources
                attribution: 'OPENSTREETMAP_ATTRIBUTION_TXT',
                minZoom: 1,
                maxZoom: 15         })
            .addTo(theMap_99);

            var customMarkerIcons = [];
            var iconCounter = 0;

            customMarkerIcons[0] = L.icon({
                iconUrl: 'https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png?text=A&psize=16&font=fonts/arialuni_t.ttf&color=ff330000&scale=1&ax=44&ay=48',
                iconSize: [40, 67],
                iconAnchor: [25, 67],
                popupAnchor: [-3, -67]
            });

            for (var i = 0; i < locations.length; i++)
            {

                marker = new L.marker(
                    [locations[i][1],
                    locations[i][2]]
                    ,{icon:locations[i][3]}             )
                    .bindPopup(locations[i][0])

                markerClusters.addLayer(marker);                markers.push(marker);

                // We only have a limited number of possible icon colors, so rewind icon index when icons finish
                iconCounter = iconCounter >= customMarkerIcons.length ? 0 : iconCounter + 1;
            }
            var group = new L.featureGroup(markers);

            theMap_99.addLayer(markerClusters);
            theMap_99.fitBounds(group.getBounds().pad(0.5));
        }

        // Initialize the Map
        fc_MapMod_initialize_99();
    </script>

Answer 1

You have error in specifying icon when creating marker. Insted of icon object you are giving iconUrl.

First you have create the icon and then use it in marker creation. It should look something like this:

for (var i = 0; i < locations.length; i++) {
  customMarkerIcon = L.icon({
      iconUrl: locations[i][3],
      iconSize: [40, 67],
      iconAnchor: [25, 67],
      popupAnchor: [-3, -67]
  });

  marker = new L.marker(
      [locations[i][1],
      locations[i][2]]
      ,{icon: customMarkerIcon})
      .bindPopup(locations[i][0])

  markerClusters.addLayer(marker);
  markers.push(marker);

  iconCounter = iconCounter >= customMarkerIcons.length ? 0 : iconCounter + 1;
}