{"id":19714,"date":"2024-09-30T22:28:15","date_gmt":"2024-09-30T21:28:15","guid":{"rendered":"https:\/\/johnjohnston.info\/blog\/?p=19714"},"modified":"2024-09-30T22:30:08","modified_gmt":"2024-09-30T21:30:08","slug":"wp-osm-plugin-test","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/blog\/wp-osm-plugin-test\/","title":{"rendered":"WP OSM Plugin Test"},"content":{"rendered":"\n        <div id=\"map_ol3js_1\"\n       class=\"osm-map-container undefined\"\n             data-map_name=\"undefined\"\n             data-map=\"map_ol3js_1\"\n             data-autoshow=\"no\"\n             style=\"width:100%;\n                    max-width:100%;\n                    height:450px;\n                    display:block;\n                    overflow:hidden;\n                    border:2px solid grey;\">\n          <div id=\"map_ol3js_1_popup\" class=\"ol-popup\">\n            <a href=\"#\" id=\"map_ol3js_1_popup-closer\" class=\"ol-popup-closer\"><\/a>\n            <div id=\"map_ol3js_1_popup-content\"><\/div>\n          <\/div>\n        <\/div>\n    \n\n\t\t\t\t<script type=\"text\/javascript\">\n          translations['openlayer'] = \"open layer\";\n          translations['openlayerAtStartup'] = \"open layer at startup\";\n          translations['generateLink'] = \"link to this map with opened layers\";\n          translations['shortDescription'] = \"short description\";\n          translations['generatedShortCode'] = \"to get a text control link paste this code in your wordpress editor\";\n          translations['closeLayer'] = \"close layer\";\n          translations['cantGenerateLink'] = \"put this string in the existing map short code to control this map\";\n\t\t\t  <\/script>\n\n\n\t\t\t  <script type=\"text\/javascript\">\n\t\t\t  vectorM['map_ol3js_1'] = [];\n\t        \n        var raster = getTileLayer(\"opentopomap\",\"NoKey\");\t\t\t\n\n\t\t\t  var map_ol3js_1 = new ol.Map({\n\t\t\t\tinteractions: ol.interaction.defaults.defaults({mouseWheelZoom:false}),\n\t\t\t\tlayers: [raster],\n\t\t\t\ttarget: \"map_ol3js_1\",\n\t\t\t\tview: new ol.View({\n\t\t\t\t  center: ol.proj.transform([6.378,58.213], \"EPSG:4326\", \"EPSG:3857\"),\n\t\t\t\t  zoom: 9\n\t\t\t\t})\n\t\t\t  });\n\t\t\t  \n    var style_map_ol3js_1_0 = {\n      \"Point\": [new ol.style.Style({\n\n          image: new ol.style.Icon({\n            anchor: [0.5, 41],\n            anchorXUnits: \"fraction\",\n            anchorYUnits: \"pixels\",\n            opacity: 0.75,\n            src: \"https:\/\/johnjohnston.info\/blog\/wp-content\/plugins\/osm\/icons\/mic_blue_pinother_02.png\"\n          })\n      })],\n\n      \"LineString\": [new ol.style.Style({\n        stroke: new ol.style.Stroke({\n          color: \"none\",\n          width: 8\n        })\n      })],\n      \"MultiLineString\": [new ol.style.Style({\n        stroke: new ol.style.Stroke({\n          color: \"none\",\n          width: 4\n        })\n      })]\n    };\n\t\t  var vectorL0 = new ol.layer.Vector({\n\t\t\t\tsource: new ol.source.Vector({\n\t\t\t\turl:\"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2024\/09\/2024-09-27T14-25_Finlas_Loop.gpx\",\n\t\t\t\tformat: new ol.format.GPX({\n\t\t\t\t\textractStyles: false\n\t\t\t\t})\n\t\t\t}),\n\t\t\tzIndex: 92,\n\t\t\tstyle: function(feature, resolution) {return style_map_ol3js_1_0[feature.getGeometry().getType()];}\n\t\t  });\n\t\t  map_ol3js_1.addLayer(vectorL0);\n    var style_map_ol3js_1_1 = {\n      \"Point\": [new ol.style.Style({\n\n          image: new ol.style.Icon({\n            anchor: [0.5, 41],\n            anchorXUnits: \"fraction\",\n            anchorYUnits: \"pixels\",\n            opacity: 0.75,\n            src: \"https:\/\/johnjohnston.info\/blog\/wp-content\/plugins\/osm\/icons\/mic_blue_pinother_02.png\"\n          })\n      })],\n\n      \"LineString\": [new ol.style.Style({\n        stroke: new ol.style.Stroke({\n          color: \"none\",\n          width: 8\n        })\n      })],\n      \"MultiLineString\": [new ol.style.Style({\n        stroke: new ol.style.Stroke({\n          color: \"none\",\n          width: 4\n        })\n      })]\n    };\n\t\t  vectorL1 = new ol.layer.Vector({\n\n\t\t\tsource: new ol.source.Vector({\n\t\t  url:\"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2024\/09\/finlas.kml\",\n\t\t\t  format: new ol.format.KML({ showPointNames: false})\n\t\t\t}),\n         zIndex: 92\n\t\t  });map_ol3js_1.addLayer(vectorL1);\n      var extension1 = ol.extent.createEmpty();\n      var curZoom1 = map_ol3js_1.getView().getZoom();\n\n      map_ol3js_1.getLayers().forEach(function(layer){\n         if(!layer.get(\"id\")) {     \n            layer.once(\"change\", function(e){\n               ol.extent.extend(extension1, (layer.getSource().getExtent()));\n               map_ol3js_1.getView().fit(extension1, {padding: [50, 50, 50, 50]});\n            });\n         }\n      });\n\n    \naddControls2Map(map_ol3js_1,0,0,3,0,5,6,7,0,1);\nosm_addPopupClickhandler(map_ol3js_1,  \"map_ol3js_1\"); \nosm_addMouseHover(map_ol3js_1); <\/script>\n\n\n\n<p>A <a href=\"https:\/\/johnjohnston.info\/blog\/loch-oss-ben-oss\/\">few years ago<\/a><sup data-fn=\"02685ddb-caf0-4201-9d63-551b6ace049d\" class=\"fn\"><a href=\"#02685ddb-caf0-4201-9d63-551b6ace049d\" id=\"02685ddb-caf0-4201-9d63-551b6ace049d-link\">1<\/a><\/sup> I tested the WP OSM plugin. I didn&#8217;t get it to do exactly what I wanted so left it on the back burner. In the mean time I made a  <a href=\"https:\/\/johnjohnston.info\/walks\/\">map system of my own<\/a>. The plugin had been producing some security warnings from Jetpack and I&#8217;d deactivated it. Last week I saw some fixes and through I&#8217;d try it again. Using the gpx file I recorded last week and the associated flickr album<sup data-fn=\"e7abb714-a481-4986-b766-235463743619\" class=\"fn\"><a href=\"#e7abb714-a481-4986-b766-235463743619\" id=\"e7abb714-a481-4986-b766-235463743619-link\">2<\/a><\/sup> I had another go.<\/p>\n\n\n\n<p>I created the kml file with <a href=\"https:\/\/github.com\/gvellut\/flickr2kml\">gvellut\/flickr2kml<\/a>, which is a command line app, to convert a flickr album url to a kml file with images. The map above combines the gpx track &amp; kml file.<\/p>\n\n\n\n<p>The result is not, so far, exactly what I hoped. I was thinking the images could be views at a larger size, or link to the bigger versions. I suspect I could use the flickr2kml templates to do that.  <\/p>\n\n\n\n<p>I am also wondering if I could overlay and overlap bigger versions of the images with some random transparency maybe something like this, but with some randomness:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-photo is-provider-flickr wp-block-embed-flickr\"><div class=\"wp-block-embed__wrapper\">\n<a href=\"https:\/\/www.flickr.com\/photos\/troutcolor\/52384174435\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/65535\/52384174435_264f4b7944.jpg\" alt=\"Glen-Finlas-Dream-paths\" width=\"500\" height=\"330\" \/><\/a>\n<\/div><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.flickr.com\/photos\/troutcolor\/52384174435\/\">Glen-Finlas-Dream-paths | John Johnston | Flickr<\/a><\/figcaption><\/figure>\n\n\n\n<p>A few things to think about. <\/p>\n\n\n<ol class=\"wp-block-footnotes\"><li id=\"02685ddb-caf0-4201-9d63-551b6ace049d\">9 years ago, not sure where the time goes! <a href=\"#02685ddb-caf0-4201-9d63-551b6ace049d-link\" aria-label=\"Jump to footnote reference 1\">\u21a9\ufe0e<\/a><\/li><li id=\"e7abb714-a481-4986-b766-235463743619\">I used this in my own system:  <a href=\"maps.html?m=2024-09-27T14-25_Finlas_Loop.gpx&amp;f=72177720320632790\">2024-09-27 Finlas Loop<\/a> <a href=\"#e7abb714-a481-4986-b766-235463743619-link\" aria-label=\"Jump to footnote reference 2\">\u21a9\ufe0e<\/a><\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>A few years ago I tested the WP OSM plugin. I didn&#8217;t get it to do exactly what I wanted so left it on the back burner. In the mean time I made a map system of my own. The plugin had been producing some security warnings from Jetpack and I&#8217;d deactivated it. Last week [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"mf2_syndication":["https:\/\/social.ds106.us\/@johnjohnston\/113228625622213450","https:\/\/bsky.app\/profile\/johnjohnston.info\/post\/3l5fnlnaijn2y"],"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"[{\"content\":\"9 years ago, not sure where the time goes!\",\"id\":\"02685ddb-caf0-4201-9d63-551b6ace049d\"},{\"content\":\"I used this in my own system:  <a href=\\\"maps.html?m=2024-09-27T14-25_Finlas_Loop.gpx&amp;f=72177720320632790\\\">2024-09-27 Finlas Loop<\/a>\",\"id\":\"e7abb714-a481-4986-b766-235463743619\"}]"},"categories":[953],"tags":[197,1546,492,1888],"post_format":[],"class_list":{"0":"post-19714","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-posse","7":"tag-maps","8":"tag-openstreetmaps","9":"tag-osm","10":"tag-wp-osm","11":"kind-article","13":"h-entry","14":"hentry"},"better_featured_image":null,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p57zFQ-57Y","jetpack_likes_enabled":false,"jetpack_sharing_enabled":true,"kind":false,"_links":{"self":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/19714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/comments?post=19714"}],"version-history":[{"count":7,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/19714\/revisions"}],"predecessor-version":[{"id":19757,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/19714\/revisions\/19757"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/media?parent=19714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/categories?post=19714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/tags?post=19714"},{"taxonomy":"post_format","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/post_format?post=19714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}