Styjun

Più, meno, poco & molto: How to write incremental dynamics?

Notepad++ cannot print

Read file lines into shell line separated by space

The No-Free-Lunch Theorem and K-NN consistency

Why is there so little discussion / research on the philosophy of precision?

How do the Etherealness and Banishment spells interact?

I don't have the theoretical background in my PhD topic. I can't justify getting the degree

Are modern clipless shoes and pedals that much better than toe clips and straps?

Could George I (of Great Britain) speak English?

Why is the UK so keen to remove the "backstop" when their leadership seems to think that no border will be needed in Northern Ireland?

Architectural feasibility of a tiered circular stone keep

Two questions about typesetting a Roman missal

Was it ever possible to target a zone?

How to gently end involvement with an online community?

Would it be possible to have a GMO that produces chocolate?

Are the A380 engines interchangeable (given they are not all equipped with reverse)?

Disambiguation of "nobis vobis" and "nobis nobis"

Non-visual Computers - thoughts?

Is there any way to keep a player from killing an NPC?

Why do banks “park” their money at the European Central Bank?

Why isn't "I've" a proper response?

Uri tokenizer as a simple state machine

How many US airports have 4 or more parallel runways?

Is MOSFET active device?

Using Mapbox GL JS expressions to set an icon-image

Setting “checked” for a checkbox with jQuery?Set a default parameter value for a JavaScript functionPreview an image before it is uploadedMAPBOX - Unable to use Custom Marker and Fly-to Location feature in same web applicationMapbox GL Loading Missing Raster Tiles Error ImageHow can I prevent circles to get clipped when map is pitched/tilted in Mapbox GL JS?Vector Tiles from mapbox-vector-tile-java results in features rendered in mapbox-gl at abnormally high latitudesMapbox - extruding buildings in custom layerReact-Native MapBox Clustering with custom iconsAdding custom icons for each feature in feature collection with mapbox-gl-js

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I would like to set an icon-image based on a data value (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions).

Also see https://github.com/mapbox/mapbox-gl-js/issues/6935 which has a few examples for how to do this.

I've tried a few things ...

Using match

'icon-image': [
 'match',
 ['get', 'tap_ports'],
 2,
 'tubes-circle-15',
 4,
 'tubes-square-15',
 8,
 'tubes-octagon-15',
 'tubes-circle-15' // default
]

Using case

'icon-image': [
 'case',
 ['==', ['get', 'tap_ports'], 2],
 'tubes-circle-15',
 ['==', ['get', 'tap_ports'], 4],
 'tubes-square-15',
 ['==', ['get', 'tap_ports'], 4],
 'tubes-octagon-15',
 'tubes-circle-15' // default
]

Using property and stops

'icon-image': 
 property: 'tap_ports',
 type: 'categorical',
 stops: [
 [2, 'tubes-circle-15'],
 [4, 'tubes-square-15'],
 [8, 'tubes-octagon-15']
 ]

All of those don't produce any icons.

Also, if I try to log the rendered features from that layer using queryRenderedFeatures I see only empty arrays, so the features aren't rendering due to my attempts.

If I simply set

'icon-image': 'tubes-circle-15'

everything renders fine, but only as circles of course.

javascript expression mapbox mapbox-gl-js mapbox-gl

share|improve this question

edited Mar 27 at 20:39

awolfe76

asked Mar 27 at 18:22

awolfe76awolfe76

6177 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Have you tried like: github.com/mapbox/mapbox-gl-js/blob/…
  
  – Chase Choi
  Mar 28 at 7:19
  

  
  
  
  

add a comment | 

0

I would like to set an icon-image based on a data value (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions).

Also see https://github.com/mapbox/mapbox-gl-js/issues/6935 which has a few examples for how to do this.

I've tried a few things ...

Using match

'icon-image': [
 'match',
 ['get', 'tap_ports'],
 2,
 'tubes-circle-15',
 4,
 'tubes-square-15',
 8,
 'tubes-octagon-15',
 'tubes-circle-15' // default
]

Using case

'icon-image': [
 'case',
 ['==', ['get', 'tap_ports'], 2],
 'tubes-circle-15',
 ['==', ['get', 'tap_ports'], 4],
 'tubes-square-15',
 ['==', ['get', 'tap_ports'], 4],
 'tubes-octagon-15',
 'tubes-circle-15' // default
]

