how to use leaflet-contour plugin with this module?

[pablosettecase]

I would like to use the leaflet-contour plugin from https://github.com/JamesRunnalls/leaflet-contour/tree/master with this module, but don't know how. I know that other plugins like leaflet.heat have Nuxt composables created for them. Any tips, suggestions for how to get a plugin like leaflet-contour to work with either this module, or just get it to work with Nuxt without this module?

This is some code I have that was taken from the link above, but I cannot get it to work because I get a 500 Nuxt error "Map container not found.

Any help is greatly appreciated!

<template>
    <div name="mapid" id="mapid" style="width: 80vw; height: 80vh"></div>
</template>

<script setup>

const data = {
x: [
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
[8.475, 8.5, 8.525, 8.55, 8.575, 8.6, 8.625],
],
y: [
[47.42, 47.42, 47.42, 47.42, 47.42, 47.42, 47.42],
[47.4, 47.4, 47.4, 47.4, 47.4, 47.4, 47.4],
[47.38, 47.38, 47.38, 47.38, 47.38, 47.38, 47.38],
[47.36, 47.36, 47.36, 47.36, 47.36, 47.36, 47.36],
[47.34, 47.34, 47.34, 47.34, 47.34, 47.34, 47.34],
[47.32, 47.32, 47.32, 47.32, 47.32, 47.32, 47.32],
[47.3, 47.3, 47.3, 47.3, 47.3, 47.3, 47.3],
],
z: [
[null, null, null, null, null, null, null],
[null, null, null, 2, null, null, null],
[null, null, 2, 5, 2, null, null],
[null, 2, 5, 10, 5, 2, null],
[null, null, 2, 5, 2, null, null],
[null, null, null, 2, null, null, null],
[null, null, null, null, null, null, null],
],
};


const colors = [
  {
    color: "#053061",
    point: 0,
  },
  {
    color: "#09386d",
    point: 0.032258064516129,
  },
  {
    color: "#134c87",
    point: 0.0645161290322581,
  },
  {
    color: "#1d5fa2",
    point: 0.0967741935483871,
  },
  {
    color: "#276eb0",
    point: 0.129032258064516,
  },
  {
    color: "#337eb8",
    point: 0.161290322580645,
  },
  {
    color: "#3f8ec0",
    point: 0.193548387096774,
  },
  {
    color: "#569fc9",
    point: 0.225806451612903,
  },
  {
    color: "#71b0d3",
    point: 0.258064516129032,
  },
  {
    color: "#8dc2dc",
    point: 0.290322580645161,
  },
  {
    color: "#a2cde3",
    point: 0.32258064516129,
  },
  {
    color: "#b8d8e9",
    point: 0.354838709677419,
  },
  {
    color: "#cfe4ef",
    point: 0.387096774193548,
  },
  {
    color: "#ddebf2",
    point: 0.419354838709677,
  },
  {
    color: "#eaf1f5",
    point: 0.451612903225806,
  },
  {
    color: "#f7f6f6",
    point: 0.483870967741936,
  },
  {
    color: "#f9eee7",
    point: 0.516129032258065,
  },
  {
    color: "#fbe4d6",
    point: 0.548387096774194,
  },
  {
    color: "#fdd9c4",
    point: 0.580645161290323,
  },
  {
    color: "#f9c6ac",
    point: 0.612903225806452,
  },
  {
    color: "#f6b394",
    point: 0.645161290322581,
  },
  {
    color: "#f2a17f",
    point: 0.67741935483871,
  },
  {
    color: "#e8896c",
    point: 0.709677419354839,
  },
  {
    color: "#dd7059",
    point: 0.741935483870968,
  },
  {
    color: "#d25849",
    point: 0.774193548387097,
  },
  {
    color: "#c53e3d",
    point: 0.806451612903226,
  },
  {
    color: "#b82531",
    point: 0.838709677419355,
  },
  {
    color: "#a81529",
    point: 0.870967741935484,
  },
  {
    color: "#8d0c25",
    point: 0.903225806451613,
  },
  {
    color: "#730421",
    point: 0.935483870967742,
  },
  {
    color: "#67001f",
    point: 1,
  },
];

