1

I'm using NgMap and angular 1 to display a google map, and draw various shapes on it. I'm trying to change the color of the shape dynamically, by changing a scope variable.

In the template I have:

<shape id="circle" name="circle" fill-color='{{circle.color}}' stroke-color='{{circle.color}}' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
</shape>

and in the controller I create an object:

function CircleColorTestController($scope, $interval) {
    $scope.circle = {
        color: '#00FF00'
    };

    var colors = ['#FF0000', '#00FF00', '#0000FF'];
    var i = 0;

    $interval(function() {
        $scope.circle.color = colors[i];
        console.log('Changing color to: ' + $scope.circle.color);
        ++i;
        if (i > 2) {
            i = 0;
        }
    }, 1000);
}

Check out this plunkr: https://plnkr.co/edit/nx5i5h

The color of the circle should change every second, but it remains green. Is it even possible with NgMap? Is it a bug?

Thanks!

Krupesh Kotecha
  • 2,396
  • 3
  • 21
  • 40
nagyf
  • 859
  • 5
  • 17
  • No bug in your code , fill-color attribute is changing . But it is not getting changed because its not a css attribute. fill-color is used as a configuraton attritube. – Sasank Sunkavalli Sep 24 '16 at 10:06
  • 1
    Ok thanks, well it's not the best api then. It should be consistent, either all parameters should provide real time bindin or none of them. (e.g. binding position or radius works) – nagyf Sep 26 '16 at 07:17

2 Answers2

1

It might be possible that fill-color is not an angularjs directive that's why it not provide real time binding with scope variable.

Here is alternative way to create functionality that you want

angular.module('app', ['ngMap'])
  .controller('CircleColorTestController', CircleColorTestController);

CircleColorTestController.$inject = ['$scope', '$interval'];

function CircleColorTestController($scope, $interval) {
  $scope.circle = {
    color: 'red'
  };
  var colors = ['#FF0000', '#00FF00', '#0000FF'];
  var i = 0;
  $interval(function() {
    $scope.circle.visible = colors[i];
    ++i;
    if (i > 2) {
      i = 0;
    }
  }, 1000);
}
<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="ng-map@*" data-semver="1.7.12" src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
<link rel="stylesheet" href="style.css" />
<div ng-app="app" ng-controller="CircleColorTestController">
  <div map-lazy-load="https://maps.google.com/maps/api/js">
    <ng-map center="41,-87" zoom="11">
      <shape id="circle" ng-if="circle.visible == '#FF0000'" name="circle" fill-color='#FF0000' stroke-color='#FF0000' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
      </shape>

      <shape id="circle" ng-if="circle.visible == '#0000FF'" name="circle" fill-color='#0000FF' stroke-color='#0000FF' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
      </shape>

      <shape id="circle" ng-if="circle.visible == '#00FF00'" name="circle" fill-color='#00FF00' stroke-color='#00FF00' stroke-opacity="0.8" stroke-weight="2" center="[41,-87]" radius="4000" editable="false">
      </shape>

    </ng-map>
  </div>
</div>
Krupesh Kotecha
  • 2,396
  • 3
  • 21
  • 40
  • 1
    I accepted your answer, but in my application I chose a different solution. I get the map instance with `NgMap.getMap(...)` and find the circle instance with the correct ID in the shape array of the map instance, and call a `circle.set('fill-color', '#FF0000');` on the instance. – nagyf Sep 26 '16 at 07:21
0

nagyf's solution works:

NgMap.getMap().then(map=>{map.shapes.circle.set('fillColor', '#FF0000')})

Plunker: https://plnkr.co/edit/8m0gU1wqUETR8IjDoqvc?p=preview

nmattise
  • 396
  • 3
  • 4