OpenLayers: How to draw multiple zipcodes with multiple colors

Question

I have well-Known Text (Wkt) for 2 zipcodes, it could be for more but I want to draw 2 zipcodes first, how to draw them with boundaries and how to set the color for each zip code different than the other.

for example:

ZipCode-46530:
POLYGON((-86.2175 41.76,-86.1278 41.7605,-86.1271 41.7605,-86.1254 41.7605,-86.125 41.7605,-86.0556 41.7605,-86.0556 41.7605,-86.0549 41.7593,-86.0556 41.7541,-86.0561 41.7535,-86.035 41.7535,-86.0281 41.7461,-86.0429 41.7463,-86.0425 41.7264,-86.0502 41.7312,-86.0564 41.7311,-86.0558 41.728,-86.0493 41.7206,-86.0493 41.7206,-86.0581 41.7162,-86.0622 41.7147,-86.0622 41.7096,-86.0673 41.7096,-86.0703 41.713,-86.0766 41.7182,-86.0767 41.7241,-86.0962 41.7241,-86.0962 41.7241,-86.1129 41.7241,-86.1232 41.7198,-86.1383 41.7162,-86.149 41.713,-86.1584 41.7128,-86.1608 41.7095,-86.1699 41.7094,-86.1716 41.7126,-86.1716 41.7164,-86.1783 41.7158,-86.178 41.72,-86.1878 41.7199,-86.1879 41.7236,-86.1901 41.7236,-86.1913 41.7214,-86.1913 41.7214,-86.1921 41.7233,-86.2039 41.7231,-86.2038 41.7268,-86.2075 41.7332,-86.2067 41.7343,-86.2066 41.7353,-86.2113 41.7395,-86.2111 41.7426,-86.2087 41.7431,-86.2087 41.7451,-86.2173 41.7451,-86.2173 41.7451,-86.2175 41.76,POLYGON((-86.2175 41.76,-86.1278 41.7605,-86.1271 41.7605,-86.1254 41.7605,-86.125 41.7605,-86.0556 41.7605,-86.0556 41.7605,-86.0549 41.7593,-86.0556 41.7541,-86.0561 41.7535,-86.035 41.7535,-86.0281 41.7461,-86.0429 41.7463,-86.0425 41.7264,-86.0502 41.7312,-86.0564 41.7311,-86.0558 41.728,-86.0493 41.7206,-86.0493 41.7206,-86.0581 41.7162,-86.0622 41.7147,-86.0622 41.7096,-86.0673 41.7096,-86.0703 41.713,-86.0766 41.7182,-86.0767 41.7241,-86.0962 41.7241,-86.0962 41.7241,-86.1129 41.7241,-86.1232 41.7198,-86.1383 41.7162,-86.149 41.713,-86.1584 41.7128,-86.1608 41.7095,-86.1699 41.7094,-86.1716 41.7126,-86.1716 41.7164,-86.1783 41.7158,-86.178 41.72,-86.1878 41.7199,-86.1879 41.7236,-86.1901 41.7236,-86.1913 41.7214,-86.1913 41.7214,-86.1921 41.7233,-86.2039 41.7231,-86.2038 41.7268,-86.2075 41.7332,-86.2067 41.7343,-86.2066 41.7353,-86.2113 41.7395,-86.2111 41.7426,-86.2087 41.7431,-86.2087 41.7451,-86.2173 41.7451,-86.2173 41.7451,-86.2175 41.76))

ZipCode-46514:

POLYGON((-85.8978 41.7594,-85.8988 41.7562,-85.8984 41.7391,-85.8887 41.7391,-85.8887 41.7302,-85.871 41.731,-85.8708 41.7241,-85.8882 41.724,-85.8886 41.7245,-85.9032 41.7242,-85.9029 41.705,-85.898 41.7052,-85.8885 41.7077,-85.8884 41.7072,-85.8884 41.7072,-85.896 41.7048,-85.8965 41.7051,-85.8972 41.7039,-85.8971 41.701,-85.8986 41.6995,-85.9052 41.6989,-85.9104 41.6968,-85.9164 41.6957,-85.9162 41.6971,-85.913 41.6976,-85.9159 41.6976,-85.9172 41.6962,-85.9226 41.6967,-85.9227 41.6971,-85.9319 41.6967,-85.9344 41.6974,-85.9378 41.6968,-85.9447 41.6985,-85.9451 41.6997,-85.9454 41.699,-85.9485 41.6986,-85.9554 41.6949,-85.9576 41.6947,-85.9584 41.6939,-85.9632 41.6944,-85.9689 41.6924,-85.9709 41.6927,-85.9743 41.6921,-85.9781 41.6923,-85.9831 41.6886,-85.9832 41.6858,-85.9813 41.684,-85.9811 41.6827,-85.9815 41.6819,-85.9833 41.6815,-85.9851 41.6819,-85.987 41.6837,-85.9881 41.6838,-85.9907 41.6825,-85.992 41.6808,-85.9919 41.6791,-85.9911 41.6769,-85.9925 41.6752,-85.9948 41.6759,-85.9985 41.6801,-86.0032 41.6798,-86.0076 41.678,-86.0135 41.6791,-86.0143 41.68,-86.0171 41.6805,-86.0167 41.6843,-86.0192 41.6803,-86.0213 41.6797,-86.0234 41.6779,-86.0243 41.6788,-86.0252 41.6855,-86.0268 41.6864,-86.0292 41.6866,-86.0294 41.6871,-86.0342 41.689,-86.037 41.6886,-86.038 41.6851,-86.0344 41.6822,-86.0342 41.6807,-86.0356 41.6801,-86.037 41.6814,-86.0439 41.6846,-86.0486 41.6829,-86.0536 41.6828,-86.0592 41.6813,-86.0613 41.68,-86.0613 41.68,-86.0617 41.6882,-86.0617 41.6915,-86.0619 41.7001,-86.0619 41.704,-86.0618 41.7054,-86.0535 41.7098,-86.0522 41.7099,-86.049 41.7128,-86.0477 41.7188,-86.0493 41.7206,-86.0493 41.7206,-86.0558 41.728,-86.0564 41.7311,-86.0502 41.7312,-86.0425 41.7264,-86.0429 41.7463,-86.0281 41.7461,-86.035 41.7535,-86.0561 41.7535,-86.0556 41.7541,-86.0549 41.7593,-86.0556 41.7605,-86.0556 41.7605,-86.0466 41.7605,-86.041 41.7605,-86.0339 41.7604,-85.9913 41.7599,-85.9749 41.7598,-85.9749 41.7598,-85.8978 41.7594,POLYGON((-85.8978 41.7594,-85.8988 41.7562,-85.8984 41.7391,-85.8887 41.7391,-85.8887 41.7302,-85.871 41.731,-85.8708 41.7241,-85.8882 41.724,-85.8886 41.7245,-85.9032 41.7242,-85.9029 41.705,-85.898 41.7052,-85.8885 41.7077,-85.8884 41.7072,-85.8884 41.7072,-85.896 41.7048,-85.8965 41.7051,-85.8972 41.7039,-85.8971 41.701,-85.8986 41.6995,-85.9052 41.6989,-85.9104 41.6968,-85.9164 41.6957,-85.9162 41.6971,-85.913 41.6976,-85.9159 41.6976,-85.9172 41.6962,-85.9226 41.6967,-85.9227 41.6971,-85.9319 41.6967,-85.9344 41.6974,-85.9378 41.6968,-85.9447 41.6985,-85.9451 41.6997,-85.9454 41.699,-85.9485 41.6986,-85.9554 41.6949,-85.9576 41.6947,-85.9584 41.6939,-85.9632 41.6944,-85.9689 41.6924,-85.9709 41.6927,-85.9743 41.6921,-85.9781 41.6923,-85.9831 41.6886,-85.9832 41.6858,-85.9813 41.684,-85.9811 41.6827,-85.9815 41.6819,-85.9833 41.6815,-85.9851 41.6819,-85.987 41.6837,-85.9881 41.6838,-85.9907 41.6825,-85.992 41.6808,-85.9919 41.6791,-85.9911 41.6769,-85.9925 41.6752,-85.9948 41.6759,-85.9985 41.6801,-86.0032 41.6798,-86.0076 41.678,-86.0135 41.6791,-86.0143 41.68,-86.0171 41.6805,-86.0167 41.6843,-86.0192 41.6803,-86.0213 41.6797,-86.0234 41.6779,-86.0243 41.6788,-86.0252 41.6855,-86.0268 41.6864,-86.0292 41.6866,-86.0294 41.6871,-86.0342 41.689,-86.037 41.6886,-86.038 41.6851,-86.0344 41.6822,-86.0342 41.6807,-86.0356 41.6801,-86.037 41.6814,-86.0439 41.6846,-86.0486 41.6829,-86.0536 41.6828,-86.0592 41.6813,-86.0613 41.68,-86.0613 41.68,-86.0617 41.6882,-86.0617 41.6915,-86.0619 41.7001,-86.0619 41.704,-86.0618 41.7054,-86.0535 41.7098,-86.0522 41.7099,-86.049 41.7128,-86.0477 41.7188,-86.0493 41.7206,-86.0493 41.7206,-86.0558 41.728,-86.0564 41.7311,-86.0502 41.7312,-86.0425 41.7264,-86.0429 41.7463,-86.0281 41.7461,-86.035 41.7535,-86.0561 41.7535,-86.0556 41.7541,-86.0549 41.7593,-86.0556 41.7605,-86.0556 41.7605,-86.0466 41.7605,-86.041 41.7605,-86.0339 41.7604,-85.9913 41.7599,-85.9749 41.7598,-85.9749 41.7598,-85.8978 41.7594))

would you give me the initialization of map and how to draw them with different colors

Answer 1

For example:

zipcode1_wkt = "POLYGON((-86.2175 41.76,-86.1278 41.7605,-86.1271 41.7605,-86.1254 41.7605,-86.125 41.7605,-86.0556 41.7605,-86.0556 41.7605,-86.0549 41.7593,-86.0556 41.7541,-86.0561 41.7535,-86.035 41.7535,-86.0281 41.7461,-86.0429 41.7463,-86.0425 41.7264,-86.0502 41.7312,-86.0564 41.7311,-86.0558 41.728,-86.0493 41.7206,-86.0493 41.7206,-86.0581 41.7162,-86.0622 41.7147,-86.0622 41.7096,-86.0673 41.7096,-86.0703 41.713,-86.0766 41.7182,-86.0767 41.7241,-86.0962 41.7241,-86.0962 41.7241,-86.1129 41.7241,-86.1232 41.7198,-86.1383 41.7162,-86.149 41.713,-86.1584 41.7128,-86.1608 41.7095,-86.1699 41.7094,-86.1716 41.7126,-86.1716 41.7164,-86.1783 41.7158,-86.178 41.72,-86.1878 41.7199,-86.1879 41.7236,-86.1901 41.7236,-86.1913 41.7214,-86.1913 41.7214,-86.1921 41.7233,-86.2039 41.7231,-86.2038 41.7268,-86.2075 41.7332,-86.2067 41.7343,-86.2066 41.7353,-86.2113 41.7395,-86.2111 41.7426,-86.2087 41.7431,-86.2087 41.7451,-86.2173 41.7451,-86.2173 41.7451,-86.2175 41.76,POLYGON((-86.2175 41.76,-86.1278 41.7605,-86.1271 41.7605,-86.1254 41.7605,-86.125 41.7605,-86.0556 41.7605,-86.0556 41.7605,-86.0549 41.7593,-86.0556 41.7541,-86.0561 41.7535,-86.035 41.7535,-86.0281 41.7461,-86.0429 41.7463,-86.0425 41.7264,-86.0502 41.7312,-86.0564 41.7311,-86.0558 41.728,-86.0493 41.7206,-86.0493 41.7206,-86.0581 41.7162,-86.0622 41.7147,-86.0622 41.7096,-86.0673 41.7096,-86.0703 41.713,-86.0766 41.7182,-86.0767 41.7241,-86.0962 41.7241,-86.0962 41.7241,-86.1129 41.7241,-86.1232 41.7198,-86.1383 41.7162,-86.149 41.713,-86.1584 41.7128,-86.1608 41.7095,-86.1699 41.7094,-86.1716 41.7126,-86.1716 41.7164,-86.1783 41.7158,-86.178 41.72,-86.1878 41.7199,-86.1879 41.7236,-86.1901 41.7236,-86.1913 41.7214,-86.1913 41.7214,-86.1921 41.7233,-86.2039 41.7231,-86.2038 41.7268,-86.2075 41.7332,-86.2067 41.7343,-86.2066 41.7353,-86.2113 41.7395,-86.2111 41.7426,-86.2087 41.7431,-86.2087 41.7451,-86.2173 41.7451,-86.2173 41.7451,-86.2175 41.76))";
zipcode2_wkt = "POLYGON((-85.8978 41.7594,-85.8988 41.7562,-85.8984 41.7391,-85.8887 41.7391,-85.8887 41.7302,-85.871 41.731,-85.8708 41.7241,-85.8882 41.724,-85.8886 41.7245,-85.9032 41.7242,-85.9029 41.705,-85.898 41.7052,-85.8885 41.7077,-85.8884 41.7072,-85.8884 41.7072,-85.896 41.7048,-85.8965 41.7051,-85.8972 41.7039,-85.8971 41.701,-85.8986 41.6995,-85.9052 41.6989,-85.9104 41.6968,-85.9164 41.6957,-85.9162 41.6971,-85.913 41.6976,-85.9159 41.6976,-85.9172 41.6962,-85.9226 41.6967,-85.9227 41.6971,-85.9319 41.6967,-85.9344 41.6974,-85.9378 41.6968,-85.9447 41.6985,-85.9451 41.6997,-85.9454 41.699,-85.9485 41.6986,-85.9554 41.6949,-85.9576 41.6947,-85.9584 41.6939,-85.9632 41.6944,-85.9689 41.6924,-85.9709 41.6927,-85.9743 41.6921,-85.9781 41.6923,-85.9831 41.6886,-85.9832 41.6858,-85.9813 41.684,-85.9811 41.6827,-85.9815 41.6819,-85.9833 41.6815,-85.9851 41.6819,-85.987 41.6837,-85.9881 41.6838,-85.9907 41.6825,-85.992 41.6808,-85.9919 41.6791,-85.9911 41.6769,-85.9925 41.6752,-85.9948 41.6759,-85.9985 41.6801,-86.0032 41.6798,-86.0076 41.678,-86.0135 41.6791,-86.0143 41.68,-86.0171 41.6805,-86.0167 41.6843,-86.0192 41.6803,-86.0213 41.6797,-86.0234 41.6779,-86.0243 41.6788,-86.0252 41.6855,-86.0268 41.6864,-86.0292 41.6866,-86.0294 41.6871,-86.0342 41.689,-86.037 41.6886,-86.038 41.6851,-86.0344 41.6822,-86.0342 41.6807,-86.0356 41.6801,-86.037 41.6814,-86.0439 41.6846,-86.0486 41.6829,-86.0536 41.6828,-86.0592 41.6813,-86.0613 41.68,-86.0613 41.68,-86.0617 41.6882,-86.0617 41.6915,-86.0619 41.7001,-86.0619 41.704,-86.0618 41.7054,-86.0535 41.7098,-86.0522 41.7099,-86.049 41.7128,-86.0477 41.7188,-86.0493 41.7206,-86.0493 41.7206,-86.0558 41.728,-86.0564 41.7311,-86.0502 41.7312,-86.0425 41.7264,-86.0429 41.7463,-86.0281 41.7461,-86.035 41.7535,-86.0561 41.7535,-86.0556 41.7541,-86.0549 41.7593,-86.0556 41.7605,-86.0556 41.7605,-86.0466 41.7605,-86.041 41.7605,-86.0339 41.7604,-85.9913 41.7599,-85.9749 41.7598,-85.9749 41.7598,-85.8978 41.7594,POLYGON((-85.8978 41.7594,-85.8988 41.7562,-85.8984 41.7391,-85.8887 41.7391,-85.8887 41.7302,-85.871 41.731,-85.8708 41.7241,-85.8882 41.724,-85.8886 41.7245,-85.9032 41.7242,-85.9029 41.705,-85.898 41.7052,-85.8885 41.7077,-85.8884 41.7072,-85.8884 41.7072,-85.896 41.7048,-85.8965 41.7051,-85.8972 41.7039,-85.8971 41.701,-85.8986 41.6995,-85.9052 41.6989,-85.9104 41.6968,-85.9164 41.6957,-85.9162 41.6971,-85.913 41.6976,-85.9159 41.6976,-85.9172 41.6962,-85.9226 41.6967,-85.9227 41.6971,-85.9319 41.6967,-85.9344 41.6974,-85.9378 41.6968,-85.9447 41.6985,-85.9451 41.6997,-85.9454 41.699,-85.9485 41.6986,-85.9554 41.6949,-85.9576 41.6947,-85.9584 41.6939,-85.9632 41.6944,-85.9689 41.6924,-85.9709 41.6927,-85.9743 41.6921,-85.9781 41.6923,-85.9831 41.6886,-85.9832 41.6858,-85.9813 41.684,-85.9811 41.6827,-85.9815 41.6819,-85.9833 41.6815,-85.9851 41.6819,-85.987 41.6837,-85.9881 41.6838,-85.9907 41.6825,-85.992 41.6808,-85.9919 41.6791,-85.9911 41.6769,-85.9925 41.6752,-85.9948 41.6759,-85.9985 41.6801,-86.0032 41.6798,-86.0076 41.678,-86.0135 41.6791,-86.0143 41.68,-86.0171 41.6805,-86.0167 41.6843,-86.0192 41.6803,-86.0213 41.6797,-86.0234 41.6779,-86.0243 41.6788,-86.0252 41.6855,-86.0268 41.6864,-86.0292 41.6866,-86.0294 41.6871,-86.0342 41.689,-86.037 41.6886,-86.038 41.6851,-86.0344 41.6822,-86.0342 41.6807,-86.0356 41.6801,-86.037 41.6814,-86.0439 41.6846,-86.0486 41.6829,-86.0536 41.6828,-86.0592 41.6813,-86.0613 41.68,-86.0613 41.68,-86.0617 41.6882,-86.0617 41.6915,-86.0619 41.7001,-86.0619 41.704,-86.0618 41.7054,-86.0535 41.7098,-86.0522 41.7099,-86.049 41.7128,-86.0477 41.7188,-86.0493 41.7206,-86.0493 41.7206,-86.0558 41.728,-86.0564 41.7311,-86.0502 41.7312,-86.0425 41.7264,-86.0429 41.7463,-86.0281 41.7461,-86.035 41.7535,-86.0561 41.7535,-86.0556 41.7541,-86.0549 41.7593,-86.0556 41.7605,-86.0556 41.7605,-86.0466 41.7605,-86.041 41.7605,-86.0339 41.7604,-85.9913 41.7599,-85.9749 41.7598,-85.9749 41.7598,-85.8978 41.7594))";

epsg4326 = new OpenLayers.Projection('EPSG:4326');
epsg3857 = new OpenLayers.Projection('EPSG:3857');

options = {
    div: "map",
    zoom: 11,
    center: [-9578839, 5122898],
    layers: [
        new OpenLayers.Layer.OSM()
    ]
};
map = new OpenLayers.Map(options);

zipcode = new OpenLayers.Layer.Vector();
map.addLayer(zipcode);

zipcode1_style = OpenLayers.Util.applyDefaults({'fillColor':'#ff0000'}, OpenLayers.Feature.Vector.style.default);
zipcode2_style = OpenLayers.Util.applyDefaults({'fillColor':'#00ff00'}, OpenLayers.Feature.Vector.style.default);

zipcode1_geometry = OpenLayers.Geometry.fromWKT(zipcode1_wkt);
zipcode2_geometry = OpenLayers.Geometry.fromWKT(zipcode2_wkt);

zipcode1_geometry.transform(epsg4326, epsg3857);
zipcode2_geometry.transform(epsg4326, epsg3857);

zipcode1_feature = new OpenLayers.Feature.Vector(zipcode1_geometry, null, zipcode1_style);
zipcode2_feature = new OpenLayers.Feature.Vector(zipcode2_geometry, null, zipcode2_style);

zipcode.addFeatures([zipcode1_feature, zipcode2_feature]);

LIVE DEMO

Answer 2

You might be also interested in the more fundamental problem of colouring a chloropleth map so that no two same colors are adjacent.

http://en.wikipedia.org/wiki/Four_color_theorem