Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm building a website in the style of Flat Design, and hoping to find a map tile that complements the design and can be used with Leafletjs.

share|improve this question
    
Does Stamen's Toner map qualify? –  underdark Jan 24 at 21:38
    
That looks really nice, but I wonder how difficult it would be to change the coloring. –  Rovo Jan 24 at 22:44
    
By the time you've built your website, I reckon flat design won't be trendy any more... It's so 2013. –  Spacedman Jan 25 at 12:37
add comment

2 Answers 2

up vote 1 down vote accepted

If style and design is what you want then mapbox is a good option. They have a free plan as long as you don't go over the max. https://www.mapbox.com/plans/. You can use either mapbox.js (which is based apon leaflet) or tink to the tiles that you have predefined in mapbox. You can go really far in the design of a map.

If you really want free and unlimited you should check out openstreetmaps. I use it all the time and it suits my needs (interactive visualisations on blog) perfectly. Example.

To call openstreetmaps in Leaflet; L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")

Cloudmade also offers free tiles but only to a certain amount of views and doesn't offer as much flexibility as mapbox does. An alternative, if you are willing to part with Leaflet, is to use CartoDB. CartoDB allows you to place a map via an iframe. I am naming it because CartoDB does offer flexibility in the color and the design which might suit your flat design needs.

share|improve this answer
add comment

You could use a Google Maps custom style to design your tiles in a flat style and integrate this custom tiles with leaflet using the leaflet-plugins plugin - if the usage of Google tiles within leaflet is an option for you, as the Google Maps API Terms of Service apply. The plugin supports custom styles via its mapOptions object since version 1.0.1.

Custom Google Map styles can be visually generated via the Google Maps API Styled Maps Wizard, which outputs a MapOptions JSON object, and it is possible to specify the look (visibility, colour etc) of several kinds of features on the map. You can generate a flat-design map style if you take the roadmap base tiles and turn off visibility of certain layers, most probably the landscape terrain, and define a custom, simple colour scheme to various other features, e.g. the water. There are some limitations though, you cannot customize everything (for example, the terrain basemap will always show terrain).

I recommend to have a look at the styles wizard in order to check if the available customization options fit your needs.

For leaflet integration, the plugin website provides a sample code that illustrates the implementation of such custom styles in leaflet. In short:

var styles = [                                        // this is the JSON object
   {  "featureType": "landscape.natural.terrain",     // which is passed to google
      "stylers": [ { "visibility": "off" } ]          // in order to customize the style
   }                                                  // of your tiles
]                                                     // 

var ggl = new L.Google('ROADMAP', {
              mapOptions: { styles: styles }        // apply the custom style to your map
          });
map.addLayer(ggl);
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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