Thursday 21 July 2016

How can I change the style of marker in leaflet (from GeoJSON)?


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.



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)


No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...