<template>
  <div style="height: 600px; width: 100%">
    <l-map :zoom="5" :center="[-2.5, 118]">
      <l-tile-layer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        layer-type="base"
        name="OpenStreetMap"
      />
      <l-marker-rotate
        :lat-lng="[-3, 115]"
        rotationOrigin="top center"
      />
      <l-marker-rotate
        :lat-lng="[-3.5, 117]"
        rotationAngle="100"
      />
      <l-marker-rotate
        :lat-lng="[-4, 120]"
        rotationOrigin="bottom center"
        rotationAngle="172"
      >
        <l-tooltip>
          Tooltip
        </l-tooltip>
      </l-marker-rotate>
    </l-map>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { LMap, LTileLayer, LTooltip } from '@vue-leaflet/vue-leaflet';
import { LMarkerRotate } from 'vue-leaflet-rotate-marker';

import 'leaflet/dist/leaflet.css';

export default defineComponent({
  name: 'SamplePage',
  components: {
    LMap,
    LTileLayer,
    LTooltip,
    LMarkerRotate
  }
});
</script>