Using property and stops

'icon-image': 
 property: 'tap_ports',
 type: 'categorical',
 stops: [
 [2, 'tubes-circle-15'],
 [4, 'tubes-square-15'],
 [8, 'tubes-octagon-15']
 ]

All of those don't produce any icons.

Also, if I try to log the rendered features from that layer using queryRenderedFeatures I see only empty arrays, so the features aren't rendering due to my attempts.

If I simply set

'icon-image': 'tubes-circle-15'

everything renders fine, but only as circles of course.

javascript expression mapbox mapbox-gl-js mapbox-gl

share|improve this question

edited Mar 27 at 20:39

awolfe76

asked Mar 27 at 18:22

awolfe76awolfe76

6177 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Have you tried like: github.com/mapbox/mapbox-gl-js/blob/…
  
  – Chase Choi
  Mar 28 at 7:19
  

  
  
  
  

add a comment | 

I would like to set an icon-image based on a data value (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions).

Also see https://github.com/mapbox/mapbox-gl-js/issues/6935 which has a few examples for how to do this.

I've tried a few things ...

Using match

'icon-image': [
 'match',
 ['get', 'tap_ports'],
 2,
 'tubes-circle-15',
 4,
 'tubes-square-15',
 8,
 'tubes-octagon-15',
 'tubes-circle-15' // default
]

Using case

'icon-image': [
 'case',
 ['==', ['get', 'tap_ports'], 2],
 'tubes-circle-15',
 ['==', ['get', 'tap_ports'], 4],
 'tubes-square-15',
 ['==', ['get', 'tap_ports'], 4],
 'tubes-octagon-15',
 'tubes-circle-15' // default
]

Using property and stops

'icon-image': 
 property: 'tap_ports',
 type: 'categorical',
 stops: [
 [2, 'tubes-circle-15'],
 [4, 'tubes-square-15'],
 [8, 'tubes-octagon-15']
 ]

All of those don't produce any icons.

Also, if I try to log the rendered features from that layer using queryRenderedFeatures I see only empty arrays, so the features aren't rendering due to my attempts.

If I simply set

'icon-image': 'tubes-circle-15'

everything renders fine, but only as circles of course.

javascript expression mapbox mapbox-gl-js mapbox-gl

share|improve this question

edited Mar 27 at 20:39

awolfe76

asked Mar 27 at 18:22

awolfe76awolfe76

6177 bronze badges

'icon-image': [
 'match',
 ['get', 'tap_ports'],
 2,
 'tubes-circle-15',
 4,
 'tubes-square-15',
 8,
 'tubes-octagon-15',
 'tubes-circle-15' // default
]

'icon-image': [
 'case',
 ['==', ['get', 'tap_ports'], 2],
 'tubes-circle-15',
 ['==', ['get', 'tap_ports'], 4],
 'tubes-square-15',
 ['==', ['get', 'tap_ports'], 4],
 'tubes-octagon-15',
 'tubes-circle-15' // default
]

'icon-image': 
 property: 'tap_ports',
 type: 'categorical',
 stops: [
 [2, 'tubes-circle-15'],
 [4, 'tubes-square-15'],
 [8, 'tubes-octagon-15']
 ]

'icon-image': 'tubes-circle-15'

share|improve this question

edited Mar 27 at 20:39

awolfe76

asked Mar 27 at 18:22

awolfe76awolfe76

6177 bronze badges

share|improve this question

edited Mar 27 at 20:39

awolfe76

asked Mar 27 at 18:22

awolfe76awolfe76

6177 bronze badges

asked Mar 27 at 18:22

awolfe76awolfe76

6177 bronze badges

asked Mar 27 at 18:22

awolfe76awolfe76

6177 bronze badges

1 Answer
1

active

oldest

votes

0

Thanks for the suggestion @ChaseChoi.

When I first tried the steps it didn't work either but then I added a debug statement for my layer that was causing problems.

map.on('zoom', () => 
 console.log(map.queryRenderedFeatures( layers: ['tubes'] ))
)

In here I noticed that the layout.image-icon property was something like tubes-circle-15, rather than blue-circle-15. tubes should have been a color.

So, staying with the steps approach I used the concat expression and it worked!

