Creating Interactive Maps with Leaflet Using Javascript Switch Case

Implementing a javascript switch statement to dynamically assign fillColor based on specific case values. The current code successfully assigns the value according to the first case, but fails to execute the subsequent cases.

var ElectionDistrictLayer = L.geoJson(QueensCC, {
  style: function(feature) {
    var fillColor = feature.properties.QnsCountyCommitteeList_Seat_Description;
    switch(fillColor)
    {
      case "Full":
        fillColor = "#94ff7c";
        break;
      case "1 Vacancy":
        fillColor: "#ffff20";
        break;
      case "Fully Vacant":
        fillColor: "#ff2020";
        break;
      default:
        fillColor: "Black";
        break;
    }
    return {color: "blue", weight: 0, fillColor: fillColor, fillOpacity: .6};
  }
}).addTo(mymap);

Answer №1

Spelling mistake: The colon (:) is used in subsequent instances, while the equal sign (=) is used in the initial case.

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

Toggle the visibility of an element with a single button click

Below is a snippet of my sample code: SAMPLE HTML CODE: <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <l ...

How can I replace specific text with HTML code in a webpage?

In my application, users have the ability to write comments that may contain HTML code. However, this code is escaped before being displayed: <div class="card-body"> <p class="card-text"> &lt;h1&gt;HOLA&lt;/h1&gt; Cita:#2&am ...

Encountering an error message stating "cell" is an undeclared identifier while attempting to parse the eBay API

I am facing a challenge while trying to extract item data from eBay's API. I am encountering issues in setting up the cells in my tableview correctly. The - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)ind ...

What is the best way to ensure that the buttons remain in place once they have been clicked to reveal a drop-down menu?

Is there a way to keep 3 buttons inline and prevent them from moving when clicked to open a submenu? Changing their positions results in them stacking on top of each other. Any help or suggestions would be greatly appreciated, thank you! Here is the code ...

Remove the Prisma self-referencing relationship (one-to-many)

I'm working with this particular prisma schema: model Directory { id String @id @default(cuid()) name String? parentDirectoryId String? userId String parentDirectory Directory? @relation("p ...

JQUERY confirm dialog causing AJAX malfunction

I am encountering an issue where I am trying to execute an ajax function only after the user confirms a dialogue using JQUERY confirm. Strangely, when I include the confirmation step, my code throws an error and does not function properly. It's worth ...

How can I show only the final four digits of an input field using Angular Material and AngularJS?

As a newcomer to Angular Material and Angular JS, I am striving to create an md-input field that displays only the last 4 digits in a masked format, such as "********1234". While my experience is currently limited to using md-input password fields where ...

User interaction with a checkbox triggers a state change in Angular

Here is the code snippet I am working with, where clicking should set the checked value to false: @Component({ template: ` <input type="checkbox" [checked]="checked" (change)="onChange()"> ` }) export class AppC ...

What is the best way to include a background image in a div within a React component?

I'm currently following a tutorial on creating an RPG game using React. The tutorial can be found at this link. I am trying to replicate the presenter's code by typing it out myself. However, I'm running into an issue when attempting to add ...

There are a multitude of unfamiliar files within the node_modules directory

I've been following a tutorial by Kent C. Dodds on creating an open source library. In the process, I used npm to install various packages such as chai, commitizen, cz-conventional-changelog, mocha, and unique-random-array. Recently, I noticed that m ...

Managing user logins across different sessions using passport.js, mysql database, and express-session

Currently, my app utilizes Passport.js for user authentication with Facebook, which is functioning properly. The issue arises when my node.js server is restarted and the users are automatically logged out. It appears that using express-sessions would be a ...

Tips for managing NaN values within mathjs.evaluate

console.log(mathjs.evaluate("(goodCount/(goodCount+reject_count))>0.99", { goodCount: 0, reject_count: 0, Total_Planned_time: 10 })) I am facing an issue where if both goodCount and reject_count are zero, this function returns NaN. Howe ...

What is the process for assigning default values to dynamically generated form elements?

I have been working on building a single-page application (SPA) using JavaScript and jQuery. During the process, I encountered an issue with a dynamic form. The user is able to add specific fields as needed, but if they don't generate and utilize all ...

Convert components into <input> using the "Edit" button, and store information with the "Save" button

My HTML script looks like this: <ul id="data"> <li>Value 1</li> <li>Value 2</li> <li>Value 3</li> <li>Value 4</li> </ul> <br> <div id="buttons"> ...

Struggling to make EJS button functional on the template

I am currently facing an issue with a loop that populates a webpage with multiple items, each containing an image, text, button, and a unique ID associated with it. Although I have written a function to retrieve the ID and plan name when the button is clic ...

Encountered a 404 error while attempting to build and serve a Vue.js project using 'npm build' in Apache Tomcat

After setting up a Vue.js project, the configuration in the package.json file looks like this: "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": ...

AngularJS: The delay in updating variable bindings following a REST API call

When utilizing a REST service, I wanted to implement a variable to show whether the service is currently loading or not. Controller $scope.loading = true; $http.get('/Something'). success(function(data, status, headers, config) ...

Using Jquery's append() method to dynamically alter the HTML content

I am attempting to create a table with rows that are added dynamically. The challenge I am encountering is that each row consists of form elements, including multiple inputs. I have a PHP function that generates the correct row, and I have been able to sen ...

Shifting hues with every upward and downward movement

I am experiencing a small issue with this JS code... -I have multiple divs that are changing automatically in rows as they move randomly... I want to change the color of the div moving up to green. And for the div moving down, I want to change the colo ...

A Node.js feature that enables atomic file replacement, triggering watchers only once

I have a unique scenario where I need to handle two types of processes. One process is responsible for writing a file, while the other processes are required to read it whenever there is a change. In my research, I came across fs.watch as a solution to ke ...