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>
  • Are there any errors on the console from your browser's dev tools? – IvanSanchez Jun 26 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 at 12:49
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;
}
  • 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 at 8:24
  • forgot mistake ... that soved :!!!!!!! – yberges Jun 27 at 8:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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