[GIS] Setting fill style of vector layer in OpenLayers 3

openlayersopenlayers-2style

I am trying to apply a pre-defined fill-style for my vector layer but I face an error. The firebug says the following:

SyntaxError: missing } after property list


style:myStyle

I tried to put a "}" afther the property list, but the debugger keeps saying the same. I also tried to check my Javascript code with JSHint, but it also says the same problem. Last but not least I tried to look for some solution in this site and stackoverflow too, but I could not find any for my case :\
I am of the opinion that I put the "style: myStyle" line on a wrong place…

Can anyone help me?

My source code:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.10.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://openlayers.org/en/v3.10.1/build/ol.js" type="text/javascript"></script>
      <!--
     <script src="/home/mirind4/WebDevelopement/OpenLayers/openlayers/externs/ol3-aswcr/ol-aswcr.js" type="text/javascript"></script>
      -->
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">

        //Holds the Polygon feature  
        var polyFeature = new ol.Feature({
            geometry: new ol.geom.Polygon([
                [
                    [10.689697265625, -25.0927734375],
                    [34.595947265625, -20.1708984375],
                    [38.814697265625, -35.6396484375],
                    [13.502197265625, -39.1552734375],
                    [10.689697265625, -25.0927734375]
                ]

            ])
        });
        polyFeature.getGeometry().transform('EPSG:4326', 'EPSG:3857'); 

        //Self defined style
        var myStlye = new ol.style.Style ({
          fill: new ol.style.Fill({
             color: 'rgba(255,100,50,0.5)'
           })                                
        });


        //A vector layer to hold the features
        var vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [
                polyFeature
                ]

            })
            style: myStyle
        });



        var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'})
            }),

            vectorLayer   
          ],
          view: new ol.View({
          center: [2952104.019976033, -3277504.823700756],
          zoom: 4
          })
        });
    </script>
  </body>
</html>

Best Answer

you are missing a comma

var vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [
                polyFeature
                ]

            }),//here you miss the comma
            style: myStyle
        });
Related Question