I have a feature layer that is using proportional symbols, but I need to symbols to scale in size with the map scale. Visual variables does not work (probably because of the field values), so I need to find another way. I tried setting a new renderer based on the level of detail (seems like the easiest solution), but the symbols do not change, even after redrawing the layer. I first defined 3 uniquevalue renders and set the layer initially to the renderer with the smaller symbols:
var uvrJsonSmall = {
"type": "uniqueValue",
"field1": "Density",
"legendOptions": {
"showLegend": true,
//"title": "Site Density",
"customValues": [1,2,3]
},
"defaultSymbol": propSym,
"uniqueValueInfos": [{
"value": "Sparse",
"symbol": {
"color": [0, 153, 0, 150],
"size": 4,
"outline": {
"color": [0, 51, 0, 200],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
},
"type": "esriSMS",
"style": "esriSMSCircle"
}
}, {
"value": "Moderate",
"symbol": {
"color": [0, 153, 0, 150],
"size": 7,
"outline": {
"color": [0, 51, 0, 200],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
},
"type": "esriSMS",
"style": "esriSMSCircle"
}
}, {
"value": "Dense",
"symbol": {
"color": [0, 153, 0, 150],
"size": 10,
"outline": {
"color": [0, 51, 0, 200],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
},
"type": "esriSMS",
"style": "esriSMSCircle"
}
}]
}
var uvrJsonMedium = {
"type": "uniqueValue",
"field1": "Density",
"legendOptions": {
"showLegend": true,
//"title": "Site Density",
"customValues": [1,2,3]
},
"defaultSymbol": propSym,
"uniqueValueInfos": [{
"value": "Sparse",
"symbol": {
"color": [0, 153, 0, 150],
"size": 10,
"outline": {
"color": [0, 51, 0, 200],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
},
"type": "esriSMS",
"style": "esriSMSCircle"
}
}, {
"value": "Moderate",
"symbol": {
"color": [0, 153, 0, 150],
"size": 16,
"outline": {
"color": [0, 51, 0, 200],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
},
"type": "esriSMS",
"style": "esriSMSCircle"
}
}, {
"value": "Dense",
"symbol": {
"color": [0, 153, 0, 150],
"size": 24,
"outline": {
"color": [0, 51, 0, 200],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
},
"type": "esriSMS",
"style": "esriSMSCircle"
}
}]
}
var uvrJsonLarge = {
"type": "uniqueValue",
"field1": "Density",
"legendOptions": {
"showLegend": true,
//"title": "Site Density",
"customValues": [1,2,3]
},
"defaultSymbol": propSym,
"uniqueValueInfos": [{
"value": "Sparse",
"symbol": {
"color": [0, 153, 0, 150],
"size": 14,
"outline": {
"color": [0, 51, 0, 200],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
},
"type": "esriSMS",
"style": "esriSMSCircle"
}
}, {
"value": "Moderate",
"symbol": {
"color": [0, 153, 0, 150],
"size": 20,
"outline": {
"color": [0, 51, 0, 200],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
},
"type": "esriSMS",
"style": "esriSMSCircle"
}
}, {
"value": "Dense",
"symbol": {
"color": [0, 153, 0, 150],
"size": 32,
"outline": {
"color": [0, 51, 0, 200],
"width": 1,
"type": "esriSLS",
"style": "esriSLSSolid"
},
"type": "esriSMS",
"style": "esriSMSCircle"
}
}]
}
if (resultLayer.graphics.length != QueryGraphics.length){
for(var i = 1; i < QueryGraphics.length; i++) {
//console.log("query graphic ", QueryGraphics[i]);
resultLayer.add(QueryGraphics[i]);
}
}
propRendSm = new UniqueValueRenderer(uvrJsonSmall);
propRendMed = new UniqueValueRenderer(uvrJsonMedium);
propRendLg = new UniqueValueRenderer(uvrJsonLarge);
resultLayer.setRenderer(propRendSm);
currentRend = 'small';
map.addLayer(resultLayer);
resultLayer.on('load', function() {
console.log("result layer ", resultLayer);
//resultLayer.redraw();
_showSpecDensLegend()
})
Then on 'zoom-end' I can update the renderer based on the zoom level. This works ( the layer renderer is updated), but the symbols don't update in the map.
map.on('zoom-end', lang.hitch(this, function() {
level = map.getLevel();
if(resultLayer) {
console.log("result layer")
if(level < 11 && currentRend != 'small') {
resultLayer.setRenderer(propRendSm);
resultLayer.redraw();
currentRend = 'small';
}
if(level === 11 && currentRend != 'medium') {
console.log("setting medium symbols");
resultLayer.setRenderer(propRendMed);
console.log("result layer renderer ", resultLayer.renderer); //I can see the renderer has been updated
resultLayer.redraw();
currentRend = 'medium';
}
if(level > 11 && currentRend != 'large') {
console.log("setting large symbols");
resultLayer.setRenderer(propRendLg);
resultLayer.redraw();
currentRend = 'large';
}
}
}
Redrawing the layer doesn't seem to be doing anything. Is there something I am missing, or is there a better way of scaling the symbols?