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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -