Tag Archives: openlayers

Optimizing OpenLayers. Make it smaller and faster!

javascript, web development, , , , , , , , ,

In breve OpenLayers is a open javascript library that gives you the power to integrate, work and develop map based web applications as is Google Maps.

The problem is that the library supports so many protocols, controls and tools that you probably never use in your application and because of this the size of the resulting, compressed javascript file is around 700K, which is too big for any javascript file at all. That makes your site slow and the user experience is really awful!

The solution is to cut that functionality that you don’t use, which is not so easy. You’ve to be careful doing this, just because you can crash you application by removing something that seems to be useless but in fact isn’t.

I’ve used this technique and managed to make the resulting javascript file up to 400K. And this is really simple – just add the files your application don’t need to the .cfg file you use for compression. Usually this fils is in the /build directory of OpenLayers.

Even more – I’ve seen some other developers managing to reduce the size up to 300K and that’s more than twice which is really very good result.

The other thing I’d like to do with that library is to explore with care the code inside and to optimize anything I can. There are too many style reflows in some classes and that’s what’s visible on the first look. I suppose there are much more things to optimized in it.

I’ll start doing my research and optimization and I’ll let you know what happens in numbers!

OpenLayers vectors IE bug!

javascript, , ,

OpenLayers and OpenStreetMap

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.

OpenLayers disable mouse wheel on zoom

javascript, micro tutorial, web development, , ,

What is OpenLayers?

OpenLayers is a open source JavaScript library, which helps for the usage and development of web based map applications. Usually when you use something like http://openstreetmap.org you’ve a tile server, which contains, or dynamically, renders tiles on a specific coordinates and zoom level. Such application in basic are most of the map servers you may know, as Google, Yahoo and Live (now Bing). Than you need a layer above that, that must generate the correct HTTP queries to the server and after receiving the tiles to position them correctly. Of course a open library like OpenLayers do much more. In fact this is complex JavaScript application that gives enough flexability to manipulate rich map applications.

How to disable the zoom with the mouse wheel

Very common problem (if we can say so) in map sites is the scroll, cause sometimes the user wants to scroll the page, and sometimes to scroll the map, which action results in zooming the map. Yes, there are so many solutions as many are the combinations of those scenarios. But the case here was how to disable the mouse wheel on OpenLayers. Continue reading OpenLayers disable mouse wheel on zoom →