I have got a .json file to display in Leaflet map.
The points are shown with custom blue dot markers. I cannot get to change them.
How do I get to change the symbol?

var greenIcon = L.icon({
  iconUrl: 'marker-shadow.png',
  iconSize: [38, 95] // size of the icon

var jsonTest = new L.GeoJSON.AJAX(["colleges.geojson"],{onEachFeature:popUp},{icon:greenIcon});
var jsonTest1 = jsonTest.addTo(m);

1 Answer 1


You need to use the pointToLayer option (and mind your syntax).

var jsonTest = new L.GeoJSON.AJAX(["colleges.geojson"],{ //options object for GeoJSON
  pointToLayer: function(geoJsonPoint, latlng) {
    return L.marker(latlng, { icon: greenIcon }); //options object for Marker
  • Is there any edits remaining or I shall copy paste the code? Commented Dec 28, 2018 at 12:57
  • 2
    You should try to understand what the code does. Commented Dec 28, 2018 at 13:01
  • Thank You.. It worked. just need edit in {onEachFeature:popUp}. Would you please up-vote question??? Commented Dec 28, 2018 at 13:26
  • 1
    Glad to be able to help! Upvoting your question doesn't feel fair to me because there are questions that show noticeably more research effort than yours. Commented Dec 28, 2018 at 13:30
  • As to your proposed edit: You cannot pass two options objects to L.GeoJSON.AJAX(...). Please have a look at this example. Commented Dec 28, 2018 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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