How do I create a geoJSON layer with a div icon instead of the leaflet standard icon?

Question

I'm trying to load a geoJSON layer with div icons, since they are supposed to be more lightweight.

My problem is that I cannot get the divIcons to display. The geoJSON object is stored as individualPoints. I've tried styling the icon directly:

var myIcon = L.divIcon({className: 'my-div-icon'});

var geoJsonLayer = L.geoJson(individualPoints, {icon: myIcon});
map.addLayer(geoJsonLayer); //shows standard icon

and styling the icon on each layer:

var geoJsonLayer = L.geoJson(individualPoints, {
    onEachFeature: function (feature, layer) {
        layer.setIcon(myIcon);
    }
}); 
map.addLayer(geoJsonLayer); // nothing displays

and even creating an additional marker, and adding that to the map:

// create object to save markers
var markersID = [];

// exchanges latitude & longitude
function switchLatLong(oldLocation) {
    return new L.LatLng(oldLocation[1], oldLocation[0]);
}

var geoJsonLayer = L.geoJson(individualPoints, {
    onEachFeature: function (feature, layer) {
        // make a marker and add to map individually
        markersID[feature.properties.id] = L.marker(switchLatLong(feature.geometry.coordinates),{icon: myIcon});
        map.addLayer(markersID[feature.properties.id]); //nothing displays on map
    }
}); 

The first code snippet shows the standard leaflet icon; the second and third snippets do not display anything.

Question: How does one load a geoJson using divIcon?

---

Edit: Using the new keyword on the second and third snippets displays the divIcon, but this doesn't work in the first code snippet. Also, I would still like to have the divIcon appear without iterating through the layers to generate a new marker. Also, why must the new keyword be used?

var geoJsonLayer = L.geoJson(individualPoints, {
    onEachFeature: function (feature, layer) {
        // set icon to a new DivIcon
        layer.setIcon(new L.DivIcon());
    }
}); 
map.addLayer(geoJsonLayer); // divIcon displays on map

Answer 1

Since you want to Set a DivIcon, you should know that it can be applied only to Markers.

The GeoJSON docs Say:

Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a pointToLayer function in a GeoJSON options object when creating the GeoJSON layer. This function is passed a LatLng and should return an instance of ILayer, in this case likely a Marker or CircleMarker.

You can use the following code to set your custom div icon, like this

    var myIcon = L.divIcon({ 
        iconSize: new L.Point(25, 25), 
        className: 'my-div-icon'
    });

    var geoJsonLayer = L.geoJson(individualPoints, {
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {icon: myIcon});
            }
        }).addTo(map);

Answer 2

I'm going to add this as an answer, because it works. I'm still interested in finding out why I seem to need to create a new DivIcon each time, or if there's a more straightforward way to do this...

var geoJsonLayer = L.geoJson(individualPoints, {
    onEachFeature: function (feature, layer) {
        // set icon to a new DivIcon
        layer.setIcon(new L.DivIcon());
    }
}); 
map.addLayer(geoJsonLayer); // divIcon displays on map