How to use circle markers with Leaflet-Tilelayer-Geojson - leaflet

Question

I am using Leaflet-Tilelayer-Geojson to load points on a map and it is working very well. I want to use Leaflet circlemarkers instead of the default blue icons but I can't find any examples of how to do this. How do I use circlemarkers with Leaflet-Tilelayer-Geojson?
My code for loading the points so far is simple:
var geojsonURL = 'MYURL/{z}/{x}/{y}.geojson';
var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {
}, {
onEachFeature: function (feature, layer) {
layer.on('click', function(e) {
$("#overlay").html('<img src="GIFURL"/>')
.load("URL+feature.properties.url); });
}
}
);
map.addLayer(geojsonTileLayer);
Thank you

Answer 1

I'm working on the same thing for my web app. My first suggestion would be to use
PointToLayer: http://leafletjs.com/reference.html#geojson-options
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
L.geoJson(someGeojsonFeature, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(map);}
What I interpret this to mean, as explained at https://github.com/glenrobertson/leaflet-tilelayer-geojson, is that this would be the approximate result:
var geojsonURL = 'MYURL/{z}/{x}/{y}.geojson';
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {
}, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
},
onEachFeature: function (feature, layer) {
layer.on('click', function(e) {
$("#overlay").html('<img src="GIFURL"/>')
.load("URL+feature.properties.url); });
}
}
);
map.addLayer(geojsonTileLayer);