CODEWITHSUNDEEP
mapsopenlayers
Cris
Cris

Reputation: 12194

How to beautify OpenLayers maps

I need to build a web app that renders a Map with different markers. I think to use a solution as OpenLayers but i would like the maps to have a "better" look (as, for example, http://leaflet.cloudmade.com/). Do you know any library that can be used with OpenLayers to improve its look?

Upvotes: 4

Views: 9561

Answers (3)

John Foley
John Foley

Reputation: 4479

You can do this easily if you are using google maps!

What you must do is copy the source of the openlayers.js script to your publicly available directory, such as public/js/openlayers.js. The script is minified. You need to open it up and find where it says google.maps.Map and unminify this statement by adding breaks where necessary ( this just makes it more readible ). You then need to add a styles property to the second argument. Some style options can be found for free at 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 API and/or the openlayers.js script ever change you risk breaking your map since you have a static copy of the script. I find that to be a rare event and is a small price to pay for a more beautiful map.

Upvotes: 1

Allartk
Allartk

Reputation: 129

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

For feature styling, take a look at http://docs.openlayers.org/library/feature_styling.html

Upvotes: 4

olly_uk
olly_uk

Reputation: 11865

not too sure which parts you want to 'beautify' but you could do worse than having a look at GeoExt, this combines the UI of sensha Extjs with openlayers. i've used it to produce some very attractive webGIS applications

hope that is of help

Olly

Upvotes: 0

Related Questions