leaflet geojson icon according to value -
i loonking example of leafletjs geojson styled markers according data values (using "case" ?). have seen tutorial of can not find it...
i know how assign icon (png) according data value geojson file.
for example, geojson :
var data = { "type": "featurecollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:ogc:1.3:crs84" } }, "features": [ { "type": "feature", "properties": { "size" : "s", "cat" : "a", "column1": "code 1234", "column2": "london" }, "geometry": { "type": "point", "coordinates": [ 55.1, -0.11 ] } }, { "type": "feature", "properties": { "size" : "s", "cat" : "b", "column1": "code 121314", "column2": "paris" }, "geometry": { "type": "point", "coordinates": [ 48.8, 2.3 ] } }, { "type": "feature", "properties": { "size" : "l", , "cat" : "b", "column1": "code 5678", "column2": "new-york" }, "geometry": { "type": "point", "coordinates": [ 40.7, -73.99 ] } }, { "type": "feature", "properties": { "size" : "xl", , "cat" : "c", "column1": "code 91011", "column3": "tokyo" }, "geometry": { "type": "point", "coordinates": [ 35.6, 139.7 ] } }, ] }; i expecting : - according "size" value : s = icons.png ; l= iconl.png ... - according "cat" value : = icona.png ; b=iconb.png ...
the second analys (on "cat" values" new basemaps).
thank in advance if find it,
you can create different icons each type of city, this:
// create icon object var citys = l.icon({ iconurl: 'cityicons.png', iconsize: [38, 38], // size of icon iconanchor: [22, 22], // point of icon correspond marker's location popupanchor: [-3, -26] // point popup should open relative iconanchor }); var cityl = l.icon({ iconurl: 'cityiconl.png', iconsize: [58, 58], iconanchor: [22, 22], popupanchor: [-3, -26] }); var cityxl = l.icon({ iconurl: 'cityiconxl.png', iconsize: [78, 78], iconanchor: [22, 22], popupanchor: [-3, -26] }); and add geojson data, conditional:
var cities = l.geojson(data,{ oneachfeature:oneachfeature }).addto(map) function oneachfeature(feature, layer) { var lat = feature.geometry.coordinates[0]; var lon = feature.geometry.coordinates[1]; var popupcontent; var marker; switch(feature.properties.size) { case "l": marker = l.marker([lat, lon], {icon: cityl}).addto(map); popupcontent = feature.properties.column2 break; case "xl": marker = l.marker([lat, lon], {icon: cityxl}).addto(map); popupcontent = feature.properties.column2 break; default: marker = l.marker([lat, lon], {icon: citys}).addto(map); popupcontent = feature.properties.column2 } marker.bindpopup(popupcontent); }
Comments
Post a Comment