4

I'm trying to use OpenLayers to produce a map I'm using the following to style a layer in the map.

It seems to work fine in Firefox but I get javascript error in IE 'symbolizer' is null or not an object ....? Any Ideas?

var previewVectors = new OpenLayers.Layer.Vector("previewVector", { isBaseLayer: true,

          styleMap: new OpenLayers.StyleMap({
            "default": new OpenLayers.Style({
              strokeColor: "white",
              strokeWidth: 1
            }, {
              rules: [
                new OpenLayers.Rule({
                  filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.EQUAL_TO,
                    property: "leUsage",
                    value: "Bulk Commodity"
                  }),
                  symbolizer: {
                    fillColor: "olive"
                  }
                }),
                new OpenLayers.Rule({
                  filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.EQUAL_TO,
                    property: "leUsage",
                    value: "Service Industry"
                  }),
                  symbolizer: {
                    fillColor: "pink"
                  }
                }),
                new OpenLayers.Rule({
                  filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.EQUAL_TO,
                    property: "leUsage",
                    value: "Car Precincts"
                  }),
                  symbolizer: {
                    fillColor: "blue"
                  }
                }),
                new OpenLayers.Rule({
                  filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.EQUAL_TO,
                    property: "leUsage",
                    value: "Container Trade"
                  }),
                  symbolizer: {
                    fillColor: "green"
                  }
                }),
                new OpenLayers.Rule({
                  filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.EQUAL_TO,
                    property: "leUsage",
                    value: "Warehousing and Container Park"
                  }),
                  symbolizer: {
                    fillColor: "navyblue"
                  }
                }),
                new OpenLayers.Rule({
                  filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.EQUAL_TO,
                    property: "leUsage",
                    value: "Other"
                  }),
                  symbolizer: {
                    fillColor: "brown"
                  }
                }),
            ]
            })
          })
        });
1
  • jslint.com -- quickly picks out typos in even the most complex javascript
    – Jim B
    Commented Oct 21, 2010 at 1:29

1 Answer 1

6

You have a... DEVIANT COMMA!!!

Just delete that comma after:

                symbolizer: {
                    fillColor: "brown"
                  }
                }),

evil comma breaking IE ^

Try this: alert([1,2,3,].length);

3
  • evil comma :) cheers all fixed, I run firebug for firefox would have thought it would pick that up .... ahh well
    – Jamo
    Commented Sep 24, 2010 at 3:17
  • 3
    Jamo: I allways use firebug for debugging, and IE to tell me if any errors are present in my code. For me its a great combo :)
    – Chau
    Commented Sep 24, 2010 at 7:15
  • Neither will tell you there is a comma out of place. Its just one of those many quirks you just have to know when it comes to cross browser JS. All you get is 'null or not an object'.
    – Dandy
    Commented Sep 24, 2010 at 12:47

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.