How to calculate the center of ngmap polygon?

Question

I am using ngmap and whenever i import KML polygon file the polygon is drown on the map. I have an issue concerning zooming on the polygon. Is there any way to calculate the polygon center (lattitude and longitude) ? if not is there anyway to zoom on the polygon after drawing it on the ngmap.

Thank you

score 0 · Answer 1 · answered Jun 19 '17 at 15:18

Whenever KML layer is added and the preserve-viewport attribute of kml-layer directive is set to true, the map is automatically getting centered based on layer viewport (it also means there is no need to specify the center explicitly)

To determine KML layer center:

1) set id attribute of kml-layer directive to reference KML Layer

<kml-layer preserve-viewport="true" id="myLayer" url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"></kml-layer>

2) once the layer is rendered, get the instance of KML layer and then the center via google.maps.KmlLayer.getDefaultViewport function:

NgMap.getMap().then(function(map) {
        var layer = map.kmlLayers["myLayer"]
        var center = layer.getDefaultViewport().getCenter();       
});

Example

angular.module('mapApp', ['ngMap'])
    .controller('mapCtrl', function($scope, NgMap) {

        NgMap.getMap().then(function(map) {
            $scope.map = map;
            var layer = map.kmlLayers["myLayer"]
            var center = layer.getDefaultViewport().getCenter();
            console.log(center.toString());  //
            map.fitBounds(layer.getDefaultViewport()); 
        });
        
    });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>


<div ng-app="mapApp" ng-controller="mapCtrl">
  <ng-map center="21.876,-27.624" zoom="5" map-type-id="HYBRID" style="display:block; width: 100%; height:100%;">
    <kml-layer preserve-viewport="true" id="myLayer" url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"></kml-layer>
  </ng-map>
</div>

How to calculate the center of ngmap polygon?

1 Answers1