Leaflet pointToLayer: having trouble generating custom icons

Question

I've been liking Leaflet so far but have run into a snag. I can't get it to produce custom icons based on an attribute. Instead I get the default blue points. I've looked at several similar postings on the web but none have helped in resolving this problem. I have five hurricane icons indicating strength, and I have a switch statement in my pointToLayer function that selects the appropriate icon. In the debugger I can verify that throughout the execution of pointToLayer, all variables are defined and look reasonable. The version of Leaflet is 1.2.0. Here is my code:

    $scope.addTrackMap = function() {
      let storm_id = $scope.selected_storm.toLowerCase();

      url = '/geoserver/proxy.cfm?service=wfs&version=2.11.2&request=GetFeature&typeNames=hurricane:hurricane_point&PROPERTYNAME=(point,strength)&CQL_FILTER=storm_id=%27'+storm_id+'%27%20and%20is_prediction=false&outputFormat=JSON'

      let WeatherIcon = L.Icon.extend({
          options: {
            iconSize:     [17, 17], // size of the icon
            iconAnchor:   [8, 8],   // point of the icon which will correspond to marker's location
            popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
          }
      });

      let hurricaneIcon = new WeatherIcon({iconUrl: 'img/hurricane.png'});
      let stormIcon = new WeatherIcon({iconUrl: 'img/storm.png'});
      let depressionIcon = new WeatherIcon({iconUrl: 'img/depression.png'});
      let prestormIcon = new WeatherIcon({iconUrl: 'img/prestorm.png'});
      let poststormIcon = new WeatherIcon({iconUrl: 'img/poststorm.png'});

      $http.get(url)
      .then(function(response) {
        let gjTrack = response.data;

        let track = L.geoJSON(gjTrack, {
          pointToLayer: function(feature, LatLng) {
            var icon;
            switch (feature.properties.strength) {
              case 's': icon = stormIcon; break;
              case 'x': icon = prestormIcon; break;
              case 'm': icon = hurricaneIcon; break;
              case 'h': icon = hurricaneIcon; break;
              case 'd': icon = depressionIcon; break;
              case 'i': icon = poststormIcon; break;
            }
            return L.marker(LatLng, icon);
          }
        }).addTo($scope.G.map); 
        $scope.G.tracks.push(track);
        L.marker([29.8, -95.4], {icon: stormIcon}).addTo($scope.G.map);
        L.marker([29.9, -95.4], {icon: prestormIcon}).addTo($scope.G.map);
        L.marker([29.9, -95.3], {icon: poststormIcon}).addTo($scope.G.map);
        L.marker([30.0, -95.3], {icon: hurricaneIcon}).addTo($scope.G.map);
        L.marker([30.0, -95.2], {icon: depressionIcon}).addTo($scope.G.map);
      });
    }

I am running this in combination with AngularJS hence the $scope references. At the end I've added some debugging to verify that each of my icons are correctly formed. The L.marker's are showing each icon properly.

Answer 1

As always, the answer was blindingly obvious in retrospect ;)

It came down to a simple syntax error: the marker declaration in the pointToLayer function return L.marker(LatLng, icon); should be return L.marker(LatLng, {icon: icon});

http://jsfiddle.net/slead/n733p7bs/14/