{"id":13111,"date":"2021-04-21T09:50:00","date_gmt":"2021-04-21T09:50:00","guid":{"rendered":"https:\/\/kriesi.at\/documentation\/enfold\/?p=13111"},"modified":"2021-04-22T09:44:28","modified_gmt":"2021-04-22T09:44:28","slug":"openstreetmaps-leaflet-maps","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/openstreetmaps-leaflet-maps\/","title":{"rendered":"OpenStreetMaps &#8211; Leaflet Maps"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-62fe1c74cdd57ed24c06ec4f10f28b2b\">\n#top .av-special-heading.av-av_heading-62fe1c74cdd57ed24c06ec4f10f28b2b{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-62fe1c74cdd57ed24c06ec4f10f28b2b .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-62fe1c74cdd57ed24c06ec4f10f28b2b .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-62fe1c74cdd57ed24c06ec4f10f28b2b av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first  av-linked-heading'><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >OpenStreetMaps &#8211; Leaflet Map<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-4l81w9-b5b0c6c84c0027478f93af1559d8b8ff hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4eoa8p-49c749fa47049f63950c83b553a1aa26 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-49omnd-60461864dd6e31d88825aa08d500bad5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>In Enfold version 4.8.2 we have added OpenStreetMaps &#8211; Leaflet map element. OpenStreetMaps is an open source and responsive map with markers and it is based on Leaflet Map plugin. Unlike Google Maps, you do not need a key or\u00a0 an account to use OpenStreetMaps.<\/p>\n<\/div><\/section>\n<div  class='hr av-3zu17t-4c9ac709971ad699358bf98d29d6cf55 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-28tuw9-d9623dce8b5751f3ac5e838f58730e58 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to active OSM &#8211; Leaflet Map element<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-28tuw9-d9623dce8b5751f3ac5e838f58730e58 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Here are the steps to active OSM &#8211; Leaflet Map element<\/p>\n<ul>\n<li>In your WordPress dashboard, go to Plugins > Add New and install <a href=\"https:\/\/wordpress.org\/plugins\/leaflet-map\/\">Leaflet Map plugin<\/a><\/li>\n<li>Go to Enfold > Theme Extensions > OpenStreetMaps and enable it.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13113\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2021\/04\/enable-openstreetmaps.png\" alt=\"enabling OpenStreetMaps\" width=\"1506\" height=\"1202\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2021\/04\/enable-openstreetmaps.png 1506w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2021\/04\/enable-openstreetmaps-300x239.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2021\/04\/enable-openstreetmaps-1030x822.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2021\/04\/enable-openstreetmaps-768x613.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2021\/04\/enable-openstreetmaps-1500x1197.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2021\/04\/enable-openstreetmaps-705x563.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2021\/04\/enable-openstreetmaps-600x479.png 600w\" sizes=\"auto, (max-width: 1506px) 100vw, 1506px\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-3zu17t-4c9ac709971ad699358bf98d29d6cf55 hr-default  avia-builder-el-7  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-28tuw9-d9623dce8b5751f3ac5e838f58730e58 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>FAQ<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-knsp7fj7-92051a76768066d1a6bb3a7c6aa4750e  avia-builder-el-9  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-av_toggle-0ce44d3e832ec0775c891b364187cdfa'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"There is the option to grayscale the map and one can choose the percentage of that grayscale. Would it be possible to change that gray into another color?\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: There is the option to grayscale the map and one can choose the percentage of that grayscale. Would it be possible to change that gray into another color?\" data-aria_expanded=\"Click to collapse: There is the option to grayscale the map and one can choose the percentage of that grayscale. Would it be possible to change that gray into another color?\">There is the option to grayscale the map and one can choose the percentage of that grayscale. Would it be possible to change that gray into another color?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Grayscale is done by CSS classes \u2018avia-grayscale-xxx\u2019 and it is not possible to add other colors using pure CSS.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-av_toggle-d79b705df450f2899b1b3cdf36d368fb'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"In &quot;Marker Location\u201c and &quot;Marker\u201c there\u2019s a button to &quot;Fetch coordinates for address above\u201c to speed up loading on frontend. But when I click that button nothing happens. Why?\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: In &quot;Marker Location\u201c and &quot;Marker\u201c there\u2019s a button to &quot;Fetch coordinates for address above\u201c to speed up loading on frontend. But when I click that button nothing happens. Why?\" data-aria_expanded=\"Click to collapse: In &quot;Marker Location\u201c and &quot;Marker\u201c there\u2019s a button to &quot;Fetch coordinates for address above\u201c to speed up loading on frontend. But when I click that button nothing happens. Why?\">In \"Marker Location\u201c and \"Marker\u201c there\u2019s a button to \"Fetch coordinates for address above\u201c to speed up loading on frontend. But when I click that button nothing happens. Why?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>You would need to enter an address and then click the button. If it is not working, please make sure that have entered a valid address.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-av_toggle-b842f1c66e39f1a16fa7e38a846c07bd'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-3' data-fake-id='#toggle-id-3' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-3' data-slide-speed=\"200\" data-title=\"In the Theme Options one can change the Leaflet Library Files location. &quot;Use theme bundled library\u201c should be the best and fastest option to use \u2013 right?\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: In the Theme Options one can change the Leaflet Library Files location. &quot;Use theme bundled library\u201c should be the best and fastest option to use \u2013 right?\" data-aria_expanded=\"Click to collapse: In the Theme Options one can change the Leaflet Library Files location. &quot;Use theme bundled library\u201c should be the best and fastest option to use \u2013 right?\">In the Theme Options one can change the Leaflet Library Files location. \"Use theme bundled library\u201c should be the best and fastest option to use \u2013 right?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Yes, that is true and when you choose that option, assets are loaded from your server and not from external server.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-av_toggle-af3666c915392dea278123f0e415b302'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-4' data-fake-id='#toggle-id-4' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-4' data-slide-speed=\"200\" data-title=\" OpenStreetMaps offers different Map Layers to use (like \u201cBicycle\u201d or \u201cHumanitarian\u201d). Is it possible to change the map layer within the new ALB element?\" data-title-open=\"\" data-aria_collapsed=\"Click to expand:  OpenStreetMaps offers different Map Layers to use (like \u201cBicycle\u201d or \u201cHumanitarian\u201d). Is it possible to change the map layer within the new ALB element?\" data-aria_expanded=\"Click to collapse:  OpenStreetMaps offers different Map Layers to use (like \u201cBicycle\u201d or \u201cHumanitarian\u201d). Is it possible to change the map layer within the new ALB element?\"> OpenStreetMaps offers different Map Layers to use (like \u201cBicycle\u201d or \u201cHumanitarian\u201d). Is it possible to change the map layer within the new ALB element?<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>We only offer a basic implementation, therefore, out of the box, it is not possible. You can find get_maps_html_from_alb_shortode() function in enfold\\config-leaflet-maps\\class-avia-leaflet-maps.php if you would like to extend the implementation.<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-3zu17t-4c9ac709971ad699358bf98d29d6cf55 hr-default  avia-builder-el-10  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4eoa8p-1d9434f1064ec09e86a2ae989dda5869 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Troubleshoot<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-28tuw9-d9623dce8b5751f3ac5e838f58730e58 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Maps do not show<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-49omnd-60461864dd6e31d88825aa08d500bad5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>This is probably caused by Leaflet js library that was bundled in the theme is incompatible with the version required by the plugin.<\/p>\n<p>To troubleshoot:<\/p>\n<ul>\n<li>Go to Enfold > Theme Extensions > OpenStreetMaps and switch &#8220;Leaflet Javascript Library js File&#8221; option to &#8220;Use Plugin Default Library&#8221; until next theme update<\/li>\n<\/ul>\n<p>or<\/p>\n<ul>\n<li>Download the latest version of the file <a href=\"https:\/\/leafletjs.com\/download.html\" rel=\"nofollow\">https:\/\/leafletjs.com\/download.html<\/a> and unzip it inside enfold\\config-leaflet-maps\\assets\\leafletjs\\ folder.<\/li>\n<\/ul>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,8],"tags":[],"class_list":["post-13111","post","type-post","status-publish","format-standard","hentry","category-documentation","category-media-elements","documentation","media-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/13111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=13111"}],"version-history":[{"count":4,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/13111\/revisions"}],"predecessor-version":[{"id":13131,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/13111\/revisions\/13131"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=13111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=13111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=13111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}