1

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>
2
  • Are there any errors on the console from your browser's dev tools? Jun 26, 2019 at 8:50
  • the console say Uncaught SyntaxError: Unexpected identifier L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', { // Datas sources attribution: 'OPENSTREETMAP_ATTRIBUTION_TXT',<= here but realy here i this
    – yberges
    Jun 26, 2019 at 12:49

1 Answer 1

0

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;
}
2
  • hello thanks for return ! if use your code its realy better but i didn't have icons i have this error house.html?start=10:742 Uncaught TypeError: Cannot read property '3' of undefined at fc_MapMod_initialize_129 (house.html?start=10:742) at house.html?start=10:770
    – yberges
    Jun 27, 2019 at 8:24
  • forgot mistake ... that soved :!!!!!!!
    – yberges
    Jun 27, 2019 at 8:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.