'icon-image': [
 'step',
 ['get', 'tap_ports'],
 ['concat', ['get', 'tubes'], '-circle-15'], // default
 2,
 ['concat', ['get', 'tubes'], '-circle-15'],
 4,
 ['concat', ['get', 'tubes'], '-square-15'],
 8,
 ['concat', ['get', 'tubes'], '-octagon-15']
]

I went back and tried the other approaches, using concat this time, and they all work expect for the "property and stops" approach.

share|improve this answer

answered Mar 28 at 14:18

awolfe76awolfe76

6177 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55384143%2fusing-mapbox-gl-js-expressions-to-set-an-icon-image%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Thanks for the suggestion @ChaseChoi.

When I first tried the steps it didn't work either but then I added a debug statement for my layer that was causing problems.

map.on('zoom', () => 
 console.log(map.queryRenderedFeatures( layers: ['tubes'] ))
)

In here I noticed that the layout.image-icon property was something like tubes-circle-15, rather than blue-circle-15. tubes should have been a color.

So, staying with the steps approach I used the concat expression and it worked!

'icon-image': [
 'step',
 ['get', 'tap_ports'],
 ['concat', ['get', 'tubes'], '-circle-15'], // default
 2,
 ['concat', ['get', 'tubes'], '-circle-15'],
 4,
 ['concat', ['get', 'tubes'], '-square-15'],
 8,
 ['concat', ['get', 'tubes'], '-octagon-15']
]

I went back and tried the other approaches, using concat this time, and they all work expect for the "property and stops" approach.

share|improve this answer

answered Mar 28 at 14:18

awolfe76awolfe76

6177 bronze badges

add a comment | 

0

Thanks for the suggestion @ChaseChoi.

When I first tried the steps it didn't work either but then I added a debug statement for my layer that was causing problems.

map.on('zoom', () => 
 console.log(map.queryRenderedFeatures( layers: ['tubes'] ))
)

In here I noticed that the layout.image-icon property was something like tubes-circle-15, rather than blue-circle-15. tubes should have been a color.

So, staying with the steps approach I used the concat expression and it worked!

'icon-image': [
 'step',
 ['get', 'tap_ports'],
 ['concat', ['get', 'tubes'], '-circle-15'], // default
 2,
 ['concat', ['get', 'tubes'], '-circle-15'],
 4,
 ['concat', ['get', 'tubes'], '-square-15'],
 8,
 ['concat', ['get', 'tubes'], '-octagon-15']
]

I went back and tried the other approaches, using concat this time, and they all work expect for the "property and stops" approach.

share|improve this answer

answered Mar 28 at 14:18

awolfe76awolfe76

6177 bronze badges

add a comment | 

Thanks for the suggestion @ChaseChoi.

When I first tried the steps it didn't work either but then I added a debug statement for my layer that was causing problems.

map.on('zoom', () => 
 console.log(map.queryRenderedFeatures( layers: ['tubes'] ))
)

In here I noticed that the layout.image-icon property was something like tubes-circle-15, rather than blue-circle-15. tubes should have been a color.

So, staying with the steps approach I used the concat expression and it worked!

'icon-image': [
 'step',
 ['get', 'tap_ports'],
 ['concat', ['get', 'tubes'], '-circle-15'], // default
 2,
 ['concat', ['get', 'tubes'], '-circle-15'],
 4,
 ['concat', ['get', 'tubes'], '-square-15'],
 8,
 ['concat', ['get', 'tubes'], '-octagon-15']
]

I went back and tried the other approaches, using concat this time, and they all work expect for the "property and stops" approach.

share|improve this answer

answered Mar 28 at 14:18

awolfe76awolfe76

6177 bronze badges

map.on('zoom', () => 
 console.log(map.queryRenderedFeatures( layers: ['tubes'] ))
)

'icon-image': [
 'step',
 ['get', 'tap_ports'],
 ['concat', ['get', 'tubes'], '-circle-15'], // default
 2,
 ['concat', ['get', 'tubes'], '-circle-15'],
 4,
 ['concat', ['get', 'tubes'], '-square-15'],
 8,
 ['concat', ['get', 'tubes'], '-octagon-15']
]

share|improve this answer

answered Mar 28 at 14:18

awolfe76awolfe76

6177 bronze badges

answered Mar 28 at 14:18

awolfe76awolfe76

6177 bronze badges

answered Mar 28 at 14:18

awolfe76awolfe76

6177 bronze badges