Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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.

What am I doing wrong ?

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 ? How can I decide which style to use ?

Thank you.

share|improve this question
add comment

1 Answer 1

up vote 3 down vote accepted

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)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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