Yeah, that should sound OK, because as we all know the ocean is blue, but here I mean the ocean is blue on the maps of OpenStreetMap.org. This map uses pre-generated tiles with parts of the world map and using a tool such OpenLayers javascript library you can construct a geo map. The problem is that those tiles are always with blue ocean, as you can see on the picture below:

Well those are generated, how can I change the ocean color?

There is no way to change it, except you modify the .xml file from which those tiles are generated, but so far I haven’t done it.

Since I need a vector (thematic) map, such as this on http://thematicmapping.org/ with geoJSON formated borders I noticed that one you’ve a vector map, there’s no loading of the tiles and thus – no blue color of the ocean. You can see an example here:

emq26y57vz

If you’re not familiar with OpenLayers library, in breve this is a JavaScript library which interacts with a tile server such as this of OpenStreetMap.org

Vectors

Because it’s JavaScript OpenLayers library it renders different types of vectors when it becomes the case of vectors. It tries the VML way, but as you may know not every browser support it.  Actually everything works fine in every browser, and that’s the good part of OpenLayers, which is one of the best JavaScript organized project I’ve worked with.

The problem is that if you’ve something in the DOM with z-index over the vector layer IE’s giving problems because as it appears it cannot be rendered.

The solution is to draw the layer but skip the .addLayer before the vectors should be seen. You than remove the DOM element, which is over the vector layer you set .setVisibility(true) and the layer appears on the stage.

So far this is the only solution I got, but there may be others.