{"id":5465,"date":"2024-02-20T16:32:59","date_gmt":"2024-02-20T15:32:59","guid":{"rendered":"https:\/\/www.open-user-map.com\/?post_type=ht_kb&#038;p=5465"},"modified":"2024-02-20T16:32:59","modified_gmt":"2024-02-20T15:32:59","slug":"styling-the-map-tiles","status":"publish","type":"ht_kb","link":"https:\/\/www.open-user-map.com\/de\/knowledge-base\/styling-the-map-tiles\/","title":{"rendered":"Gestaltung der Kartenkacheln"},"content":{"rendered":"<p>Sie k\u00f6nnen dieses CSS verwenden, um die Farbe der Karte zu ver\u00e4ndern:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\" data-no-translation=\"\" data-no-auto-translation=\"\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#333545;color:#ebebe6\">CSS<\/span><span role=\"button\" tabindex=\"0\" data-code=\".open-user-map .box-wrap .map-wrap .leaflet-map {  background-color: red; \/* insert your color here *\/}.open-user-map .box-wrap .map-wrap .leaflet-map .leaflet-tile-pane img.leaflet-tile {  opacity: 0.5 !important;}\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code data-no-translation=\"\" data-no-auto-translation=\"\"><span class=\"line\"><span style=\"color: #62E884; font-style: italic\">.open-user-map<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.box-wrap<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.map-wrap<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.leaflet-map<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">background-color<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">red<\/span><span style=\"color: #F6F6F4\">; <\/span><span style=\"color: #7B7F8B\">\/* insert your color here *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #62E884; font-style: italic\">.open-user-map<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.box-wrap<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.map-wrap<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.leaflet-map<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.leaflet-tile-pane<\/span><span style=\"color: #F286C4\"> img<\/span><span style=\"color: #62E884; font-style: italic\">.leaflet-tile<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">opacity<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">0.5<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">!important<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Dadurch wird eine Hintergrundfarbe f\u00fcr die Karte festgelegt und die \u00fcberlagernden Kartenkacheln werden ein wenig transparent.<\/p>","protected":false},"excerpt":{"rendered":"<p>Sie k\u00f6nnen dieses CSS verwenden, um die Farbe der Karte zu ver\u00e4ndern: Damit wird eine Hintergrundfarbe f\u00fcr die Karte festgelegt und die sich \u00fcberlagernden Kartenkacheln werden ein wenig transparent.<\/p>","protected":false},"author":50,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[25],"ht-kb-tag":[119,56,58,57],"class_list":["post-5465","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-customization","ht_kb_tag-color","ht_kb_tag-css","ht_kb_tag-custom","ht_kb_tag-style"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Styling the map tiles - Open User Map<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.open-user-map.com\/de\/knowledge-base\/styling-the-map-tiles\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Styling the map tiles - Open User Map\" \/>\n<meta property=\"og:description\" content=\"You can make use of this CSS to manipulate the color of the map: This will set a background color for the map and make the overlaying map tiles a little transparent.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.open-user-map.com\/de\/knowledge-base\/styling-the-map-tiles\/\" \/>\n<meta property=\"og:site_name\" content=\"Open User Map\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/styling-the-map-tiles\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/styling-the-map-tiles\\\/\"},\"author\":{\"name\":\"Daniel Sch\u00f6nherr\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/person\\\/d9c8cbe470ae2702b6de61e0f73a7402\"},\"headline\":\"Styling the map tiles\",\"datePublished\":\"2024-02-20T15:32:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/styling-the-map-tiles\\\/\"},\"wordCount\":37,\"publisher\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\"},\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/styling-the-map-tiles\\\/\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/styling-the-map-tiles\\\/\",\"name\":\"Styling the map tiles - Open User Map\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#website\"},\"datePublished\":\"2024-02-20T15:32:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/styling-the-map-tiles\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/styling-the-map-tiles\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/styling-the-map-tiles\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.open-user-map.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Styling the map tiles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#website\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/\",\"name\":\"Open User Map\",\"description\":\"WordPress Map Plugin\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.open-user-map.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\",\"name\":\"Open User Map\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/icon-256x256-1.png\",\"contentUrl\":\"https:\\\/\\\/www.open-user-map.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/icon-256x256-1.png\",\"width\":256,\"height\":256,\"caption\":\"Open User Map\"},\"image\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/person\\\/d9c8cbe470ae2702b6de61e0f73a7402\",\"name\":\"Daniel Sch\u00f6nherr\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gestaltung der Kartenkacheln - Open User Map","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.open-user-map.com\/de\/knowledge-base\/styling-the-map-tiles\/","og_locale":"de_DE","og_type":"article","og_title":"Styling the map tiles - Open User Map","og_description":"You can make use of this CSS to manipulate the color of the map: This will set a background color for the map and make the overlaying map tiles a little transparent.","og_url":"https:\/\/www.open-user-map.com\/de\/knowledge-base\/styling-the-map-tiles\/","og_site_name":"Open User Map","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/styling-the-map-tiles\/#article","isPartOf":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/styling-the-map-tiles\/"},"author":{"name":"Daniel Sch\u00f6nherr","@id":"https:\/\/www.open-user-map.com\/#\/schema\/person\/d9c8cbe470ae2702b6de61e0f73a7402"},"headline":"Styling the map tiles","datePublished":"2024-02-20T15:32:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/styling-the-map-tiles\/"},"wordCount":37,"publisher":{"@id":"https:\/\/www.open-user-map.com\/#organization"},"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/styling-the-map-tiles\/","url":"https:\/\/www.open-user-map.com\/knowledge-base\/styling-the-map-tiles\/","name":"Gestaltung der Kartenkacheln - Open User Map","isPartOf":{"@id":"https:\/\/www.open-user-map.com\/#website"},"datePublished":"2024-02-20T15:32:59+00:00","breadcrumb":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/styling-the-map-tiles\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.open-user-map.com\/knowledge-base\/styling-the-map-tiles\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/styling-the-map-tiles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.open-user-map.com\/"},{"@type":"ListItem","position":2,"name":"Styling the map tiles"}]},{"@type":"WebSite","@id":"https:\/\/www.open-user-map.com\/#website","url":"https:\/\/www.open-user-map.com\/","name":"Open User Map","description":"WordPress Karten-Plugin","publisher":{"@id":"https:\/\/www.open-user-map.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.open-user-map.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.open-user-map.com\/#organization","name":"Open User Map","url":"https:\/\/www.open-user-map.com\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png","contentUrl":"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png","width":256,"height":256,"caption":"Open User Map"},"image":{"@id":"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.open-user-map.com\/#\/schema\/person\/d9c8cbe470ae2702b6de61e0f73a7402","name":"Daniel Sch\u00f6nherr"}]}},"_links":{"self":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb\/5465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/comments?post=5465"}],"version-history":[{"count":0,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb\/5465\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/media?parent=5465"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb-category?post=5465"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=5465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}