1

I'm using ng-map in my web application. In the map view, I display different positions using marker. I want to change the color of each marker depending the filed isOpned that I have inside the object from where I get the positions. I tried to add background-color style to my marker but nothing happened.

This is my code:

<ng-map zoom-to-include-markers="auto" 
         id="map"
         map-type-id="ROADMAP"
         street-view-control-options="{position: 'LEFT_CENTER'}">

   <marker ng-repeat="p in paths" position="{{p.positions}}"></marker>

</ng-map>
Rohan Büchner
  • 5,333
  • 4
  • 62
  • 106
Ne AS
  • 1,490
  • 3
  • 26
  • 58

1 Answers1

1

Modifying code from ng maps (as no sample code added in post) this is idea

Plunker demo

JS

var app = angular.module('myApp', ['ngMap']);

app.controller('mapController', function($interval) {
  var vm = this;
  vm.positions =[
    [40.71, -74.21], [40.72, -74.20], [40.73, -74.19], [40.74, -74.18],
    [40.75, -74.17], [40.76, -74.16], [40.77, -74.15], [40.77, -74.15]
  ];
var colorsDynamic=['ff8a80','880e4f','4a148c','311b92','3d5afe','76ff03','f57c00','5d4037']
  $interval(function() {
    var numMarkers = Math.floor(Math.random() * 4)+4; //between 4 to 8 markers
    vm.positions = [];
    vm.icon=[];//empty array of icon
    for (i = 0; i < numMarkers; i++) {
      var lat = 40.71 + (Math.random() / 100);
      var lng = -74.21 + (Math.random() / 100);
      vm.positions.push([lat, lng]);
      //pushing dynamic icon color
      vm.icon.push('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|'+colorsDynamic[i]) 

    }
  }, 2000);
});

Html

<div ng-controller="mapController as vm">
<ng-map zoom="14" center="[40.71, -74.21]">
  <marker ng-repeat="p in vm.positions track by $index" position="{{p}}" icon="{{vm.icon[$index]}}"></marker>
</ng-map>

Deep 3015
  • 9,929
  • 5
  • 30
  • 54
  • thank you I test it and it works but I have some problems: because I'm using clusters https://ngmap.github.io/#/!marker-clusterer.html when I zoom to see the markers I got for example a green marker and below it a part of the default red one. – Ne AS May 12 '17 at 14:05
  • can you recreate plunker demo – Deep 3015 May 12 '17 at 14:21
  • I'm sorry I can't provide plunker demo now :/ – Ne AS May 12 '17 at 15:20
  • But since your answer responds to what I have specified in the issu, and I test it after removing the cluster code and it works, so I accept it :) – Ne AS May 12 '17 at 15:22
  • Thank you so much I found the solution for my second problem http://stackoverflow.com/questions/43942610/ngmap-cluster-change-markers-colors-after-zoom/43943423#43943423 . Thank you again! – Ne AS May 12 '17 at 17:31