I have some problems showing polygons in OpenLayers. I want to divide one city in areas. For the moment I have zona1 and zona2. I took lat and long from Google Maps so I think they are correct.

My problem, is that polygons are draw in black. I want them to have a inner colour but not black and not 100% opacity, I don't know how you change that.

I will explain a little my code because I think it is so strange my idea of showing more than one markers. I have all variables in arrays, so I can get any position in the array to do operations related. So I create variables for both areas and after that I put them on an array. I have 2 arrays for points. One array keep lat and the other one keep long. So I have to take data from each one each iteration.

Sorry if there are any comment in Spanish, it is my language. I tried to change all I saw.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<script type="text/javascript"  src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">    

var map;
var lineLayer;
var points;
var style;
var polygonFeature;

function pintarZonas(){ 

//lng and lat for both areas
var zonaALng = [-3.841867446899414, -3.838176727294922, -3.838348388671875,    -3.843669891357422];
var zonaALat = [43.466002139041116, 43.466002139041116, 43.46432016607394, 43.46276274196949];
var zonaBLng = [-3.832254409790039, -3.8265037536621094, -3.8254737854003906, -3.829936981201172,-3.832683563232422];
var zonaBLat = [43.462513550389424, 43.46375949801845, 43.461641371770504, 43.46002157809642,43.461142978339005];

//I keep all areas here
var vectorZonas = [zonaALng, zonaALat, zonaBLng, zonaBLat];

  lineLayerZona1 = new OpenLayers.Layer.Vector("zona1");
  style1 = { strokeColor: '#0000ff',
     strokeOpacity: 1,
     strokeWidth: 5

  lineLayerZona2 = new OpenLayers.Layer.Vector("zona2");
  style2 = { strokeColor: '#00ff00',
     strokeOpacity: 1,
     strokeWidth: 5

var vectorStyle = [style1, style2];  
var vectorLineLayer = [lineLayerZona1, lineLayerZona2];

pointZona1 = new Array(); 
pointZona2 = new Array();
vectorPoint = [pointZona1, pointZona2];
//Here I keep all points to both areas
var vectorCapas = [lineLayerZona1, lineLayerZona2];  
var i = 0;
var x = 0;
var zonaLat, zonaLng;
    var ww = 0;
for(i = 0; i < vectorZonas.length/2; i ++){
    zonaLng = vectorZonas[ww];
    zonaLat = vectorZonas[ww+1];
    point = vectorPoint[i];
    ww = i;
    ww +=2;
    for(x = 0; x < zonaLng.length; x ++){
        point[x] =new OpenLayers.LonLat(zonaLng[x],zonaLat[x] ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

        point[x] = new OpenLayers.Geometry.Point(point[x].lon, point[x].lat);   
    //No hace falta añadir un punto de final porque se cierra solo el poligono

 //Añadimos las capas al mapa
 for(z = 0; z < vectorPoint.length; z++){
    linear_ring = new OpenLayers.Geometry.LinearRing(vectorPoint[z]);
    polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linear_ring]), null, vectorStyle[z]);



function initialize() 
  map = new OpenLayers.Map ("map_canvas", {
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.Attribution()],
        maxExtent: new     OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
        maxResolution: 156543.0399,
        numZoomLevels: 19,
        units: 'm',
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326")

    // Define the map layer
    // Here we use a predefined layer that will be kept up to date with URL changes
    layerMapnik = new OpenLayers.Layer.OSM.Mapnik("MapaCiudad");
  var lonLat = new     OpenLayers.LonLat(-3.8343143463134766,43.451610413300685).transform(new     OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
  //map.setCenter(new OpenLayers.LonLat(-3.862788677215576, 43.4669443349282) //     Center of the map
    map.setCenter(lonLat, 19);  


<body onload="initialize()" >
<div id="map_canvas" style="width: 828px; height: 698px"></div>  

I made some changes to the code. I correct one of my question so I delete it from post.

SO my only question about it is how to set opacity?

1 Answer 1


To set opacity us fillOpacity property like so:

  style1 = { strokeColor: '#0000ff',
     strokeOpacity: 1,
     strokeWidth: 5,
     fillOpacity: 0.5
  • Any time. If my answer was helpful remember to mark my answer as checked (click on check mark) and upvote the answer (click on up arrow). Thanks.
    – CaptDragon
    Apr 5, 2012 at 17:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.