``Why is my setFeatureState function not updating the value in my Mapbox map

I've been attempting to change the stroke of a circle upon clicking it on mapbox. Despite following mapbox's documentation, the values don't seem to update. The console is also clear.

  t.map.addLayer({
    id: id,
    type: 'circle',
    source: id,
    paint: {
      'circle-radius': 100,
      'circle-opacity': 0.5,
      'circle-color': 'rgba(20, 106, 181, 0.11)',
      'circle-stroke-color': [
        'case', ['boolean', ['feature-state', 'clicked'], false],
          'rgba(20, 106, 181, 0.11)',
          '#146ab5',
      ],
      'circle-stroke-width': [
        'case', ['boolean', ['feature-state', 'clicked'], false],
          2,
          0,
      ],
    },
  });

I then proceed to update the state:

  t.map.on('click', id, (e) => {
    t.map.setFeatureState({ source: id, id: id }, { clicked: true });
  });

I have carefully checked each step, but unfortunately, the values remain unchanged. Appreciate any help with this issue.

javascriptvue.jsmapbox

Answer №1

After reviewing your example, it seems that the id reference is incorrect. To ensure each element in the layer has a unique ID, you can easily add this to the source data.

t.map.addSource('sourceId', {
    'type': 'dataType',
    'data': yourData,
    'generateId': true // This guarantees unique IDs for all features
});

Once you have added this, remember to find and refer to the unique id in each setFeatureState update:

t.map.on('click', id, (e) => {
    let uniqueId = e.features[0]['id'];
    t.map.setFeatureState({ source: id, id: uniqueId }, { clicked: true });
  });

I am currently facing a similar issue myself and found this information helpful (although I am not an expert with MapBox GL JS). The examples above are taken from Interactive Hover Effects, and Create Hover Effect in the MapBox documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to navigate from a button in NextJS to another page that I have built within the same application?

As I work on developing a website for a pet rescue charity using Next.js, I am facing an issue with getting my button or link to function correctly. Every time I try to navigate to another page within my Next.js app, I encounter a 404 error stating "This p ...

javascriptbuttonnext.jsnext.js13

Javascript - Issue with Ajax causing additional commas in JSON responses

I'm attempting to send a request to a RESTful server using the HTTP module in Node.js. Due to the large response size (64 chunks, approximately 100kb), the HTTP module combines the chunks into a single string response like this: res.setEncoding(& ...

javascriptjsonajax

Why isn't a password appearing in the "generated-password" div from the password generator?

The function toIncludeCharacters() appears to be functioning correctly as it returns lowercase letters upon upload, but generatePassword() is currently producing a blank output. After clicking the "Generate Password" button, three blank outputs are return ...

javascripthtmlbootstrap-5password-generator

Retrieving the chosen option in Vue.js when the @change event occurs

I have a dropdown menu and I want to perform different actions depending on the selected option. I am using a separate vue.html and TypeScript file. Here is my code snippet: <select name="LeaveType" @change="onChange()" class="f ...

javascripthtmlvue.js

In JavaScript, the return statement is used to halt the execution of any subsequent statements

I encountered a situation where I need to stop the execution of the next function call if the previous function has a return statement. However, I noticed that even though there is a return statement in the "b" function below, the next function call still ...

javascriptscopereturn

Unable to utilize the .keyCode method within a query selector

Trying to utilize .keyCode in JavaScript to identify a pressed key, but the console consistently displays null after each key press. Below is the relevant CSS code: <audio data-key="65" src="sounds\crash.mp3"></audio> ...

javascripthtmlcss

Problem with uploading special characters (čžćšđ) in Uploadify

I've encountered an issue with uploading images using . When I upload images with characters such as (čžćšđ) like "čžćšđ.jpg", the characters get corrupted and the uploaded image ends up looking like čćžšđ.jpg. How can I pr ...

javascriptjquery

Trouble arises when attempting to add an image to a spherical object

