How can I customize the color of the selected Leaflet GeoJSON FeatureLayer and its border?

Learn how to customize the fill and border color for leaflet GeoJSON layers with the following options.

/**
   * Generates GeoJSON layers and assigns event handlers.
   */
  private createGeoJsonLayer(geodata: any, map: L.Map): L.GeoJSON<any> {
    const layers: L.GeoJSON<any> = L.geoJSON(geodata as any, {
      style: {
        weight: 2,
        color: 'orange',
        opacity: 0.8,
        fillColor: 'red',
        fillOpacity: 0.6,
      },
      onEachFeature: (feature, layer) => {
        this.onEachFeature(feature, layer);
      },
    });

Check out this Angular demo:

https://stackblitz.com/edit/angular-ivy-xuqt3y?file=src%2Fapp%2Fleaflet-demo.component.ts,src%2Fapp%2Fleaflet-demo.component.css

Want to change the selection fill and border colors?

Currently set to blue fill and yellow border, find out how to customize these values and locate leaflet's documentation for more options.

javascriptcssangularleaflet

Answer №1

Alright - The colors for selection are configured within the event handling functions. Therefore, the following code snippet will modify the border color to pink and the fillColor to green upon hovering over and clicking on the feature.

  private onMouseOver(featureLayer) {
    if (featureLayer) {
      featureLayer.setStyle({
        weight: '2', //border width
        color: 'pink', //border color
        fillColor: 'green',
      });

      if (!L.Browser.ie && !L.Browser.opera12 && !L.Browser.edge) {
        featureLayer.bringToFront();
      }
    }
  }

Feel free to check out this demo.

https://stackblitz.com/edit/angular-ivy-8yy5v8?file=src%2Fapp%2Fleaflet-demo.component.ts,src%2Fapp%2Fleaflet-demo.component.css

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

Mastering the art of dynamically chaining methods in JavaScript

I am in search of a method to dynamically chain different populate methods for various paths in a Mongoose document. The goal is to efficiently retrieve all necessary fields at once. Below is the current code snippet: let fields = [path1, path2, ...] let ...

javascriptmongodbmongoosemethodspopulate

When I set up the proxy in Vite, it redirects me to the specified proxy URL on my local server. I specifically intend to utilize it solely for making API

Below is my Vite configuration file vite.config.ts: import { defineConfig } from 'vitest/config' import vue from '@vitejs/plugin-vue' import { quasar, transformAssetUrls } from '@quasar/vite-plugin' const path = require(&apos ...

javascripttypescriptvue.jsvite

What is the best way to modify the height of an element that contains an SVG at the bottom in order to ensure it appears visually appealing across all screen widths?

Is there a way to adjust the height of an element with an SVG at the bottom so that it looks good on all screen widths? I'm attempting to create a 'wave' effect at the bottom of my element using a background-image in CSS. Although I managed ...

htmlcssbootstrap-5

Adding flair to a fresh element and then removing it upon its inception

I'm working with a JavaScript code that creates a new element when a button is clicked. I have a question about it. Here's the JavaScript code snippet: var comment = document.querySelector("#AddComment"); var req = new XMLHttpRequest(); if(comm ...

javascripthtmlcssajax

Error 404: Jquery Fancy Box Not Found

Help needed with JQuery FancyBox: I encountered a 404 error when trying to enlarge small images. Here is the code that I used: <a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/1_b.png" style="margin-right:100px;"><im ...

javascriptjquerycsshtmlfancybox

How can I wait for an onclick action to pause, loop, or continue inside of a loop?

The form's onsubmit function triggers a pop-up message asking the user if they want to proceed before submitting the form. This requires the onsubmit function to wait for the user's final input in order to fully execute the form. Here is the cod ...

javascript

Altering the hue of various stroke patterns

I've encountered an issue where I want to create skill bars that display my skills in percentages. Luckily, I found a great code that allows me to do this. Although I would prefer to do it myself, I haven't come across a good tutorial that teache ...

javascripthtmlcss

Guide to altering the characteristics of a button

Here is the code for a button within My Template: <div *ngFor="let detail of details" class = "col-sm-12"> <div class="pic col-sm-1"> <img height="60" width="60" [src]='detail.image'> </div> <div ...

javascriptangularjsangular

Sending user input data from a React text field to a function as arguments

Below are input fields, from which I need to retrieve the entered values and pass them to the onClick event of the button displayed below. <input type="text" style={textFieldStyle} name="topicBox" placeholder="Enter topic here..."/> <input type=" ...

javascriptbuttonreactjsinputtypescript

Error encountered while executing ExpressJs function that was converted to a promise

Understanding how errors are handled in promises can be a bit tricky, especially for someone new to promises like myself. I'm trying to make the most of them, but I'm not quite there yet. Here is the code snippet I'm working with: app.list ...

javascriptnode.jsexpressbluebird

Filtering two distinct arrays in Angular 6 to eliminate duplicate data: A quick guide

array1 = ["one","two"]; array2 = [ {"name":"one","id":101} , {"name":"two","id":102} , {"name":"three","id":103} , {"name":"four","id":104} ]; The data above consists of two arrays: array1 which contains string values, and array2 which contains objects. ...

angulartypescript

Is the WordPress error message "wp_register_style was improperly called" showing up on

I am facing an issue while trying to incorporate this code into my initial Wordpress template. It seems that the libraries for Bootstrap and my custom styles are not functioning as expected. Here is the code snippet in question. Any insights would be great ...

phpcsstemplateswordpress-theming

Establishing limits on the motion of particles

I'm currently using three.js to generate particles and place them in random positions: for( var i = 0; i < particleCount; i++ ){ var pX = Math.random() * 100-50; var pY =Math.random() * 100-50; var pZ = Math.random() * 100-50; particle = n ...

javascriptthree.jsparticles

Effective HTML element placement with CSS styling

My HTML code includes a form containing a table. Take a look: This is the Code I'm Using: <html> <head></head> <body> <form onsubmit="" id="form1" action="" method="post" name="form1" style="position: rela ...

htmlcssweb-applicationsxhtml

Interactive button with jQuery that toggles between clicked and unclicked states, automatically reverting to unclicked when clicked elsewhere on the page

I am trying to create a button that changes its appearance when clicked, and returns to its normal state if clicked again or if the user clicks outside of it. Here is the JavaScript code I have written: if($('#taskbar-start').hasClass('ta ...

javascriptjqueryhtml

Error in form action when generated through an ajax partial in Ruby

I am facing an issue with a form that is loaded via an ajax partial. The problem arises when the form loads through ajax as it targets the wrong controller/url instead of the intended one. Despite my efforts to set the target controller correctly, it keeps ...

javascriptjqueryruby-on-railsrubyajax

A division element continually broadens to its maximum width, regardless of whether there is enough space to accommodate additional elements on the same

Whenever the browser window is resized while displaying the code provided below, I am facing an issue where the div expands to the max-width even when I do not want it to do so. When everything fits on a single line, the layout appears fine. However, upon ...

htmlcss

Create a counter using the data retrieved from the Axios fetch response

I have a task to fetch data from a back-end using axios and create a counter based on the number of completed tasks. The information needed for the counter is included in the response data from the back-end. However, I am facing difficulties in increment ...

javascriptreactjs

Modifying numerous array keys/names in JavaScript

Alright, I have an array named arrayObj containing three objects: arrayObj[0], arrayObj[1], and arrayObj[2]. All of these objects have the key name["user"] repeated three times. To change these key names using a function, here's what I've come up ...

javascriptarraysobjectkeyunderscore.js

Utilizing the Jquery ready method in conjunction with the load function

While utilizing the ready() method to access the DOM, I encountered an issue where jQuery was returning undefined when trying to access an element. Even after nesting the ready() function inside $(window).on("load", function()), there were still instances ...

javascriptjqueryhtml