function getColor(value, min, max, colors) {
  function hex(c) {
    var s = "0123456789abcdef";
    var i = parseInt(c, 10);
    if (i === 0 || isNaN(c)) return "00";
    i = Math.round(Math.min(Math.max(0, i), 255));
    return s.charAt((i - (i % 16)) / 16) + s.charAt(i % 16);
  }
  function trim(s) {
    return s.charAt(0) === "#" ? s.substring(1, 7) : s;
  }
  function convertToRGB(hex) {
    var color = [];
    color[0] = parseInt(trim(hex).substring(0, 2), 16);
    color[1] = parseInt(trim(hex).substring(2, 4), 16);
    color[2] = parseInt(trim(hex).substring(4, 6), 16);
    return color;
  }
  function convertToHex(rgb) {
    return hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
  }

  if (value === null || isNaN(value)) {
    return "#ffffff";
  }
  if (value > max) {
    return colors[colors.length - 1].color;
  }
  if (value < min) {
    return colors[0].color;
  }
  var loc = (value - min) / (max - min);
  if (loc < 0 || loc > 1) {
    return "#fff";
  } else {
    var index = 0;
    for (var i = 0; i < colors.length - 1; i++) {
      if (loc >= colors[i].point && loc <= colors[i + 1].point) {
        index = i;
      }
    }
    var color1 = convertToRGB(colors[index].color);
    var color2 = convertToRGB(colors[index + 1].color);

    var f =
      (loc - colors[index].point) /
      (colors[index + 1].point - colors[index].point);
    var rgb = [
      color1[0] + (color2[0] - color1[0]) * f,
      color1[1] + (color2[1] - color1[1]) * f,
      color1[2] + (color2[2] - color1[2]) * f,
    ];

    return `#${convertToHex(rgb)}`;
  }
}
import L from 'leaflet';
import { ref } from 'vue';

var map = L.map("mapid").setView([46.402, 6.521], 11);

L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
{
  maxZoom: 18,
  attribution:
    'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: "mapbox/streets-v11",
  tileSize: 512,
  zoomOffset: -1,
}).addTo(map);

L.contour(data, {
  thresholds: 50,
  style: (feature) => {
    return {
      color: getColor(feature.geometry.value, 10.5, 13.6, colors),
      opacity: 0,
      fillOpacity: 1,
    };
  },
  onEachFeature: onEachContour(),
}).addTo(map);

function onEachContour() {
  return function onEachFeature(feature, layer) {
    layer.bindPopup(
      `<table><tbody><tr><td>${feature.value}°C</td></tr></tbody></table>`
    );
  };
}


</script>

[Maxel01]

There are two problems in your code.
First of all, your code is not SSR compatible (if you need that).

Leaflet needs document or window when importing which is not available on the server side.

To solve your problem, you need to move your leaflet code inside the onMounted hook, as the dom elements are not yet available in the setup function. That's why the map container is not found.
Take a look at the vue-leaflet components and how they are implemented.

To make the leaflet integration easier, it is recommended to use the LMap component and retrieve the leafletObject with the @ready hook. There you can create the L.contour instance.
Something like that:

<LMap ... @ready="ready">
  <LTileLayer ... />
</LMap>

function ready(leafletObject) {
  // your logic
}

Let me know if you need help with SSR.

[pablosettecase]

Thank you! I was able to replicate the example code for the lake using your suggestions and the Leaflet Nuxt module.

<template>
  <div style="height:100vh; width:100vw">
    <LMap
      ref="map"
      :zoom="10"
      :max-zoom="18"
      :center="[46.390022, 6.380434]"
      @ready="onMapReady"
    >
      <LTileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
        layer-type="base"
        name="OpenStreetMap"
      />

    </LMap>
  </div>
</template>

<script setup>

// copy data, colors, and getColor() from the lake example
// https://github.com/JamesRunnalls/leaflet-contour/blob/master/example/lake.html
const data = {...};
const colors = [...];
function getColor(value, min, max, colors) {...}

import { ref } from 'vue'
import 'leaflet-contour';

const map = ref(null)

const onMapReady = () => {

  function onEachContour() {
    return function onEachFeature(feature, layer) {
      layer.bindPopup(
        `<table><tbody><tr><td>${feature.value}°C</td></tr></tbody></table>`
      );
    };
  }

  L.contour(data, {
    thresholds: 50,
    style: (feature) => {
      return {
        color: getColor(feature.geometry.value, 10.5, 13.6, colors),
        opacity: 0,
        fillOpacity: 1,
      };
    },
    onEachFeature: onEachContour(),
  }).addTo(map.value.leafletObject);

}

[Maxel01]

Awesome 👌

[Maxel01]

@pablosettecase
Just in case you want to use leaflet v2 soon, I would be happy if you could contribute to the vue-leaflet-plugins wrapper and add your plugin there (in a more modular way). Just create an issue there if you are interested in it.

[pablosettecase]

@pablosettecase Just in case you want to use leaflet v2 soon, I would be happy if you could contribute to the vue-leaflet-plugins wrapper and add your plugin there (in a more modular way). Just create an issue there if you are interested in it.

Yes, I am interested! Thanks again.