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"
                  }
                }),
            ]
            })
          })
        });
  • jslint.com -- quickly picks out typos in even the most complex javascript – Jim B Oct 21 '10 at 1:29
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);

  • evil comma :) cheers all fixed, I run firebug for firefox would have thought it would pick that up .... ahh well – Jamo Sep 24 '10 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 Sep 24 '10 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 Sep 24 '10 at 12:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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