I know very little about HTML but I am tasked to try to find a solution to make this code more efficient.enter image description here
I have coordinates for signs in different districts, it is limited to 6 but can be even up to 50 later on. coDist1 -> coDist6 variables have been created, and all values are the same but the colors need to change for each.
To save time and be more efficient I want to have a for loop, but I am struggling to conceptualize
- how to make the for loop have n length (how do I count the districts) and
- how to display the values inside the loop (all values are the same except the colors that change)
Thank you for any advice/help
Edit: This is the code for 1 district
var coDist1Coords =
[ { lat: 32.821687, lng: -85.21314 }
, { lat: 32.820244, lng: -85.21176 }
, { lat: 32.821182, lng: -85.20996 }
, { lat: 32.821182, lng: -85.20782 }
, { lat: 32.82111, lng: -85.20576 }
, { lat: 32.821903, lng: -85.20378 }
, { lat: 32.822696, lng: -85.20181 }
, { lat: 32.823418, lng: -85.20035 }
];
var coDist1 = new google.maps.Polygon(
{ paths : coDist1Coords
, strokeColor : 'red'
, strokeOpacity : 0.8
, strokeWeight : 2
, fillColor : 'red'
, fillOpacity : 0.35
});
I have tried this but it doesn't seem to work:
var color = ['red', 'green', 'yellow', 'blue', 'orange', 'brown']
for (var i = 0; i < 6; i ){
var coDist[i]= new google.maps.Polygon(
paths: coDist[i]Coords,
strokeColor: color[i],
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: color[i],
fillOpacity: 0.35
)
};
CodePudding user response：
you can use an IIFE function to prtoct your code:
const getColor = (() =>
{
const colors = ['red','blue','green', 'orange', 'grey', 'yellow' ];
let indx = -1 colors.length;
return {
new()
{
indx = indx % colors.length // circurlar loop on colors
return colors[indx]
},
current()
{
return colors[indx]
}
}
})()
usage:
var XXX = new google.maps.Polygon(
{ paths : coDist1Coords
, strokeColor : getColor.new() // <-- get new color
, strokeOpacity : 0.8
, strokeWeight : 2
, fillColor : getColor.current() // <-- get current color
, fillOpacity : 0.35
});
if you want to test / verify...
const getColor = (() =>
{
const colors = ['red','blue','green', 'orange', 'grey', 'yellow' ];
let indx = -1 colors.length;
return {
new()
{
indx = indx % colors.length // circurlar loop on colors
return colors[indx]
},
current()
{
return colors[indx]
}
}
})()
let num = 0
console.log( num, getColor.new(), getColor.current() )
console.log( num, getColor.new(), getColor.current() )
console.log( num, getColor.new(), getColor.current() )
console.log( num, getColor.new(), getColor.current() )
console.log( num, getColor.new(), getColor.current() )
console.log( num, getColor.new(), getColor.current() )
console.log( num, getColor.new(), getColor.current() )
console.log( num, getColor.new(), getColor.current() )
console.log( num, getColor.new(), getColor.current() ).as-console-wrapper {max-height: 100% !important;top: 0;}
.as-console-row::after {display: none !important;}CodePudding user response：
So let's push all your districts with their coordinates in an array calles listDistrictCoordinates. So that it will become a list that contains all your district variables. If we then want to know/use the coordinates from lets say the first district in our list, then all we need to call is listDistrictCoordinates[0].
Let's also push all your colors in an array called listColors. If we then need to use the first color we can just call listColors[0].
The same way we can use an array that contains all these variables for the goolge maps polygons, lets call that one listDistrictPolygons. As we want to use a loop to create those polygon variables, we first create an empty list. Then after we create the polygon variable for each district we will add/push that polygon variable in the list (array). So after the loop that creates all those polygon variables for each districht we will endup with a list with all districtPolygon variables. And the first districtPolygon variable in the listDistrictPolygonsis the one corresponding with the first districtCoordinates in the listDistrictCoordinates.
If you want to check the first districtCoordinate in your list use listDistrictCoordinates[0] If you want to check the first districtPolygon in the other list use listDistrictPolygons[0]. And for the second one use [1], etc.
/*
Create your variables coordinates
call the first one district0,
then they'll al be the same number in the array
*/
let district0Coordinates =
[ { lat: 32.821687, lng: -85.21314 }
, { lat: 32.820244, lng: -85.21176 }
, { lat: 32.821182, lng: -85.20996 }
, { lat: 32.821182, lng: -85.20782 }
, { lat: 32.82111, lng: -85.20576 }
, { lat: 32.821903, lng: -85.20378 }
, { lat: 32.822696, lng: -85.20181 }
, { lat: 32.823418, lng: -85.20035 }
];
let district1Coordinates =
[ { lat: 33.821687, lng: -86.21314 }
, { lat: 33.820244, lng: -86.21176 }
, { lat: 33.821182, lng: -86.20996 }
, { lat: 33.821182, lng: -86.20782 }
, { lat: 33.82111, lng: -86.20576 }
, { lat: 33.821903, lng: -86.20378 }
, { lat: 33.822696, lng: -86.20181 }
, { lat: 33.823418, lng: -86.20035 }
];
/*
Create your arrays,
You can fill the ones for your coordinates and your colors.
You'll need an empty one for your polygons
(as they still need to be created by a loop)
*/
let listDistrictCoordinates = [district0Coordinates, district1Coordinates];
let listColors = ['red', 'blue'];
let listDistrictPolygons = [];
/*
Use a loop to create the districtPolygons.
It will loop as often as there are variable coordinates in the listDistrictCoordinates
If we looping through the first coordinates (i==0) we will use
the first element in the listDistrictCoordinates[0] and the listColors[0]
If we're looping through the second district coordinates (i==1)
the second element from the listDistrictCoordinates[1] and listColors[1] is used
*/
for(let i=0; i<listDistrictCoordinates.length; i ) {
let districtPolygon = new google.maps.Polygon(
{ paths : listDistrictCoordinates[i]
, strokeColor : listColors[i]
, strokeOpacity : 0.8
, strokeWeight : 2
, fillColor : listColors[i]
, fillOpacity : 0.35
});
listDistrictPolygons.push(districtPolygon);
}