Move controls to a subfolder and use the composition API.

js/controls/heatmap_control.vue

@@ -0,0 +1,42 @@
+<template>
+  <mgl-custom-control position="top-right">
+    <button
+      :title="title"
+      class="maplibregl-ctrl-heatmap"
+      type="button"
+      @click="toggleHeatmap"
+    >
+      <span class="maplibregl-ctrl-icon">
+        <v-icon :color="iconColor" size="24px">{{ mdiBlur }}</v-icon>
+      </span>
+    </button>
+  </mgl-custom-control>
+</template>
+
+<script setup>
+import { ref, inject, computed, watch } from 'vue';
+import { MglCustomControl } from '@indoorequal/vue-maplibre-gl';
+import { useI18n } from 'vue-i18n';
+import { mdiBlur } from '@mdi/js';
+
+const { t } = useI18n();
+
+const displayHeatmap = ref(true);
+
+const iconColor = computed(() => {
+  return displayHeatmap ? 'primary' : '';
+});
+
+const title = computed(() => {
+  return displayHeatmap ? t('heatmap.hide') : t('heatmap.show');
+})
+
+function toggleHeatmap() {
+  displayHeatmap.value = !displayHeatmap.value;
+}
+
+const indoorequal = inject('indoorequal');
+watch(displayHeatmap, () => {
+  indoorequal.value.setHeatmapVisible(displayHeatmap.value);
+});
+</script>

js/language_control.vue → js/controls/language_control.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useControl } from '@indoorequal/vue-maplibre-gl';
 import { useI18n } from 'vue-i18n'
-import { updateStyle } from './style_language';
+import { updateStyle } from '../style_language';
 
 class LanguageControl {
   constructor(options) {

js/controls/level_control.vue

@@ -0,0 +1,88 @@
+<template>
+  <mgl-custom-control
+    class="maplibregl-ctrl level-ctrl"
+    position="bottom-right"
+  >
+    <v-btn
+      v-for="level in displayedLevels"
+      :color="level == value ? 'primary' : 'white'"
+      class="button d-block mb-2"
+      @click="setLevel(level)"
+    >
+      {{ level }}
+    </v-btn>
+  </mgl-custom-control>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from 'vue';
+import { MglCustomControl } from '@indoorequal/vue-maplibre-gl';
+
+const indoorequal = inject('indoorequal');
+
+const emit = defineEmits(['input', 'levels']);
+const props = defineProps({
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+const displayedLevels = ref([]);
+
+function sortLevels(a, b) {
+  if (isNaN(parseInt(a, 10))) {
+    if (a < b) {
+      return -1;
+    } else if (a > b) {
+      return 1;
+    }
+    return 0;
+  } else {
+    return a - b;
+  }
+}
+onMounted(() => {
+  const updateLevels = (levels) => {
+    displayedLevels.value = levels.sort(sortLevels).reverse();
+    if (displayedLevels.value.length > 0 && !displayedLevels.value.includes(indoorequal.value.level)) {
+      if (displayedLevels.value.includes('0')) {
+        setLevel('0');
+      } else {
+        setLevel(displayedLevels.value[displayedLevels.value.length - 1]);
+      }
+    }
+    emit('levels', levels);
+  }
+  updateLevels(indoorequal.value.levels);
+  indoorequal.value.setLevel(props.value);
+  indoorequal.value.on('levelchange', (level) => emit('input', level));
+  indoorequal.value.on('levelschange', (levels) => updateLevels(levels));
+});
+
+function setLevel(level) {
+  indoorequal.value.setLevel(level);
+}
+
+watch(
+  () => props.value,
+  (newLevel) => {
+    if (newLevel !== indoorequal.value.level) {
+      setLevel(newLevel);
+    }
+  }
+);
+</script>
+
+
+<style>
+.level-ctrl {
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+</style>
+<style scoped>
+.button {
+  margin: 0 auto;
+}
+</style>

js/map.vue

@@ -33,9 +33,9 @@ import IndoorEqual from 'maplibre-gl-indoorequal';
 import bbox from '@turf/bbox';
 import { mapStyle } from './maptiler';
 import { indoorEqualApiKey, tilesUrl } from '../config.json';
-import LanguageControl from './language_control';
-import LevelControl from './level_control';
-import HeatmapControl from './heatmap_control';
+import LanguageControl from './controls/language_control';
+import LevelControl from './controls/level_control';
+import HeatmapControl from './controls/heatmap_control';
 
 export default {
   components: {