Drawing polygons in Ionic2 with Google maps

Question

I am building an Ionic 2 application wherein I have a google map. I want to draw polygon in this map and then calculate it's area and save those lat, langs (exactly as described in this solution: calculate area of a drawn polygon on google map javascript).

As I am new to typescript and Angular2 as well, I seek help to get it working.

So far my component.ts looks like this:

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';


@Component({
  templateUrl: 'build/pages/start/start.html'
})

export class StartPage {

  public selectedShape: any

  constructor( private navController: NavController, private platform: Platform) {

    // google.maps.event.addDomListener(window, 'load', this.initializeMap);
    this.initializeMap();

  }

  clearSelection() {
    if (this.selectedShape) {
      this.selectedShape.setEditable(false);
      this.selectedShape = null;
    }
  }

  setSelection(shape) {

    console.log("Set selection")
    this.clearSelection();
    this.selectedShape = shape;
    shape.setEditable(true);
    google.maps.event.addListener(shape.getPath(), 'set_at', this.calcar);
    google.maps.event.addListener(shape.getPath(), 'insert_at', this.calcar);
  }

  calcar() {
    var area = google.maps.geometry.spherical.computeArea(this.selectedShape.getPath());
    document.getElementById("area").innerHTML = "Area =" + area.toFixed(2);
  }

  deleteSelectedShape() {
    if (this.selectedShape) {
      this.selectedShape.setMap(null);
    }
  }

  initializeMap() {

    this.platform.ready().then(() => {
      var minZoomLevel = 15;

      var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: minZoomLevel,
        center: new google.maps.LatLng(52.5200, 13.4050),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        zoomControl: true    
      });

      var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true
      };

      let drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        polygonOptions: polyOptions,
        map: map
      });

      google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {

      if (e.type != google.maps.drawing.OverlayType.MARKER) {
      // Switch back to non-drawing mode after drawing a shape.
      drawingManager.setDrawingMode(null);

      // Add an event listener that selects the newly-drawn shape when the user
      // mouses down on it.
      var newShape = e.overlay;
      newShape.type = e.type;
      google.maps.event.addListener(newShape, 'click', function() {
        this.setSelection(newShape);
      });

      var area = google.maps.geometry.spherical.computeArea(newShape.getPath());
      document.getElementById("area").innerHTML = "Area =" + area.toFixed(2);

      console.log(area)

      this.setSelection(newShape);
    }
  });

      google.maps.event.addListener(drawingManager, 'drawingmode_changed', this.clearSelection);
      google.maps.event.addListener(map, 'click', this.clearSelection);
      google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', this.deleteSelectedShape);

      console.log(drawingManager)
    });

  }

}

My HTML:

<ion-navbar *navbar>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Start</ion-title>
</ion-navbar>


<ion-content padding class="page1">

    <!-- <div padding>
        <img src="images/icon_transperent.png" width="200"/>
    </div> -->

    <div id="map_canvas"></div>

    <div>
    <button id="delete-button">Delete Shape</button>
        <button id="calculate" (click)="calcar()">Area</button>
        <div id="area"></div>
    </div> 

</ion-content>

So far my screen looks as follows, there is no drawing manager to select and the buttons basically do nothing:

UPDATE

Using instead of could bring the drawing manager on the screen however none of the functions (i.e. delete shape, overlayComplete etc.) work, also few false assignments, declarations when corrected now give me area on oberlaycomplete. However clearSelection, setSelection, deleteSelection do not work and I get Uncaught TypeError: this.setSelection is not a function error

score 0 · Answer 1 · answered Jul 06 '16 at 16:05

Following is the almost working solution in typescript:

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';


@Component({
  templateUrl: 'build/pages/start/start.html'
})

export class StartPage {

  selectedShape: any;

  constructor( private navController : NavController, private platform : Platform) {

    this.initializeMap();

  }

  clearSelection = (shape): void => {

    if(shape) {
      shape.setEditable(false);
      shape = null;
      this.selectedShape=shape
    }
  }

  setSelection = (shape): void => {

    this.clearSelection(shape);
    var shape = shape;
    this.selectedShape=shape;

    console.log(shape.getPath())

    shape.setEditable(true);
    google.maps.event.addListener(shape.getPath(), 'set_at', ()=>{this.calcar(shape)});
    google.maps.event.addListener(shape.getPath(), 'insert_at', ()=>{this.calcar(shape)});
  }

  calcar= (shape): void => {

    var shape = shape

    var area = google.maps.geometry.spherical.computeArea(shape.getPath());
    document.getElementById("area").innerHTML = "Area =" + area.toFixed(2);

    this.selectedShape=shape
  }

  deleteSelectedShape = (): void => {

    if (this.selectedShape) {
      this.selectedShape.setMap(null);
    }
  }

  initializeMap = (): void => {

    var newShape
    var map
    var drawingManager

    this.platform.ready().then(() => {
      var minZoomLevel = 15;

      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: minZoomLevel,
        center: new google.maps.LatLng(52.5200, 13.4050),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        zoomControl: true    
      });

      var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true
      };

      drawingManager = new google.maps.drawing.DrawingManager({
        drawingControl: true,
        drawingControlOptions: {
          drawingModes: [
          google.maps.drawing.OverlayType.POLYGON,   
          ]
        },
        polygonOptions: polyOptions,
        map: map
      });

      google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {

        this.selectedShape=e.overlay

        if (e.type != google.maps.drawing.OverlayType.MARKER) {
      // Switch back to non-drawing mode after drawing a shape.
      drawingManager.setDrawingMode(null);

      // Add an event listener that selects the newly-drawn shape when the user
      // mouses down on it.
      newShape = e.overlay;
      newShape.type = e.type;

      google.maps.event.addListener(newShape, 'click', ()=> {

        this.setSelection(newShape);


      });

      var area = google.maps.geometry.spherical.computeArea(newShape.getPath());
      document.getElementById("area").innerHTML = "Area =" + area.toFixed(2);

      () => {this.setSelection(newShape);}
    }
  });

      google.maps.event.addListener(map, 'click',  ()=>{this.clearSelection(newShape);});
      google.maps.event.addDomListener(document.getElementById('delete-button'), 'click',  ()=>{this.deleteSelectedShape();});

    });

  }

}

Drawing polygons in Ionic2 with Google maps

UPDATE

1 Answers1