{"id":860,"date":"2019-07-15T10:29:54","date_gmt":"2019-07-15T08:29:54","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=860"},"modified":"2019-07-15T10:29:54","modified_gmt":"2019-07-15T08:29:54","slug":"carte-interactive-openlayers-controle-calques","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/15\/carte-interactive-openlayers-controle-calques\/","title":{"rendered":"Carte interactive OpenLayers avec contr\u00f4le de calques"},"content":{"rendered":"\n<p>Apr\u00e8s avoir r\u00e9alis\u00e9 une <a href=\"https:\/\/geekcommunicant.com\/demos\/carte-interactive-leaflet-controle-calques.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"carte historique de la ligne 2 du tramway d\u2019\u00cele-de-France avec Leaflet (opens in a new tab)\">carte historique de la ligne 2 du tramway d\u2019\u00cele-de-France avec Leaflet<\/a> (voir le tutoriel), je me suis attaqu\u00e9 \u00e0 la cr\u00e9ation de cette m\u00eame carte avec OpenLayers.<\/p>\n\n\n\n<p>Bien que plus complet sur certains points, OpenLayers n\u2019inclus pas\nnativement deux fonctionnalit\u00e9s utilis\u00e9es dans la carte&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Le contr\u00f4le de calques<\/li><li>Les tooltips.<\/li><\/ul>\n\n\n\n<p>Pour le contr\u00f4le de calques, j\u2019ai utilis\u00e9 le plugin <a href=\"https:\/\/github.com\/walkermatt\/ol-layerswitcher\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"ol-layerswitcher (opens in a new tab)\">ol-layerswitcher<\/a> de Matt Walker.<\/p>\n\n\n\n<p>Pour les tooltips, j\u2019ai utilis\u00e9 un overlay et une interaction sur\nles calques des stations. Le corps du tooltip consiste en une div incluse dans\nla div de la carte&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;div id=&quot;map&quot; style=&quot;width: 800px;height: 600px;&quot;&gt;\n  &lt;div id=&quot;tooltip&quot; class=&quot;tooltip&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<!--more-->\n\n\n\n<h1 class=\"wp-block-heading\">Cr\u00e9ation des calques<\/h1>\n\n\n\n<p>Ici, contrairement \u00e0 avec Leaflet, on d\u00e9clare les calques et\ngroupes de calques avant d\u2019initialiser la carte.<\/p>\n\n\n\n<p>Comme avec Leaflet, chaque \u00e9tape de la vie de la ligne est\nrepr\u00e9sent\u00e9e par un groupe de deux calques.<\/p>\n\n\n\n<p>Aussi bien pour le trac\u00e9 que pour les stations, la fonction\nde style est appel\u00e9e par le param\u00e8tre \u00ab&nbsp;style&nbsp;\u00bb du calque.<\/p>\n\n\n\n<p>Pour le trac\u00e9, la fonction renvoie un objet de style avec un\nattribut \u00ab&nbsp;stroke&nbsp;\u00bb&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nfunction styleLine() {\n  return new ol.style.Style({\n    stroke: new ol.style.Stroke({\n      color: &#039;#a0006e&#039;,\n      width: 3\n    })\n  });\n}\n<\/pre><\/div>\n\n\n<p>Pour les stations, l\u2019objet renvoy\u00e9 a un attribut\n\u00ab&nbsp;image&nbsp;\u00bb, qui lui-m\u00eame poss\u00e8de plusieurs attributs&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nfunction styleFeature() {\n  return new ol.style.Style({\n    image: new ol.style.Circle({\n      fill: new ol.style.Fill({color: &#039;#ffffff&#039;}),\n      radius: 6,\n      stroke: new ol.style.Stroke({\n        color: &#039;black&#039;,\n        width: 2\n      })\n    })\n  });\n}\n<\/pre><\/div>\n\n\n<p>Pour cr\u00e9er un calque, on cr\u00e9e un nouvel objet de type calque\nvectoriel, avec une source vectorielle dont l\u2019attribut \u00ab&nbsp;url&nbsp;\u00bb\ncorrespond au fichier que l\u2019on veut charger, et l\u2019attribut \u00ab&nbsp;format&nbsp;\u00bb\nindique qu\u2019il s\u2019agit de GeoJSON&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nvar pipLineLayer = new ol.layer.Vector({\n  source: new ol.source.Vector({\n    url: &#039;.\/trace-puteaux_issy-plaine.geojson&#039;,\n    format: new ol.format.GeoJSON()\n  }),\n  style: function(feature){\n    return styleLine();\n  }\n});\n<\/pre><\/div>\n\n\n<p>Pour les calques \u00ab&nbsp;composites&nbsp;\u00bb, c\u2019est-\u00e0-dire qui\nont besoin de donn\u00e9es pr\u00e9sentes dans plusieurs fichiers GeoJSON, on ne dispose\npas de m\u00e9thode pr\u00eate \u00e0 l\u2019emploi.<\/p>\n\n\n\n<p>J\u2019ai donc cr\u00e9\u00e9 une fonction faisant un appel AJAX pour\nr\u00e9cup\u00e9rer les donn\u00e9es d\u2019un autre fichier pour les rajouter \u00e0 la source d\u2019un\ncalque, via la m\u00e9thode \u00ab&nbsp;addFeatures&nbsp;\u00bb&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nfunction get(url, target) {\n  var client = new XMLHttpRequest();\n  client.open(&#039;GET&#039;, url, true);\n  client.onload = function() {\n    \/\/ Ici il faut bien penser \u00e0 convertir la projection\n    var features = (new ol.format.GeoJSON({featureProjection:&#039;EPSG:3857&#039;})).readFeatures(client.responseText);\n    target.addFeatures(features);\n  };\n  client.send();\n}\n<\/pre><\/div>\n\n\n<p>L\u2019appel \u00e0 cette fonction se fait comme suit&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\n\/\/ On r\u00e9cup\u00e8re la source du calque grace \u00e0 la m\u00e9thode getSource()\nget(&#039;..\/leaflet\/trace-nord_init.geojson&#039;, initLineLayer.getSource());\n<\/pre><\/div>\n\n\n<p>Une fois les deux calques d\u2019un groupe, il est temps de cr\u00e9er\nle groupe de calques en lui-m\u00eame&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nvar pip = new ol.layer.Group({\n  layers:&#x5B;pipLineLayer, pipStopsLayer],\n  title: &#039;Paris \u2013 Issy-Plaine&#039;,\n  type: &#039;base&#039;,\n  visible: true,\n  combine: true\n});\n<\/pre><\/div>\n\n\n<p>D\u00e9tail des attributs&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>layers&nbsp;: array des calques \u00e0 inclure dans\nle groupe<\/li><li>title&nbsp;: titre du groupe, qui est utilis\u00e9\ntel quel dans le contr\u00f4le<\/li><li>type&nbsp;: \u00ab&nbsp;base&nbsp;\u00bb permet d\u2019indiquer\nque ce groupe sera s\u00e9lectionnable avec un bouton radio<\/li><li>visible&nbsp;: visibilit\u00e9 du groupe<\/li><li>combine&nbsp;: indique que le groupe doit \u00eatre\nconsid\u00e9r\u00e9 comme un seul et unique objet par le contr\u00f4le.<\/li><\/ul>\n\n\n\n<p>Apr\u00e8s avoir cr\u00e9\u00e9 tous les calques et groupes de calques dont\non a besoin, on peut maintenant initialiser la carte&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nvar map = new ol.Map({\n  layers: &#x5B;\n    new ol.layer.Tile({\n      source: new ol.source.XYZ({\n        url: &#039;https:\/\/maps.wikimedia.org\/osm-intl\/{z}\/{x}\/{y}.png&#039;,\n        attributions: &#039;&lt;a href=&quot;https:\/\/wikimediafoundation.org\/wiki\/Maps_Terms_of_Use&quot;&gt;Wikimedia maps&lt;\/a&gt; | Map data \u00a9 &lt;a href=&quot;http:\/\/openstreetmap.org\/copyright&quot;&gt;OpenStreetMap contributors&lt;\/a&gt;&#039;,\n        minZoom: 1,\n        maxZoom: 19\n      })\n    }),\n    new ol.layer.Group({\n      title: &#039;Trac\u00e9s&#039;, \/\/ titre utilis\u00e9 par le contr\u00f4le\n      layers: &#x5B;ext2, ext1, dev2006, init, pip] \/\/ l&#039;ordre de ce tableau est invers\u00e9 dans le contr\u00f4le\n    })\n  ],\n  target: &#039;map&#039;,\n  view: new ol.View({\n    center: ol.proj.fromLonLat(&#x5B;2.258634567260742, 48.847886021323966]),\n    zoom: 12\n  })\n});\n<\/pre><\/div>\n\n\n<!--nextpage-->\n\n\n\n<h1 class=\"wp-block-heading\">Ajout des tooltips<\/h1>\n\n\n\n<p>Comme indiqu\u00e9 dans l\u2019introduction, pour les tooltips j\u2019utilise\nun <em>overlay<\/em> et une interaction.<\/p>\n\n\n\n<p>En premier, on cr\u00e9\u00e9 un <em>overlay<\/em>\nqui utilise notre div incluse dans celle de la carte, et on l\u2019ajoute \u00e0 la carte&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nvar tooltip = document.getElementById(&#039;tooltip&#039;);\n    \nvar overlay = new ol.Overlay({\n  element: tooltip\n});\n\nmap.addOverlay(overlay);\n<\/pre><\/div>\n\n\n<p>Ensuite, on cr\u00e9\u00e9 une interaction qui s\u2019applique sur les\ncalques contenant les stations, et qui a une condition de d\u00e9clenchement de type\n\u00ab&nbsp;pointerMove&nbsp;\u00bb&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nvar stationHover = new ol.interaction.Select({\n  condition: ol.events.condition.pointerMove,\n  layers: &#x5B;pipStopsLayer,initStopsLayer, dev2006StopsLayer, ext1StopsLayer, ext2StopsLayer],\n  style: function(feature) {\n    return styleFeature();\n  }\n});\n<\/pre><\/div>\n\n\n<p>Pour la fonction appel\u00e9e au d\u00e9clenchement de l\u2019interaction,\net le style du tooltip (que je ne pr\u00e9sente pas ici), je me suis inspir\u00e9 du\nfonctionnement de Leaflet.<\/p>\n\n\n\n<p>Le principe de cette fonction est que s\u2019il y a un \u00e9l\u00e9ment\nsous la souris, on affiche le tooltip, et on y place la propri\u00e9t\u00e9 \u00ab&nbsp;name&nbsp;\u00bb\nde l\u2019\u00e9l\u00e9ment. Et selon que la souris soit dans la moiti\u00e9 gauche ou la moiti\u00e9\ndroite de la carte, on change le positionnement de l\u2019overlay et la classe \u00e0\nappliquer au tooltip pour que sa \u00ab&nbsp;queue&nbsp;\u00bb soit du bon c\u00f4t\u00e9.<\/p>\n\n\n\n<p>La fonction elle-m\u00eame&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nstationHover.on(&#039;select&#039;, function(e){\n  if(e.selected.length &gt; 0) {\n    tooltip.style.display = &#039;initial&#039;;\n    \n    overlay.setPosition(e.selected&#x5B;0].getGeometry().getCoordinates());\n\n    tooltip.innerHTML = e.selected&#x5B;0].get(&#039;name&#039;);\n\n    if( e.mapBrowserEvent.pixel&#x5B;0] &lt; (document.getElementById(&#039;map&#039;).offsetWidth \/ 2) ) {\n      tooltip.classList.add(&#039;tooltip-right&#039;);\n      tooltip.classList.remove(&#039;tooltip-left&#039;);\n      overlay.setPositioning(&#039;center-left&#039;);\n    } else {\n      tooltip.classList.add(&#039;tooltip-left&#039;);\n      tooltip.classList.remove(&#039;tooltip-right&#039;);\n      overlay.setPositioning(&#039;center-right&#039;);\n    }\n\n  } else {\n    tooltip.style.display = &#039;none&#039;;\n  }\n});\n<\/pre><\/div>\n\n\n<h1 class=\"wp-block-heading\">Ajout du contr\u00f4le<\/h1>\n\n\n\n<p>Maintenant, il ne nous reste plus qu\u2019\u00e0 initialiser le\ncontr\u00f4le et le rajouter \u00e0 la carte&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: false; title: ; notranslate\" title=\"\">\nvar layerSwitcher = new ol.control.LayerSwitcher();\n\nmap.addControl(layerSwitcher);\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Et voil\u00e0, encore une carte de faite avec OpenLayers. Un exemple fonctionnel est disponible <a href=\"https:\/\/geekcommunicant.com\/demos\/carte-interactive-openlayers-avec-contr%C3%B4le-de-calques.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"ici (opens in a new tab)\">ici<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apr\u00e8s avoir r\u00e9alis\u00e9 une carte historique de la ligne 2 du tramway d\u2019\u00cele-de-France avec Leaflet (voir le tutoriel), je me suis attaqu\u00e9 \u00e0 la cr\u00e9ation de cette m\u00eame carte avec OpenLayers. Bien que plus complet sur certains points, OpenLayers n\u2019inclus &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2019\/07\/15\/carte-interactive-openlayers-controle-calques\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"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,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19],"tags":[14,40],"class_list":["post-860","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-carte-interactive","tag-openlayers"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-dS","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1261,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/11\/04\/personnaliser-marqueur-carte-openlayers\/","url_meta":{"origin":860,"position":0},"title":"Personnaliser le marqueur d&rsquo;une carte OpenLayers","author":"geekc","date":"04\/11\/2024","format":false,"excerpt":"Dans un tuto pr\u00e9c\u00e9dent sur la r\u00e9alisation d\u2019une carte \u00e0 l\u2019aide d\u2019OpenLayers (carte du m\u00e9tro), j\u2019ai utilis\u00e9 des marqueurs personnalis\u00e9s, mais comme ce n\u2019\u00e9tait pas l\u2019int\u00e9r\u00eat majeur du tuto, ne me suis pas attard\u00e9 sur ce point. Et c\u2019est justement sur ce point, la personnalisation des marqueurs d\u2019une carte OpenLayers,\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":832,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/17\/carte-interactive-metro-paris-openlayers\/","url_meta":{"origin":860,"position":1},"title":"Carte interactive du m\u00e9tro de Paris avec OpenLayers","author":"geekc","date":"17\/06\/2019","format":false,"excerpt":"Apr\u00e8s vous avoir cr\u00e9\u00e9 une carte interactive du m\u00e9tro de Paris avec la librairie Leaflet (voir mon pr\u00e9c\u00e9dent article), j\u2019ai d\u00e9cid\u00e9 de recr\u00e9er cette carte avec l\u2019autre libraire majeure de cartographie en ligne\u00a0: OpenLayers (que j\u2019ai d\u00e9j\u00e0 utilis\u00e9e pour ma carte utilisant un fond statique). Donn\u00e9es utilis\u00e9es Les donn\u00e9es utilis\u00e9es\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":848,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/01\/carte-interactive-rues-sans-megots-openlayers\/","url_meta":{"origin":860,"position":2},"title":"Carte interactive des rues sans m\u00e9gots avec OpenLayers","author":"geekc","date":"01\/07\/2019","format":false,"excerpt":"Bon, je suppose que vous commencez \u00e0 avoir l\u2019habitude que je vous pr\u00e9sente la mani\u00e8re de cr\u00e9er une carte interactive \u00e0 l\u2019aide des deux librairies majeures OpenLayers et Leaflet. Apr\u00e8s avoir rapidement cr\u00e9\u00e9 la carte des rues et sections de rue concern\u00e9es par l\u2019op\u00e9ration \u00ab\u00a0Des rues sans m\u00e9gots\u00a0\u00bb avec Leaflet,\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":856,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/08\/carte-controle-calques-leaflet\/","url_meta":{"origin":860,"position":3},"title":"Carte avec contr\u00f4le de calques avec Leaflet","author":"geekc","date":"08\/07\/2019","format":false,"excerpt":"Cette semaine encore, nous allons encore voir la cr\u00e9ation d\u2019une carte interactive avec la librairie Leaflet. La carte pr\u00e9sent\u00e9e aujourd\u2019hui utilise les groupes de calques, ainsi que le contr\u00f4le de calques, afin de r\u00e9aliser une carte historique de la ligne 2 du tramway d\u2019\u00cele-de-France. Bref historique Afin d\u2019expliquer le d\u00e9coupage\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":808,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/06\/11\/carte-interactive-metro-paris-leaflet\/","url_meta":{"origin":860,"position":4},"title":"Carte interactive du m\u00e9tro de Paris avec Leaflet","author":"geekc","date":"11\/06\/2019","format":false,"excerpt":"Si on vous parle de solution pour int\u00e9grer une carte sur votre site, la premi\u00e8re qui vous vient \u00e0 l\u2019esprit est surement Google Maps. Mais il existe plusieurs solutions open-source et gratuites. Je vous ai d\u00e9j\u00e0 parl\u00e9 d\u2019OpenLayers, avec laquelle j\u2019ai d\u00e9j\u00e0 refait une carte r\u00e9alis\u00e9e pr\u00e9c\u00e9demment avec jQuery. Mais\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":512,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/04\/08\/remake-carte-openlayers\/","url_meta":{"origin":860,"position":5},"title":"Remake de ma carte interactive avec OpenLayers","author":"geekc","date":"08\/04\/2019","format":false,"excerpt":"Il n'y a pas tr\u00e8s longtemps, en faisant la maintenance de mon site (oui, m\u00eame si le contenu n'\u00e9volue quasiment pas, le site n'est pas \u00e0 l'abandon) je suis retomb\u00e9 sur la carte interactive que j'avais r\u00e9alis\u00e9es plusieurs ann\u00e9es auparavant. Cette carte reposait sur l'utilisation d'une image comme fond de\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/regions-bons-traces.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=860"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/860\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}