0

does anyone know if it is possible to have text inside a shape with ng-map.

<ng-map default-style="true" zoom="18" center="53.25564575, -113.81401062" map-type-id="SATELLITE">
  <shape name="rectangle"
    editable="true"
    draggable="true"
    bounds="[[53.2559199723254, -113.81282455825806],[53.25598021665402, -113.81252316761015 ]]"
    on-bounds_changed="vm.boundsChanged()"
    stroke-color="#333"
   stroke-opacity="0.9"
   stroke-weight="2"
   fill-color="#FF0000"
   fill-opacity="0.8"
    >
  </shape>
</ng-map>

any ideas how?

user2062455
  • 411
  • 5
  • 14
  • Where is `ng-map` coming from? Could you provide more information and maybe a JSFiddle to demonstrate your problem? With only the template above, nobody wont be able to help you. – LordTribual May 29 '16 at 10:29
  • I should have mentioned that ng-map is an angular directive. https://ngmap.github.io/. – user2062455 May 30 '16 at 01:28
  • Can you tell me please how did you get the coordinates when the shape is edited? – Ne AS May 05 '17 at 14:01

1 Answers1

1

This is how I solved this problem:

first, I added my shapes normally:

<shape ng-repeat="zone in mapViewCtrl.displayedZones" name="polygon" fill-color="{{zone.hexColor}}" stroke-color="{{zone.hexColor}}" stroke-opacity="{{zone.fillColor.a/100}}" stroke-weight="2" paths="{{zone.paths}}"></shape>'

then calculated the average of points, to get a point around the centre:

getAveragePoint(points) {
    var x = 0;
    var y = 0;
    let n = points.length;
    for (let point of points) {
        x += point[0];
        y += point[1];
    }
    return [x / n, y / n];
}

then I added a custom marker at the centre point to show my text:

<custom-marker ng-repeat="zone in mapViewCtrl.displayedZones" position="{{zone.center}}"><div class="zone-title"><b>{{zone.name}}</b></div></custom-marker>

I hope this help

Salam0smy
  • 31
  • 3