CODEWITHSUNDEEP
mapboxmapbox-gl-js
Kyle
Kyle

Reputation: 190

Data Driven Property for Mapbox Circle Color

I have circles on an instance of mapboxgl whose color I would like to be informed by the property: "num_asc_properties", which is an integer. I'm using a conditional "case" to set the color based on what integer is returned. The circles however are appearing but unchanged and all black. My source for the features is a geoJSON object I am hosting on my github.

  'circle-color': [
            "case",
            [">=", ["get", 'num_asc_properties'], 100],
            color4,
            [">=", ["get", 'num_asc_properties'], 10],
            color3,
            [">=", ["get", 'num_asc_properties'], 3],
            color2,
            [">", ["get", 'num_asc_properties'], 0],
            color1,
            white
          ]

Here is an example of my geoJson object:

{
        "type": "Feature",
        "properties": {
            "property_location": "344-348 DUNCAN AVE.",
            "owners_name": "HOUSING AUTHORITY OF JERSEY CITY",
            "owners_mailing_address": "400 ROUTE 1",
            "city_state_zip": "JERSEY CITY, NJ  07306",
            "Latitude": "40.730307",
            "Longitude": "-74.08450571428571",
            "property_full_address": "344-348 Duncan Ave., Jersey City, NJ",
            "owners_full_address": "400 ROUTE 1, JERSEY CITY, NJ  07306",
            "gcode": "344, Duncan Avenue, Jersey City, Hudson County, New Jersey, 07306, United States",
            "asc_properties": "['514 NEWARK AVE.', '88 ERIE ST.', '57 DALES AVE.', '547 MONTGOMERY ST.', '20 FLORENCE ST.', '194 CORNELISON AVE', '198 CORNELISON AVE', '200 CORNELISON AVE', '206 CORNELISON AVE', '214 CORNELISON AVE', '557 MONTGOMERY ST.', '62 FREMONT ST.', '16-134 WILMOT AVE.', '326 DUNCAN AVE.', '344-348 DUNCAN AVE.', '354 & 358 DUNCAN AVE.', '39-85 HARVEY AVE.', '229-235 FREEMAN AVE.', '349 WOODWARD ST.', '296 WOODWARD ST.', '306 WOODWARD ST.', '302-332 WOODWARD ST.', '340 WOODWARD ST.', '511 GRAND ST.', '507 GRAND ST.', 'VAN HORNE ST.', '471 PACIFIC AVE.', '52 CARBON ST.', '331 RANDOLPH AVE.', '380-390 ARLINGTON AVE.', '254 BERGEN AVE.', '140 STEGMAN ST.', '146 STEGMAN ST.', '148 STEGMAN ST.', '176 DWIGHT ST.', '125 DWIGHT ST.', '107 DWIGHT ST.', '103 DWIGHT ST.', '199 OCEAN AVENUE', '92 DANFORTH AVENUE', '71 CATOR AVE.', '72 DANFORTH AVE.', '82 DANFORTH AVE.', '15 OLD BERGEN RD.', '61 MERRITT ST.']",
            "num_asc_properties": "59",
            "units": "2"
        },

So for this feature, I'd want the circle's color to be color3, since 59 is less than 100 but greater than 10. I am unsure of what I'm doing wrong.

Upvotes: 0

Views: 715

Answers (1)

Kyle
Kyle

Reputation: 190

What I wasn't doing was nesting a "to_string" expression:

'circle-color': [
            "case",
              [">=", ["to-number", ["get", 'num_asc_properties']], 100],
              color4,
              [">=", ["to-number", ["get", 'num_asc_properties']], 10],
              color3,
              [">=", ["to-number", ["get", 'num_asc_properties']], 3],
              color2,
              [">", ["to-number", ["get", 'num_asc_properties']], 0],
              color1,
              white
          ]

Upvotes: 1

Related Questions