Change weight value of polylie bu using a slider

Question

I have a map with travel routes on it, they are divided into colours according to the type of transport. These lines had a weight of 2 and I increased them to 4. But I want to make them flexible for the user by means of a slider (rangeCtrl). I have tried the following in some different variations:

<script>
var linekleur = '<?php printf($KC) ?>';
if (linekleur == "T") {
var polyline_options = {
    weight: 4,
    opacity: 1,
    dashArray: '2, 8',
    lineCap: 'square',  
    color: '<?php printf($$KlCo) ?>'
};  
}else{
var polyline_options = {
    weight: 4,
    opacity: 1,
    color: '<?php printf($$KlCo) ?>'
};
};
var latlngs = [<?php printf($xyz_range1) ?>];
var polyline = L.polyline(latlngs, polyline_options).bindLabel('<?php printf($LineInfo) ?>').addTo(daggroep_<?php printf($Reisdag) ?>);
function SetupPolylineOptions(value) {
    polyline.setStyle(weight);
    };
</script>

I am using this command to send a value to the function.:

<input id='rangeCtrl' type='range' min='1' max='10' step='1' value='8' title='weight' width='20px' onchange='SetupPolylineOptions(value)' />

See also: Example of map Look on the right in the Layer-menu

Answer 1

I hope the code below helps. I will not explain because the code is very simple.

let config = {
  minZoom: 7,
  maxZoom: 18,
};
const zoom = 18;
const lat = 52.22977;
const lng = 21.01178;

const map = L.map("map", config).setView([lat, lng], zoom);

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

const polyline = [
  {
    color: "blue",
    weight: 5,
    className: "polyline-1",
    poly: [
      [52.23006352084023, 21.010225789556603],
      [52.22957413298696, 21.011073195881316],
      [52.229419761202614, 21.012607108595603],
      [52.22977120256996, 21.013631504848867],
    ],
  },
  {
    color: "red",
    weight: 3,
    className: "polyline-2",
    poly: [
      [52.229225974585816, 21.009882536361822],
      [52.229225974585816, 21.010601222738426],
      [52.22904532528293, 21.012001052173517],
      [52.22912415416001, 21.01340624493978],
    ],
  },
];

polyline.forEach(({ color, weight, className, poly }) => {
  const ply = L.polyline(poly, {
    color,
    weight,
    className,
  });

  ply.addTo(map);
});

const rangeCtrl = document.querySelector("#rangeCtrl");

rangeCtrl.addEventListener("change", (e) => {
  const getAllCheckbox = document.querySelectorAll(".checkply:checked");

  changeWeightPolyline(getAllCheckbox, e.target.value);
});

function changeWeightPolyline(getAllCheckbox, value) {
  getAllCheckbox.forEach(({ id }) => {
    map.eachLayer((layer) => {
      if (layer instanceof L.Polyline) {
        const checkIfMarkerExistOnMap = layer.options.className.includes(id);

        if (!checkIfMarkerExistOnMap) return;
        console.log(layer);
        layer.setStyle({ weight: value });
      }
    });
  });
}

*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,
html,
#map {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

#rangeCtrl {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 999999;
}

 <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
    />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    
    <div class="wrapper">
      <input
        id="rangeCtrl"
        type="range"
        min="1"
        max="10"
        step="1"
        value="8"
        title="weight"
        width="20px"
      />

      <label>
        <input type="checkbox" id="polyline-1" class="checkply" checked />
        <span>polyline-1</span>
      </label>
      <label>
        <input type="checkbox" id="polyline-2" class="checkply" checked />
        <span>polyline-2</span>
      </label>
    </div>
    <div id="map"></div>

As for your code, maybe the following modification will help

onchange=SetupPolylineOptions(this.value)

function SetupPolylineOptions(value) {
 polyline.setStyle({weight: value});
};

EDIT: SECOND SOLUTION

let config = {
  minZoom: 7,
  maxZoom: 18,
};
const zoom = 18;
const lat = 52.22977;
const lng = 21.01178;

const map = L.map("map", config).setView([lat, lng], zoom);

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

const polyline = [
  {
    color: "blue",
    weight: 5,
    className: "polyline-1",
    poly: [
      [52.23006352084023, 21.010225789556603],
      [52.22957413298696, 21.011073195881316],
      [52.229419761202614, 21.012607108595603],
      [52.22977120256996, 21.013631504848867],
    ],
  },
  {
    color: "red",
    weight: 3,
    className: "polyline-2",
    poly: [
      [52.229225974585816, 21.009882536361822],
      [52.229225974585816, 21.010601222738426],
      [52.22904532528293, 21.012001052173517],
      [52.22912415416001, 21.01340624493978],
    ],
  },
];

const checkboxesWrapper = document.querySelector(".checkboxes-wrapper");

polyline.forEach(({ color, weight, className, poly }) => {
  const ply = L.polyline(poly, {
    color,
    weight,
    className,
  });

  const templateCheckbox = `
    <label>
      <input type="checkbox" id="${className}" class="checkply" checked />
      <span>${className}</span>
    </label>`;

  checkboxesWrapper.insertAdjacentHTML("beforeend", templateCheckbox);

  ply.addTo(map);
});

const rangeCtrl = document.querySelector("#rangeCtrl");

rangeCtrl.addEventListener("change", (e) => {
  const getAllCheckbox = document.querySelectorAll(".checkply:checked");

  changeWeightPolyline(getAllCheckbox, e.target.value);
});

function changeWeightPolyline(getAllCheckbox, value) {
  getAllCheckbox.forEach(({ id }) => {
    map.eachLayer((layer) => {
      if (layer instanceof L.Polyline) {
        const checkIfMarkerExistOnMap = layer.options.className.includes(id);

        if (!checkIfMarkerExistOnMap) return;
        console.log(layer);
        layer.setStyle({ weight: value });
      }
    });
  });
}

*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,
html,
#map {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

.wrapper {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 999999;
  background: #fff;
  padding: 5px;
}

.checkboxes-wrapper {
  display: flex;
  flex-direction: column;
}

<link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
    />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    
    <div class="wrapper">
      <input
        id="rangeCtrl"
        type="range"
        min="1"
        max="10"
        step="1"
        value="8"
        title="weight"
        width="20px"
      />

      <div class="checkboxes-wrapper"></div>
    </div>
    <div id="map"></div>