I have just recently started playing with mapping but have had limited success. I have been able to create/display markers, but in my current project I am trying to display zipcode areas by creating a polygon using the zip boundaries. I've been hacking at this for more than a week, and getting nowhere. I'm not sure what I'm missing, so any help will be greatly appreciated.
I am trying to use OpenLayers. ZipCode boundaries were obtained by downloading a file and loading into a database. I am getting a map with the requested controls, but no polygons/shapes are visible.
<script src="../OpenLayers/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var MarkerFile;
var lat=38.0307;
var lon=-97.5146;
var zoom=4;
function init() {
map = new OpenLayers.Map ("mapX", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Attribution()],
allOverlays: true
} );
var proj = new OpenLayers.Projection("EPSG:4326");
var style_green =
{
strokeColor: "#000000",
strokeOpacity: 1,
strokeWidth: 1,
fillColor: "#00FF00",
fillOpacity: 0.6
};
var osmZ = new OpenLayers.Layer.OSM();
var Zip15021 = new OpenLayers.Layer.Vector("Zip15021",{isBaseLayer: false});
var Zip15301 = new OpenLayers.Layer.Vector("Zip15301",{isBaseLayer: false});
var poly15021 = new OpenLayers.Geometry.fromWKT("POLYGON((-80.4409388055265 40.3963551604938,-80.424348 40.477604,-80.399485 40.477369,-80.399081 40.476341,-80.399592 40.475174,-80.403459 40.470919,-80.405917 40.469547,-80.401783 40.466731,-80.399686 40.46641,-80.391986 40.467094,-80.385186 40.466244,-80.379077 40.463587,-80.371817 40.462371,-80.369529 40.464291,-80.366841 40.464643,-80.366025 40.460483,-80.363721 40.460035,-80.361017 40.458355,-80.360009 40.456963,-80.361417 40.455395,-80.364361 40.455891,-80.366313 40.455667,-80.367161 40.454979,-80.366297 40.44858,-80.363241 40.444692,-80.364617 40.43946,-80.361225 40.434692,-80.360489 40.431396,-80.364681 40.427684,-80.366921 40.42866,-80.369513 40.426596,-80.369529 40.423044,-80.368085 40.422787,-80.361769 40.414804,-80.365273 40.41226,-80.368249 40.4085,-80.363193 40.403604,-80.362825 40.400772,-80.363337 40.397524,-80.368137 40.387316,-80.359977 40.381332,-80.360185 40.380372,-80.362883 40.380539,-80.360345 40.379268,-80.363265 40.373605,-80.364009 40.368616,-80.36347 40.367907,-80.360986 40.367244,-80.35952 40.366215,-80.358022 40.36363,-80.356223 40.356697,-80.350088 40.34972,-80.348951 40.349102,-80.348115 40.350979,-80.351778 40.358433,-80.346133 40.368826,-80.331608 40.379492,-80.330328 40.37954,-80.324824 40.376773,-80.326972 40.36993,-80.331458 40.365445,-80.331428 40.363614,-80.330111 40.359564,-80.329393 40.357893,-80.327956 40.356315,-80.329092 40.353317,-80.333667 40.347756,-80.330945 40.345239,-80.335471 40.339387,-80.337641 40.33964,-80.341558 40.336541,-80.345234 40.33043,-80.343765 40.327449,-80.350861 40.317232,-80.350947 40.31672,-80.34977 40.315349,-80.351413 40.313426,-80.353953 40.311664,-80.356492 40.308596,-80.357066 40.302282,-80.3636 40.3015,-80.366469 40.300629,-80.372115 40.29724,-80.374786 40.296758,-80.387532 40.292095,-80.389681 40.295941,-80.391294 40.297406,-80.392937 40.297475,-80.395807 40.296149,-80.396524 40.296264,-80.401215 40.299606,-80.40913 40.310294,-80.406917 40.313795,-80.407094 40.318234,-80.40817 40.319813,-80.411816 40.32208,-80.413788 40.324483,-80.414206 40.326611,-80.412501 40.329517,-80.415072 40.33073,-80.423234 40.329244,-80.42476 40.327528,-80.425627 40.324897,-80.429217 40.319176,-80.43681 40.312815,-80.443845 40.309311,-80.446943 40.311487,-80.44793 40.313638,-80.452385 40.318649,-80.457259 40.320662,-80.460967 40.324369,-80.463383 40.329507,-80.46964 40.339238,-80.475757 40.338382,-80.484225 40.33936,-80.488545 40.340676,-80.4895 40.337541,-80.48776 40.330379,-80.486416 40.328367,-80.486226 40.326198,-80.486894 40.32492,-80.48928 40.322895,-80.492088 40.321155,-80.493613 40.32104,-80.494331 40.321543,-80.495139 40.322458,-80.495799 40.325753,-80.501262 40.330437,-80.501054 40.334821,-80.507294 40.322917,-80.509022 40.316773,-80.511727 40.315829,-80.514959 40.315973,-80.5190414027978 40.3181677207515,-80.519039 40.342101,-80.518980122912 40.343554219119,-80.517991 40.367968,-80.517991 40.398868,-80.51769 40.462467,-80.51899 40.473667,-80.5189946522939 40.4768839885536,-80.5189953451133 40.47736306235,-80.462256 40.477446,-80.460466 40.477488,-80.44898 40.477701,-80.424348 40.477604,-80.4409388055265 40.3963551604938))");
Zip15021.addFeatures([poly15021]);
var poly15301 = new OpenLayers.Geometry.fromWKT("POLYGON((-80.2619084903377 40.1717586790123,-80.35565 40.25306,-80.353918 40.254136,-80.350755 40.258279,-80.346754 40.261644,-80.34547 40.262239,-80.332059 40.264462,-80.327608 40.26428,-80.318408 40.262587,-80.305802 40.264555,-80.300943 40.266127,-80.295616 40.263845,-80.293115 40.260981,-80.282102 40.267862,-80.281306 40.266633,-80.279697 40.259791,-80.276889 40.259744,-80.270974 40.261573,-80.267181 40.262121,-80.263926 40.260929,-80.260581 40.260585,-80.250999 40.255586,-80.249247 40.254179,-80.246453 40.249606,-80.244997 40.244374,-80.242805 40.241862,-80.241877 40.240774,-80.240821 40.237958,-80.244005 40.236054,-80.236015 40.231201,-80.231591 40.230556,-80.224805 40.228038,-80.218404 40.223046,-80.218996 40.22135,-80.223861 40.215734,-80.226309 40.216694,-80.228357 40.216838,-80.232549 40.21559,-80.233618 40.213095,-80.232454 40.21134,-80.226549 40.212774,-80.229285 40.210406,-80.225781 40.21055,-80.222965 40.211526,-80.214788 40.219206,-80.213556 40.221638,-80.211188 40.231014,-80.20706 40.23783,-80.2061 40.237126,-80.205236 40.23543,-80.208772 40.233254,-80.209828 40.230934,-80.210964 40.226118,-80.209882 40.222505,-80.20458 40.21999,-80.19882 40.21487,-80.194772 40.213766,-80.180563 40.23015,-80.178771 40.230934,-80.175875 40.22919,-80.171635 40.225014,-80.166611 40.221638,-80.165667 40.217414,-80.163571 40.214758,-80.164899 40.21287,-80.165571 40.210582,-80.161251 40.211062,-80.158547 40.210502,-80.157731 40.20895,-80.158131 40.20663,-80.168291 40.207046,-80.171731 40.208934,-80.177539 40.20927,-80.182003 40.208086,-80.181219 40.202598,-80.178915 40.200438,-80.176035 40.199558,-80.171651 40.196806,-80.164387 40.184503,-80.152755 40.186263,-80.146018 40.184631,-80.146098 40.182903,-80.152195 40.184647,-80.167955 40.182647,-80.169699 40.181559,-80.170883 40.180039,-80.17506 40.171783,-80.17314 40.167223,-80.153891 40.167959,-80.151843 40.168823,-80.150707 40.170423,-80.135538 40.171159,-80.133458 40.164967,-80.130274 40.150887,-80.130546 40.146407,-80.131826 40.142855,-80.132611 40.135457,-80.13229 40.131783,-80.136973 40.125602,-80.133505 40.122804,-80.128767 40.120971,-80.12624 40.113441,-80.137357 40.114248,-80.145881 40.113931,-80.154434 40.104804,-80.153159 40.102904,-80.151401 40.102651,-80.148661 40.100569,-80.149228 40.098327,-80.148813 40.095741,-80.149261 40.09375,-80.159337 40.082631,-80.164048 40.071648,-80.16658 40.069978,-80.16792 40.069681,-80.169617 40.072313,-80.172268 40.074076,-80.174205 40.067989,-80.174356 40.06506,-80.173641 40.063389,-80.1723 40.061947,-80.172211 40.060734,-80.175519 40.055815,-80.178139 40.056044,-80.181921 40.055541,-80.185852 40.053893,-80.18484 40.049934,-80.185018 40.048584,-80.191569 40.050117,-80.193594 40.05101,-80.199403 40.059202,-80.201578 40.065151,-80.201578 40.067119,-80.200357 40.069431,-80.200357 40.0749,-80.201877 40.076044,-80.204767 40.076364,-80.210667 40.083434,-80.21451 40.084074,-80.218591 40.083158,-80.219305 40.081144,-80.222371 40.076658,-80.224069 40.075376,-80.226393 40.074631,-80.229403 40.077136,-80.236197 40.080589,-80.242216 40.082691,-80.243676 40.084017,-80.24454 40.083811,-80.252916 40.077013,-80.254377 40.075137,-80.255923 40.078571,-80.256279 40.080608,-80.2558 40.08317,-80.257378 40.084521,-80.266881 40.086699,-80.273581 40.092286,-80.278257 40.095125,-80.281415 40.096361,-80.284365 40.095378,-80.284872 40.093159,-80.283264 40.09087,-80.283086 40.089817,-80.289584 40.082473,-80.289464 40.084693,-80.287615 40.090139,-80.287552 40.097187,-80.287849 40.099675,-80.29049 40.101302,-80.29512 40.098218,-80.295313 40.097693,-80.292971 40.093906,-80.293685 40.091463,-80.302186 40.084832,-80.310318 40.08886,-80.313774 40.08561,-80.318094 40.083162,-80.325155 40.080072,-80.327181 40.081857,-80.329982 40.085956,-80.334511 40.087302,-80.337372 40.088789,-80.339368 40.090139,-80.340756 40.092431,-80.342438 40.09309,-80.341992 40.095127,-80.338392 40.096798,-80.338984 40.101649,-80.341444 40.10501,-80.346603 40.108723,-80.344116 40.112884,-80.342745 40.114052,-80.335681 40.113962,-80.334698 40.116479,-80.334761 40.128008,-80.336985 40.13124,-80.341658 40.132776,-80.344426 40.137223,-80.348266 40.139543,-80.35929 40.149239,-80.350874 40.157991,-80.345625 40.160727,-80.351788 40.182364,-80.351778 40.183829,-80.349081 40.186759,-80.345001 40.189591,-80.342057 40.193575,-80.341705 40.197063,-80.343561 40.200615,-80.349417 40.203111,-80.35857 40.203399,-80.359946 40.205607,-80.365834 40.203991,-80.366042 40.216391,-80.36881 40.220519,-80.37153 40.223031,-80.377221 40.225079,-80.378983 40.225217,-80.380773 40.226385,-80.384292 40.230207,-80.380139 40.234347,-80.376856 40.232995,-80.364553 40.229926,-80.365363 40.232678,-80.368242 40.235943,-80.36903 40.240718,-80.368573 40.241452,-80.361171 40.246798,-80.356536 40.249563,-80.355613 40.251268,-80.35565 40.25306,-80.2619084903377 40.1717586790123))");
Zip15301.addFeatures([poly15301]);
map.addLayers([osmZ, Zip15021, Zip15301]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var lonLat = new OpenLayers.LonLat(lon, lat).transform(proj, map.getProjectionObject() );
map.setCenter (lonLat, zoom);
}
function getQueryString() {
var result = {}, queryString = location.search.substring(1), re = /([^&=]+)=([^&]*)/g, m;
while (m = re.exec(queryString)) {
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
return result;
}
</script>
Best Answer
There were a few issues mainly:
var poly15301 = new OpenLayers.Geometry.fromWKT(...returns a geometry not a feature soZip15301.addFeatures([poly15301]);would not work.Try this:
Test Result:
Code: