Custom Markers on Leaflet Not Loading

Question

In leaflet we were trying to load in custom markers for a geoJSON point file. When using the default markers the layer is loaded in perfectly fine, other than it taking a long time to load. However when we try to change the markers to a customized marker using the pointToLayer function the whole layer seems to disappear. Here is the code for the specific customized marker:

 var manholeMarkerOptions = {
            radius : 8,
            fillColor : "#ff7800",
            color : "#000",
            weight : 1,
            opacity : 1
        };

        //Creates a variable to grab GeoJSON from GitHub repository and calls the popUpmanholes function to occur on each click.
        var manholes = new L.GeoJSON.AJAX('https://cdn.rawgit.com/alecia-patton/LeafletTest/master/manholes.geojson', {
            onEachFeature : popUpmanholes,
            pointToLayer : function(feature, latlng) {
                return new L.circleMarker(latlng, manholeMarkerOption);
            }
        });

And here is a link to the GITHub:

https://github.com/SamBFry/Leaflet-Tests/blob/master/leafletTestIndex.html

The only reason we are using GITHub as a CDN is for testing purposes and will change it as soon as we get the basics down.

Answer 1

For most of leaflet's items L.Marker is the typical syntax for one of the objects. The typical syntax is

marker = new L.Marker()

The other thing leaflet has is a function that creates a new marker for you. That item is lower case.

marker = L.marker()

This uses the "new" operator and returns the new marker that was created.

Your error is from

return new L.circleMarker(latlng, options);

It should just be

return L.circleMarker(latlng, options);