6

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.

12

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)

  • 2
    How would this be achieved with different marker icons instead of pointToLayer? – Joshua Dickerson Feb 22 '16 at 11:48

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.