Les couleurs des polygones se chevauchent lors du zoom dans la carte google

Question

J'ai déjà posté cette question sur Stackoverflow avec un titre différent, mais je n'ai pas obtenu beaucoup de réponses. Je la poste à nouveau cette fois-ci avec quelques précisions supplémentaires.

J'ai implémenté une carte google en utilisant l'API V3 js. Je dessine environ 500 polygones de code postal à l'intérieur de la carte. La coloration des polygones de code postal dépend de certaines conditions qui fonctionnent bien. Par exemple, j'attribue des couleurs distinctes à un ensemble de codes postaux. Mais le problème est que lorsque je zoome sur la carte, certaines des couleurs des polygones se superposent à d'autres couleurs de polygones.

Par exemple, je tire 30 codes postaux de ma base de données. Je divise ces 30 codes postaux en 5 régions (en fonction des ventes les plus élevées et les plus faibles). Chaque région sera marquée par une couleur particulière, donc dans ce cas, 30 polygones seront tracés avec 5 régions et 5 couleurs différentes. Maintenant, lorsque je zoome sur la carte, il n'y a pas de changement dans le regroupement, mais certains des polygones (peut-être 3-4) ont des couleurs qui se chevauchent avec d'autres polygones. Si la région numéro 3 a la couleur "jaune" dans la carte normale, lorsque je zoome sur la carte, certains des polygones de la région 3 sont recouverts par la couleur "rouge". Alors que la couleur "Rouge" appartient aux polygones du code postal de la région 1.

Voici le code

{% ifequal zip.rank 1 %}
    var fillColor = '#FF0000';
{% endifequal %}
{% ifequal zip.rank 2 %}
    var fillColor = '#FF00D3';
{% endifequal %}
{% ifequal zip.rank 3 %}
    var fillColor = '#BE4BAA';
{% endifequal %}
{% ifequal zip.rank 4 %}
    var fillColor = '#BE88B5';
{% endifequal %}
{% ifequal zip.rank 5 %}
    var fillColor = '#857081';
{% endifequal %}

var path = [
                {% for polycoord in zip.zip_info.zip_polygon %}
                    new google.maps.LatLng({{polycoord.1}}, {{polycoord.0}}),
                {% endfor %}
            ];
var polygon = new google.maps.Polygon(
    {
        path:path, 
        clickable:true,
        strokeColor: '#000000',
        strokeOpacity: 0.75,
        strokeWeight: 1,
        fillColor: fillColor,
        fillOpacity: 1,
    }

);
polygon.setMap(map);

Answer 1

J'ai trouvé la solution. Fondamentalement, toutes les couleurs étaient générées aléatoirement par un script côté serveur, et étaient passées au modèle de carte. Le script qui était utilisé pour générer des couleurs aléatoires, donnait parfois un code de couleur à 5 chiffres, que le navigateur n'était pas en mesure de comprendre. Ainsi, certaines des régions de polygones prenaient les couleurs des régions de polygones voisines. Maintenant, j'ai modifié le script côté serveur de sorte que si le script génère un code de couleur à 5 chiffres, alors un chiffre aléatoire supplémentaire sera ajouté au code de couleur, qui fera finalement un code de couleur valide.