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);

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? Dec 28 '18 at 12:57
  • 2
    You should try to understand what the code does. Dec 28 '18 at 13:01
  • Thank You.. It worked. just need edit in {onEachFeature:popUp}. Would you please up-vote question??? Dec 28 '18 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. Dec 28 '18 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. Dec 28 '18 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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