CINXE.COM
Maxspeed Category now with traffic signs | OpenStreetBrowser Blog
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <meta name="Generator" content="Drupal 10 (https://www.drupal.org)" /> <meta name="MobileOptimized" content="width" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="/osb-192.png" type="image/png" /> <link rel="canonical" href="https://blog.openstreetbrowser.org/node/100" /> <link rel="shortlink" href="https://blog.openstreetbrowser.org/node/100" /> <title>Maxspeed Category now with traffic signs | OpenStreetBrowser Blog</title> <link rel="stylesheet" media="all" href="/core/assets/vendor/normalize-css/normalize.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/align.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/fieldgroup.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/container-inline.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/clearfix.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/details.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/hidden.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/item-list.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/js.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/nowrap.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/position-container.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/reset-appearance.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/resize.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/system-status-counter.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/system-status-report-counters.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/system-status-report-general-info.css?smty7g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/tablesort.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/base/elements.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/layout.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/action-links.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/breadcrumb.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/button.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/collapse-processed.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/container-inline.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/details.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/exposed-filters.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/field.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/form.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/icons.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/inline-form.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/item-list.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/link.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/links.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/menu.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/more-link.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/pager.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/tabledrag.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/tableselect.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/tablesort.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/tabs.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/textarea.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/ui-dialog.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/messages.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/classy/components/node.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/block.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/book.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/breadcrumb.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/captions.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/comments.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/container-inline.module.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/contextual.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/demo-block.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/dropbutton.component.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/featured-top.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/feed-icon.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/field.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/form.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/forum.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/header.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/help.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/highlighted.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/item-list.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/list-group.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/list.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/main-content.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/menu.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/messages.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/node.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/node-preview.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/page-title.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/pager.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/panel.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/primary-menu.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/search-form.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/search-results.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/secondary-menu.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/shortcut.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/skip-link.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/sidebar.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/site-branding.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/site-footer.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/table.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/tablesort-indicator.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/tabs.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/text-formatted.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/toolbar.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/featured-bottom.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/password-suggestions.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/ui.widget.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/vertical-tabs.component.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/views.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/buttons.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/image-button.css?smty7g" /> <link rel="stylesheet" media="all" href="/themes/contrib/bartik/css/components/ui-dialog.css?smty7g" /> <link rel="stylesheet" media="all" href="/files/color/bartik-67889f1f/colors.css?smty7g" /> <link rel="stylesheet" media="print" href="/themes/contrib/bartik/css/print.css?smty7g" /> </head> <body class="layout-no-sidebars path-node page-node-type-story"> <a href="#main-content" class="visually-hidden focusable skip-link"> Skip to main content </a> <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas> <div id="page-wrapper"> <div id="page"> <header id="header" class="header" role="banner"> <div class="section layout-container clearfix"> <div class="region region-secondary-menu"> <nav role="navigation" aria-labelledby="block-bartik-account-menu-menu" id="block-bartik-account-menu" class="block block-menu navigation menu--account"> <h2 class="visually-hidden" id="block-bartik-account-menu-menu">User account menu</h2> <div class="content"> <div class="menu-toggle-target menu-toggle-target-show" id="show-block-bartik-account-menu"></div> <div class="menu-toggle-target" id="hide-block-bartik-account-menu"></div> <a class="menu-toggle" href="#show-block-bartik-account-menu">Show — User account menu</a> <a class="menu-toggle menu-toggle--hide" href="#hide-block-bartik-account-menu">Hide — User account menu</a> <ul class="clearfix menu"> <li class="menu-item"> <a href="/user/login" data-drupal-link-system-path="user/login">Log in</a> </li> </ul> </div> </nav> </div> <div class="clearfix region region-header"> <div id="block-bartik-branding" class="clearfix site-branding block block-system block-system-branding-block"> <a href="/" rel="home" class="site-branding__logo"> <img src="/osb_logo.png" alt="Home" /> </a> <div class="site-branding__text"> <div class="site-branding__name"> <a href="/" rel="home">OpenStreetBrowser Blog</a> </div> </div> </div> </div> <div class="region region-primary-menu"> <nav role="navigation" aria-labelledby="block-bartik-main-menu-menu" id="block-bartik-main-menu" class="block block-menu navigation menu--main"> <h2 class="visually-hidden" id="block-bartik-main-menu-menu">Main navigation</h2> <div class="content"> <div class="menu-toggle-target menu-toggle-target-show" id="show-block-bartik-main-menu"></div> <div class="menu-toggle-target" id="hide-block-bartik-main-menu"></div> <a class="menu-toggle" href="#show-block-bartik-main-menu">Show — Main navigation</a> <a class="menu-toggle menu-toggle--hide" href="#hide-block-bartik-main-menu">Hide — Main navigation</a> <ul class="clearfix menu"> <li class="menu-item"> <a href="https://www.openstreetbrowser.org/">Map</a> </li> <li class="menu-item"> <a href="/" data-drupal-link-system-path="<front>">Blog</a> </li> </ul> </div> </nav> </div> </div> </header> <div class="highlighted"> <aside class="layout-container section clearfix" role="complementary"> <div class="region region-highlighted"> <div data-drupal-messages-fallback class="hidden"></div> </div> </aside> </div> <div id="main-wrapper" class="layout-main-wrapper layout-container clearfix"> <div id="main" class="layout-main clearfix"> <div class="region region-breadcrumb"> <div id="block-bartik-breadcrumbs" class="block block-system block-system-breadcrumb-block"> <div class="content"> <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb"> <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2> <ol> <li> <a href="/">Home</a> </li> </ol> </nav> </div> </div> </div> <main id="content" class="column main-content" role="main"> <section class="section"> <a id="main-content" tabindex="-1"></a> <div class="region region-content"> <div id="block-bartik-page-title" class="block block-core block-page-title-block"> <div class="content"> <h1 class="title page-title"><span class="field field--name-title field--type-string field--label-hidden">Maxspeed Category now with traffic signs</span> </h1> </div> </div> <div id="block-garland-system-main" class="block block-system block-system-main-block"> <div class="content"> <article data-history-node-id="100" class="node node--type-story node--promoted node--view-mode-full clearfix"> <header> <div class="node__meta"> <article class="profile"> </article> <span> Submitted by <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span>plepe</span></span> on <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2024-11-03T14:05:15+02:00" title="Sunday, November 3, 2024 - 14:05" class="datetime">Sun, 11/03/2024 - 14:05</time> </span> </span> </div> </header> <div class="node__content clearfix"> <div class="field field--name-field-header-image field--type-image field--label-hidden field__item"> <a href="/files/2024-11/maxspeed_with_traffic_sign.png"><img loading="lazy" src="/files/styles/large/public/2024-11/maxspeed_with_traffic_sign.png?itok=jmx7rS1P" width="480" height="380" alt="Screenshot of the mapnik rendering of Bennetsbridge, overlayed by colored roads (depending on the speed). A few traffic signs with their speed limit are visible." class="image-style-large" /> </a> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>The <a href="https://www.openstreetbrowser.org/#categories=car_maxspeed">maxspeed category</a> now includes maxspeed traffic signs (from zoom level 16). If the traffic signs have a direction, the icon will be rotated accordingly.</p><p>For this to work, I <a href="https://github.com/plepe/OpenStreetBrowser/commit/a7186317310b602684322080f2c1b0f9fbf1520e">added</a> a new TwigJS filter: '<a href="https://github.com/plepe/OpenStreetBrowser/blob/master/doc/TwigJS.md">parseDirection</a>', which handles values like 'east' or 'NNW'.</p></div> <div class="node__links"> <ul class="links inline"><li class="comment-forbidden"></li></ul> </div> </div> </article> </div> </div> </div> </section> </main> </div> </div> <footer class="site-footer"> <div class="layout-container"> <div class="site-footer__bottom"> </div> </div> </footer> </div> </div> </div> </body> </html>