7

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?

1 Answer 1

14

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)

1
  • 2
    How would this be achieved with different marker icons instead of pointToLayer? Commented Feb 22, 2016 at 11:48

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.