[GIS] Changing style of marker in Leaflet(from GeoJSON)

geojsonleafletmarkers

I'm serving GeoJSON to Leaflet and by default it get a blue icon marker.
I'm trying to change the style so I'll be able to use the feature properties as part of the style , but no matter what I do , the maker is the same.

GeoJSON :

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[35.1966,31.7825]},"properties":{"GPSId":"2","DateTime":"7/3/2013 4:47:15 PM","GPSUserName":"2","GPSUserColor":"#FF5500"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.2,31.780117]},"properties":{"GPSId":"6","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake1","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.201715,31.779548]},"properties":{"GPSId":"15","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake10","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.200987,31.779606]},"properties":{"GPSId":"16","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake11","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.200987,31.780522]},"properties":{"GPSId":"17","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake12","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.201435,31.780981]},"properties":{"GPSId":"18","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake13","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.200806,31.781145]},"properties":{"GPSId":"19","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake14","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.200856,31.780188]},"properties":{"GPSId":"20","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake15","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.200145,31.780276]},"properties":{"GPSId":"21","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake16","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.201517,31.780699]},"properties":{"GPSId":"22","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake17","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.20321,31.780133]},"properties":{"GPSId":"23","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake18","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.199852,31.78034]},"properties":{"GPSId":"7","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake2","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.200613,31.780117]},"properties":{"GPSId":"8","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake3","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.200613,31.780691]},"properties":{"GPSId":"9","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake4","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.199326,31.780789]},"properties":{"GPSId":"10","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake5","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.19999,31.780965]},"properties":{"GPSId":"11","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake6","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.201142,31.780699]},"properties":{"GPSId":"12","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake7","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.201312,31.780511]},"properties":{"GPSId":"13","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake8","GPSUserColor":"#00FF57"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[35.200642,31.780109]},"properties":{"GPSId":"14","DateTime":"7/12/2013 9:05:00 AM","GPSUserName":"fake9","GPSUserColor":"#00FF57"}}],"name":"Points","keyField":"GPSUserName"}

This is how I add the layer :

function drawData() {
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8;",
    url: 'Service.asmx/GetItemsFromDBGeoJSON',
    data: '{}',
    dataType: "json",
    success: function (data, textStatus, jqXHR) {
        var geojson = jQuery.parseJSON(eval(data).d);
        map.removeLayer(geojsonLayer);
        geojsonLayer = L.geoJson(geojson, {                
            pointToLayer: function (latlng) {                    
                return new L.CircleMarker(latlng, {
                    radius: 5,
                    fillColor: "#A3C990",
                    color: "#000",
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.4
                });
            },
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.GPSUserName);
        }
        });

        map.addLayer(geojsonLayer);            
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    }
});

}

And I see nothing (console.log confirm I enter the pointToLayer section).
If I delete this part :

pointToLayer: function (latlng) {                    
                return new L.CircleMarker(latlng, {
                    radius: 5,
                    fillColor: "#A3C990",
                    color: "#000",
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.4
                });
            },

I get blue markers on the map (but I don't want that style).

What am I doing wrong?

Best Answer

Here's a stripped down version of your code, sidestepping the AJAX stuff and just using the color.

http://jsfiddle.net/erictheise/HQhzr/22/

Hopefully that points you in the right direction.

The main difference is that I'm using

pointToLayer: function(feature, latlng)

where yours was simply

pointToLayer: function(latlng)

Related Question