5

I know it's possible to edit the way in which OpenStreetMap display, with CSS-like (like MapCSS) stylesheets. Is possible to do this without having to host your own tile server?

  • Please clarify the use case. Where do you want to look at the maps and how and who else does? – bugmenot123 Oct 5 '15 at 11:47
  • It's for use in a leaflet driven page. – FredFury Oct 5 '15 at 11:49
7

It is, but it requires a renderer running on your own computer.

Maperitive is one option which runs on Windows, or Linux/Mac systems running Mono.

Alternatively, projects such as Mapbox GL and Mapzen's Tangram are client-side renderers running off "vector tiles". This allows your styling to be applied in the browser or app. These are fairly young projects and at present require a fair amount of experience to get running, but if you're game for the challenge, look at Mapbox GL JS and Mapzen's free vector tiles for an in-browser solution.

P.S. It's OpenStreetMap (not Maps).

  • 1
    In general I recommend teh OSM wiki page wiki.openstreetmap.org/wiki/Rendering to get an overview. – stephan75 Oct 4 '15 at 17:17
  • This is useful. It looks like there is a bit of a learning curve, but I'll investigate. This would still require hosting your own tile server, am I right? – FredFury Oct 5 '15 at 6:56
  • 1
    @FredFury Mapbox has free and paid plans for hosting your maps, so you wouldn't need to host them yourself. – bennos Oct 5 '15 at 8:02
  • @bennos I'm looking at Mapbox now. It seems easy to work with. Have you used in with Leaflet? – FredFury Oct 5 '15 at 8:16
  • 1
    @FredFury yes, it works great with Leaflet. See this answer for more information and this demo how you can use mapbox.js – bennos Oct 5 '15 at 8:22
3

To elaborate on Richard Fairhurst answer. Mapbox Studio worked well for me. Mapbox studio provides a platform for you to edit a style offline, upload it and host your stylized map for you.

How to:

  1. Download MapBox Studio here (There is a linux version).
  2. Sign Up for a Mapbox account. You'll get an access Token which you'll need later.
  3. Edit the style. edit the Style
  4. Save it (Ctrl + S will save and refresh the map with your changes.)
  5. Upload to Mapbox. (note the Map ID) enter image description here

  6. Use it. Check out the plain leaflet example here. You'll need your Access Token and your Map ID when defining your map:

    L.mapbox.accessToken = '{Your Access Token here}';
    var map = L.mapbox.map('map','{Your.MapID here}').setView([-34,18], 7);  //code here
    

And there you have it- Custom Map Styling, without Hosting it yourself! I'm pretty sure there are other ways. Maperitive also quite powerful, although it has a steeper learning curve and a little less pleasing on the eye, it should not be disregarded.

0

I don't believe so as the CSS is applied at the tile rendering point. That said, the advent of Google map styling may have encouraged progress in this area. You may get some joy using JOSM which looks to pull the data and render the tiles client side.

  • JOSM doesn't render 'tiles', it's an editing program with a pannable map display and doesn't really have the polish (e.g. in label placement) to be considered as a viable option. – Richard Fairhurst Oct 4 '15 at 14:03
  • 1
    understood thanks - was thinking more at the components that are being used as part of the JOSM implementation rather than suggesting as a client side rendering solution. My primary point was that OSM do the rendering pre-request and do not allow passing in of CSS options. I was trying to steer away from local tile renderers. Thanks for the clarification. – Peter Scott Oct 4 '15 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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