matyasz_UW

Simple-markers not resizing based on data

Discussion created by matyasz_UW on May 1, 2020

Hi there,

 

I am trying to make a web app that overlays a map with circles of various sizes, based on data values in a database. I followed this tutorial, but it isn't resizing the circles, using either the "stops" method or the "min/max value" method.

 

Here is how I define the layer:

 

const dataLayer = new FeatureLayer({
source: [], // An empty list of Graphics, will be edited later when options are chosen
title: "Fancy Map",
objectIdField: "data_id",
geometryType: "point",
fields: [
{name: "data_id", type: "integer"},
{name: "location_id", type: "integer"},
{name: "location_name", type: "string"},
{name: "age_group_id", type: "integer"},
{name: "age_group_name", type: "string"},
{name: "year_id", type: "string"},
{name: "cause_id", type: "integer"},
{name: "cause_name", type: "string"},
{name: "deaths", type: "double"},
{name: "deaths_normalizer", type: "double"},
{name: "latitude", type: "double"},
{name: "longitude", type: "double"},
{name: "event_count", type: "integer"},
{name: "is_active", type: "integer"}
],
renderer: {
type: "simple",
symbol: {
type: "simple-marker"
color: [226, 119, 40, 0.75], // orange
outline: {
color: "white",
width: 1
},
visualVariables: [
{
type: "size",
field: "deaths",
normalizationField: "deaths_normalizer",
minDataValue: 0.0001,
maxDataValue: 101.0,
minSize: 5,
maxSize: 50
// stops: [
// {
// value: 0.0001,
// size: 4,
// },
// {
// value: 100.0,
// size: 20,
// }
// ]
}
]
}
},
popupTemplate: {
content: "<b>Location</b>: {location_name} <br> <b>Cause</b>: {cause_name} <br> <b>Age Group</b>: {age_group_name} <br> <b>Year</b>: {year_id} <br> <b>Number of events</b>: {event_count} <br> <b>Deaths</b>: {deaths}"
}
});

 

And here is how I define the points when adding them to the layer:

 

let graphics = [];

for (const event of data){
const point = {
type: "point",
latitude: event.latitude,
longitude: event.longitude
};

const graphic = new Graphic({
geometry: point,
attributes: event
});

graphics.push(graphic);
}

 

Is there anything obviously wrong with this? I haven't been able to find what is different from my code and the examples.

 

Thank you in advance,

Taylor

Outcomes