I've searched through various threads, Googled extensively, watched YouTube tutorials.... But I can't seem to figure out how to apply a texture to my Sphere. When I run this code, all I see is a white Sphere without any texture showing up. Can so ...

javascriptthree.jstexturesexpo

Leveraging Template Variables for Styling in Vue 3's CSS Classes

Struggling to find the perfect way to utilize variables returned by Vue functions in CSS inline styles, specifically with the "width" style. I have two variables that are returned to the template and can be used with the {{}} syntax, but not directly as a ...

javascriptcssvue.jsvuejs3tailwind-css

Having trouble with my React App compiling media files

I'm currently working with create-react-app and using a Data.js file where I define objects with properties that are spread as props in a tag. However, when I run npm start or deploy my application, the image doesn't show up. It seems like the co ...

javascriptreactjsimagewebpackcreate-react-app

How can I create 3 conditions in an AJAX request to verify a user's ID?

I am trying to create 3 conditions in Ajax to check when creating a new user id. It works for 2 conditions (username can be used and username is already in use), but I encounter a problem when the user leaves the username field empty, and it still displays ...

javascriptajax

Utilizing Angular 9 with Jest for unit testing: simulating a promise, checking for method invocation afterwards

I'm in need of assistance as I am unsure how to mock a promise and verify that a method is called within the then() block. When I click on the save button of my form, my code appears as follows: // File: myComponent.ts save() { const myObject = n ...

javascriptangularunit-testingjestjs

Unable to incorporate an external JavaScript file via a static URL

I'm attempting to link an external javascript file using a static URL, like this: <script type="text/javascript" src="{{ url_for('static/js', filename='test.js') }}"></script> However, I am encountering the following ...

javascriptpythonflaskinclude

The challenge of loading multiple objects asynchronously in three.js

When I try to load multiple models onto the same scene simultaneously, only one model is successfully loaded. For instance, if I have a building scene with various objects like chairs and toys inside, only one object gets loaded when I try to load them all ...

javascriptjqueryasynchronousthree.js

### Setting Default String Values for Columns in TypeORM MigrationsDo you want to know how to

I'm working on setting the default value of a column to 'Canada/Eastern' and making it not nullable. This is the current setup for the column: queryRunner.addColumn('users', new TableColumn({ name: 'timezone_name', ...

javascripttypescriptpostgresqltypeorm

Is there a way to selectively include a filter in ng-repeat within a directive?

Utilizing an element directive across multiple views, the directive iterates through each 'resource' in a list of resources using ng-repeat="resource in resources". Different page controllers determine which resources are fetched from the API by ...

javascriptangularjsangularjs-directiveangular-controller

When implementing a v-for loop in Vue.js with Vuetify and using v-dialog components, the click event may be overwritten for all v-dialogs except

My app features the utilization of a Vuetify v-dialog within a v-for loop. However, I am encountering an issue where clicking on any chip within the loop triggers the click event for the last v-chip, instead of the specific one being clicked. It appears t ...

javascriptvue.jsvuetify.js

What could be causing the error when trying to use a PUT request with fetch in Vue?

Whenever I attempt to send a PUT request, an error pops up on the console. export function putUserData() { fetch(`${url}/user/${getCookie("ID")}`, { method: "PUT", headers: { "Authorization": `B ...

javascriptvue.jsfrontendvuejs3fetch-api

Using lodash in JavaScript to flatten a nested object structure

I'm looking to flatten a hierarchical json structure. Here is an example of my json data: { "id": "111", "name": "v5", "define": { "system": "abc", "concept": [{ "code": "y7", "concept": [{ "code": "AGG", "di ...

javascriptangularjsjsonnode.jslodash

Extract the Top X elements from a multidimensional array

Consider an Array that consists of nested arrays: [ ["2000-01-01", "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a9a8abe091b6bcb0b8bdffb2bebc">[email protected]</a>", 1, 9, 338], ["2000-01-01", "<a href="/ ...

javascriptarrayssortingtypescript