How to decorate OpenLayers cards

Question

I need to create a web application that displays a map with different markers. I think that using the solution as OpenLayers, but I would like the cards to have a “better” look (for example, http://leaflet.cloudmade.com/ ). Do you know any library that can be used with OpenLayers, to improve her appearance?

Answer 1

You can style the map buttons as you want using css and images. A popular blue button default theme is https://github.com/developmentseed/openlayers_themes (more details http://support.mapbox.com/kb/mapping-101/openlayers-themes )

To create a style, take a look at http://docs.openlayers.org/library/feature_styling.html

Answer 2

Setting up OpenLayers will give you a headache; it just doesn't have to look pretty. Just use the Flyer and everything will be fine. :)

Answer 3

You can do it easily if you use Google maps!

What you need to do is copy the openlayers.js script source to your public directory, e.g. public/js/openlayers.js . script is minimized. You need to open it and find where it says google.maps.Map , and disperse this statement by adding breaks where necessary (this just makes it more understandable). Then you need to add the styles property to the second argument. Some style options can be found for free on this website:

https://snazzymaps.com/explore

In the end, you should have a section like this in your customized openlayers.js file:

  google.maps.Map(b,{ center:a?new google.maps.LatLng(a.lat,a.lon):new google.maps.LatLng(0,0), zoom:this.map.getZoom()||0, mapTypeId:this.type, disableDefaultUI:!0, keyboardShortcuts:!1, draggable:!1, disableDoubleClickZoom:!0, scrollwheel:!1, streetViewControl:!1, styles: [{"featureType":"road","stylers":[{"hue":"#5e00ff"},{"saturation":-79}]},{"featureType":"poi","stylers":[{"saturation":-78},{"hue":"#6600ff"},{"lightness":-47},{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"lightness":22}]},{"featureType":"landscape","stylers":[{"hue":"#6600ff"},{"saturation":-11}]},{},{},{"featureType":"water","stylers":[{"saturation":-65},{"hue":"#1900ff"},{"lightness":8}]},{"featureType":"road.local","stylers":[{"weight":1.3},{"lightness":30}]},{"featureType":"transit","stylers":[{"visibility":"simplified"},{"hue":"#5e00ff"},{"saturation":-16}]},{"featureType":"transit.line","stylers":[{"saturation":-72}]},{}] }), 

The downside here is that if the Google APIs and / or openlayers.js script ever change, you risk breaking your map since you have a static copy of the script. I believe that this is a rare event, and this is a small price for a more beautiful card.

Answer 4

not too sure which parts you want to “decorate”, but you can do worse than look at GeoExt , this combines the sensha Extjs user interface with openlayers. I used it to create very attractive webGIS applications.

hope this helps

Ollie