<template>
  <div>
    <div v-if="arrprovince" id="map" :style="`height:${myheight()}px; width:99%`">
    </div>

    <!--
    <div :style="`height:${myheight()}px; width:99%`">
      <l-map
        v-model="zoom"
        v-model:zoom="zoom"
        :center="[42.71, 12.934]"
        @move="log('move')"
        @click="getCoordinates"
      >
        <l-tile-layer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        ></l-tile-layer>
        <l-control-layers />
        <span v-for="provincia in arrprovince" :key="provincia.nome">
          <l-marker-cluster :options="clusterOptions">
            <l-marker
              v-if="provincia.userCount > 0"
              :lat-lng="[provincia.lat, provincia.long]"
            >
              <l-popup
                >{{ provincia.descr }}:
                {{ provincia.userCount }} utenti</l-popup
              >
            </l-marker>
          </l-marker-cluster>
        </span>

      </l-map>
      <button @click="changeIcon">New kitten icon</button>
    </div>
    -->
  </div>
</template>
<script lang="ts" src="./CMapUsers.ts">
</script>

<style lang="scss" scoped>
@import './CMapUsers.scss';
</style>
