CODEWITHSUNDEEP
leaflet
neubert
neubert

Reputation: 16792

changing the color of polylines and marker icon's when the layer changes?

Let's say I'm a purple polyline and am using a purple icon for markers with one layer but wanted to use orange polylines and orange marker icon's for another layer. How would I do that? Is there an onlayerchange event? But even if there were how could I change all the icon's for all the markers? Alternatively, maybe I could delete all the markers and then replace them, albeit with a different icon, but idk how to delete markers, en masse or otherwise.

Any ideas?

Upvotes: 0

Views: 513

Answers (1)

kboul
kboul

Reputation: 14570

I am not sure if I understood correctly but here is what you can do.

If you want to toggle between markers with polylines and assign different color you can use this plugin and return icon markers by passing the color.

 const icon = (color) => L.icon({
        iconSize: [25, 41],
        iconAnchor: [10, 41],
        popupAnchor: [2, -40],
        iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
        shadowUrl: "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
 });

and then you have the latlngs and assing to the markers an icon with the prefered color

var places1 = [
        { latlng: [39.61, -105.02], popup: 'This is Littleton, CO.'},
        { latlng: [39.74, -104.99], popup: 'This is Denver, CO.'},
        {latlng: [39.73, -104.8], popup: 'This is Aurora, CO.'}
];
      
 places1.forEach(place => L.marker(place.latlng, {
      icon: icon('violet')
 }).bindPopup(place.popup).addTo(cities1))

and here define the polyline color

L.polyline(places1.map(({latlng}) => latlng), {
    color: 'purple'
  }).addTo(cities1);

Similarly you can follow the same steps for any other overlay

<!DOCTYPE html>
<html>

<head>

  <title>Layers Control Tutorial - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    
    #map {
      width: 600px;
      height: 400px;
    }
  </style>


</head>

<body>

  <div id='map'></div>

  <script>
    var cities1 = L.layerGroup();
    var cities2 = L.layerGroup();

    var map = L.map('map', {
      center: [39.73, -104.99],
      zoom: 10,
    });

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

    const icon = (color) => L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
      shadowUrl: "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
    });

    var places1 = [{
        latlng: [39.61, -105.02],
        popup: 'This is Littleton, CO.'
      },
      {
        latlng: [39.74, -104.99],
        popup: 'This is Denver, CO.'
      },
      {
        latlng: [39.73, -104.8],
        popup: 'This is Aurora, CO.'
      }
    ];

    places1.forEach(place => L.marker(place.latlng, {
      icon: icon('violet')
    }).bindPopup(place.popup).addTo(cities1))

    var places2 = [{
        latlng: [39.77, -105.23],
        popup: 'This is Golden, CO.'
      },
      {
        latlng: [39.75, -105.16],
        popup: 'This is Applewood, CO.'
      }
    ];

    places2.forEach(place => L.marker(place.latlng, {
      icon: icon('orange')
    }).bindPopup(place.popup).addTo(cities2))




    L.polyline(places1.map(({
      latlng
    }) => latlng), {
      color: 'purple'
    }).addTo(cities1);

    L.polyline(places2.map(({
      latlng
    }) => latlng), {
      color: 'orange'
    }).addTo(cities2);

    var overlays = {
      "cities1": cities1.addTo(map),
      "cities2": cities2
    };

    L.control.layers(null, overlays).addTo(map);
  </script>



</body>

</html>

For the scenario you want to change the color upon baselayer change: you can still reuse icon() function and use now the follow chunk to change the color dynamically when the layer is changed by listening to map's baselayerchange event

 function addMarkersAndPolyline(color) {
        places.forEach(place => L.marker(place.latlng, {
          icon: icon(color)
        }).bindPopup(place.popup).addTo(cities))

        L.polyline(places.map(({
          latlng
        }) => latlng), {
          color
        }).addTo(cities);

  }


<!DOCTYPE html>
<html>

<head>

  <title>Layers Control Tutorial - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    
    #map {
      width: 600px;
      height: 400px;
    }
  </style>


</head>

<body>

  <div id='map'></div>

  <script>
    var cities = L.layerGroup();

    var map = L.map('map', {
      center: [39.73, -104.99],
      zoom: 10,
    });

    var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

    var grayscale = L.tileLayer(mbUrl, {
        id: 'mapbox/light-v9',
        tileSize: 512,
        zoomOffset: -1,
        attribution: mbAttr
      }),
      streets = L.tileLayer(mbUrl, {
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        attribution: mbAttr
      });

    var baseLayers = {
      "Grayscale": grayscale.addTo(map),
      "Streets": streets
    };

    const icon = (color) => L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
      shadowUrl: "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
    });

    var places = [{
        latlng: [39.61, -105.02],
        popup: 'This is Littleton, CO.'
      },
      {
        latlng: [39.74, -104.99],
        popup: 'This is Denver, CO.'
      },
      {
        latlng: [39.73, -104.8],
        popup: 'This is Aurora, CO.'
      }
    ];


    function addMarkersAndPolyline(color) {
      places.forEach(place => L.marker(place.latlng, {
        icon: icon(color)
      }).bindPopup(place.popup).addTo(cities))

      L.polyline(places.map(({
        latlng
      }) => latlng), {
        color
      }).addTo(cities);

    }

    addMarkersAndPolyline('violet')


    map.on('baselayerchange', function(e) {
      cities.clearLayers();

      if (e.name === 'Streets') {

        addMarkersAndPolyline('orange');
        return
      }
      addMarkersAndPolyline('violet');

    });

    var overlays = {
      "cities1": cities.addTo(map),
    };

    L.control.layers(baseLayers, overlays).addTo(map);
  </script>



</body>

</html>

Upvotes: 1

Related Questions