j20mc / Nativescript-Danem-Google-Maps-Utils

Nativescript Google-maps-utils android & IOS
The Unlicense
6 stars 6 forks source link

Remove heatmap not working correctly #7

Closed mouadhkaabachi closed 3 years ago

mouadhkaabachi commented 3 years ago

Hi,

when I removed a heatmap (with heatmaps.map = null) and created a new one (setupHeatmap...), I found that the old one still exists here the code

<template>
  <Page actionBarHidden="true" class="page">
    <AbsoluteLayout>
      <MapView
        width="100%" height="100%"
        :latitude="latitude"
        :longitude="longitude"
        :zoom="12"
        @mapReady="mapReady"
      />
      <DockLayout width="100%" top="50" height="50" stretchLastChild="false">
        <Button
          dock="left"
          @tap="newHeatmap"
          class="danger-btn"
          height="40"
          text="new heatmap"
        ></Button>
      </DockLayout>
    </AbsoluteLayout>

  </Page>
</template>

<script>
  const Color = require("tns-core-modules/color").Color;
  import {Position, Marker} from "nativescript-google-maps-sdk";

  var GoogleMapsUtils = require("nativescript-danem-google-maps-utils");

  export default {
    data() {
      return {
        latitude: 48.847949,
        longitude: 2.336561,
        positions: [],
        heatmaps: null,
      };
    },
    methods: {
      newHeatmap() {
        // this.heatmaps.removeHeatmap() ->  this.heatmaps.removeHeatmap is not a function. (In 'this.heatmaps.removeHeatmap()', 'this.heatmaps.removeHeatmap' is undefined)
        this.heatmaps.map = null
        this.positions = []
        this.positions.push(Position.positionFromLatLng(
          48.862429, 2.346419
        ))
        this.heatmaps = GoogleMapsUtils.setupHeatmap(
          this.mapView,
          this.positions,
          [
            new Color("#ffef00"),
            new Color("#ff0000")

          ], [0.3, 0.5]
        );
      },
      mapReady(args) {
        this.mapView = args.object;

        this.positions.push(Position.positionFromLatLng(
          48.875424, 2.298762
        ))
        this.heatmaps = GoogleMapsUtils.setupHeatmap(
          this.mapView,
          this.positions,
          [
            new Color("#ffef00"),
            new Color("#ff0000")

          ], [0.3, 0.5]
        );
      },
    },
  };
</script>

<style scoped>
</style>