GithubHelp home page GithubHelp logo

Comments (1)

1ec5 avatar 1ec5 commented on August 12, 2024

Varying the text size is indeed a common technique for making larger cities stand out. Some maps and globes take it to an extreme, putting the text size on such an extreme scale that Los Angeles’ label is larger than many European countries’ landmasses. Another simple technique common on print maps is to set important cities’ labels in ALL CAPS. However, in my opinion, Metropolis Bold is too wide a font for an all-caps label to look polished.

Regarding the other techniques described in Justin O’Beirne’s article:

  • We already vary font weights by place classification.

  • We can easily add white opaque halos around city labels, but while this technique is very effective, it also feels dated. We currently apply translucent, blurred halos, but in some situations, they can reduce legibility instead of improving it. Related to the halo idea, knockouts are a tried-and-true technique for reducing map clutter around labels. I’d jump at the chance to add knockouts around bridges. However, this effect isn’t supported by MapLibre: mapbox/mapbox-gl-js#4969.

  • We could massively increase the text-padding on place=city labels, but a less important city could collide out a more important nearby city if we aren’t careful.

  • The article describes “city donuts” that “clear the neighborhood” of nearby cities to make a central metropolitan city stand out. We can achieve this effect to a very limited extent by suppressing place=suburbs under a higher zoom level than place=towns, but this won’t help with the lower zoom levels that O’Beirne describes. If a particular city is causing problems, we could bundle a GeoJSON of a generous polygon around that city and filter the place layer by whether a feature lies within that polygon, but I don’t think this workaround squares with our general goal of reflecting OSM mapping.

from openstreetmap-americana.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.