{"id":210,"date":"2026-05-24T01:08:33","date_gmt":"2026-05-24T01:08:33","guid":{"rendered":"http:\/\/localhost\/harar\/?page_id=210"},"modified":"2026-07-01T22:41:29","modified_gmt":"2026-07-01T22:41:29","slug":"health-centers","status":"publish","type":"page","link":"https:\/\/hararhealthbureau.org\/index.php\/health-facilities\/health-centers\/","title":{"rendered":"Health Centers"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nHarar Health Centers<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;700&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\/>\r\n\r\n<style>\r\nbody{\r\n margin:0;\r\n font-family:Roboto;\r\n background:#f7fbff;\r\n}\r\n\r\n.container{\r\n padding:20px 40px;\r\n}\r\n\r\n.title{\r\n font-size:22px;\r\n font-weight:700;\r\n color:#0b5ed7;\r\n border-left:5px solid #0b5ed7;\r\n padding-left:10px;\r\n margin-bottom:10px;\r\n}\r\n\r\n.layout{\r\n display:grid;\r\n grid-template-columns:1.6fr 1fr;\r\n gap:15px;\r\n}\r\n\r\n#map{\r\n height:600px;\r\n border-radius:12px;\r\n border:1px solid #dbe9ff;\r\n}\r\n\r\n.panel{\r\n display:flex;\r\n flex-direction:column;\r\n}\r\n\r\n.search input{\r\n width:100%;\r\n padding:10px;\r\n border-radius:8px;\r\n border:1px solid #cfe2ff;\r\n margin-bottom:10px;\r\n}\r\n\r\n.scroll{\r\n height:540px;\r\n overflow-y:auto;\r\n background:#fff;\r\n border-radius:10px;\r\n border:1px solid #e6f0ff;\r\n padding:8px;\r\n}\r\n\r\n.card{\r\n padding:10px;\r\n margin:8px;\r\n border-radius:10px;\r\n border:1px solid #e6f0ff;\r\n cursor:pointer;\r\n}\r\n\r\n.card:hover{\r\n border-color:#0b5ed7;\r\n}\r\n\r\n.active{\r\n background:#e7f1ff;\r\n border-left:5px solid #0b5ed7;\r\n}\r\n\r\n.name{\r\n font-weight:700;\r\n color:#0b5ed7;\r\n}\r\n\r\n.meta{\r\n font-size:12px;\r\n color:#4a5a6a;\r\n}\r\n\r\n.badge{\r\n display:inline-block;\r\n font-size:11px;\r\n padding:3px 8px;\r\n border-radius:20px;\r\n background:#e7f1ff;\r\n color:#0b5ed7;\r\n margin-bottom:5px;\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"container\">\r\n\r\n<div class=\"title\">Harar Health Centers \u2013 AI Referral GIS System (Fixed)<\/div>\r\n\r\n<div class=\"layout\">\r\n\r\n<div id=\"map\"><\/div>\r\n\r\n<div class=\"panel\">\r\n\r\n<input class=\"search\" id=\"search\" placeholder=\"Search Health Center...\">\r\n\r\n<div class=\"scroll\" id=\"list\"><\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n\r\n<script>\r\n\r\n\/\/ ================= SAFE DATA =================\r\nconst hc = [\r\n{name:\"Erer HC\",lat:9.65,lon:42.15,service:70},\r\n{name:\"Harawe HC\",lat:9.55,lon:42.12,service:80},\r\n{name:\"Sofi HC\",lat:9.52,lon:42.10,service:60},\r\n{name:\"Amir-nur HC\",lat:9.30,lon:42.13,service:88},\r\n{name:\"Jenella HC\",lat:9.28,lon:42.16,service:72},\r\n{name:\"Hasange HC\",lat:9.50,lon:42.08,service:65},\r\n{name:\"Hakim HC\",lat:9.32,lon:42.09,service:85},\r\n{name:\"Shenkor HC\",lat:9.27,lon:42.11,service:75},\r\n{name:\"Abubeker HC\",lat:9.25,lon:42.14,service:78}\r\n];\r\n\r\nlet map;\r\nlet markers = [];\r\n\r\n\/\/ ================= INIT SAFE =================\r\nwindow.onload = function(){\r\n\r\n\/\/ MAP INIT\r\nmap = L.map('map').setView([9.4,42.1], 10);\r\n\r\nL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png',{\r\nattribution:'\u00a9 OpenStreetMap'\r\n}).addTo(map);\r\n\r\n\/\/ FIRST RENDER (IMPORTANT FIX)\r\nrender(hc);\r\n\r\n\/\/ SEARCH EVENT\r\ndocument.getElementById(\"search\").addEventListener(\"keyup\",function(){\r\nlet val = this.value.toLowerCase();\r\nlet filtered = hc.filter(h=>h.name.toLowerCase().includes(val));\r\nrender(filtered);\r\n});\r\n\r\n};\r\n\r\n\/\/ ================= RENDER FUNCTION =================\r\nfunction render(list){\r\n\r\n\/\/ CLEAR OLD MARKERS\r\nmarkers.forEach(m=>map.removeLayer(m));\r\nmarkers=[];\r\n\r\n\/\/ CLEAR LIST\r\ndocument.getElementById(\"list\").innerHTML=\"\";\r\n\r\n\/\/ DEFAULT VIEW CHECK\r\nif(!list || list.length===0){\r\ndocument.getElementById(\"list\").innerHTML=\"<p>No results found<\/p>\";\r\nreturn;\r\n}\r\n\r\n\/\/ ADD DATA\r\nlist.forEach((h,i)=>{\r\n\r\n\/\/ MARKER\r\nlet marker = L.marker([h.lat,h.lon]).addTo(map)\r\n.bindPopup(`<b>${h.name}<\/b><br>Service: ${h.service}%`);\r\n\r\nmarkers.push(marker);\r\n\r\n\/\/ LIST ITEM\r\nlet div = document.createElement(\"div\");\r\ndiv.className=\"card\";\r\ndiv.id=\"c\"+i;\r\n\r\ndiv.innerHTML=`\r\n<div class=\"badge\">Health Center<\/div>\r\n<div class=\"name\">${h.name}<\/div>\r\n<div class=\"meta\">Service: ${h.service}%<\/div>\r\n`;\r\n\r\ndiv.onclick=()=>{\r\n\r\nmap.setView([h.lat,h.lon],12);\r\nmarker.openPopup();\r\n\r\ndocument.querySelectorAll(\".card\").forEach(c=>c.classList.remove(\"active\"));\r\ndiv.classList.add(\"active\");\r\n\r\n};\r\n\r\ndocument.getElementById(\"list\").appendChild(div);\r\n\r\n});\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Harar Health Centers Harar Health Centers \u2013 AI Referral GIS System (Fixed)<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":134,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_angie_page":false,"footnotes":""},"class_list":["post-210","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/pages\/210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/comments?post=210"}],"version-history":[{"count":34,"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/pages\/210\/revisions"}],"predecessor-version":[{"id":1150,"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/pages\/210\/revisions\/1150"}],"up":[{"embeddable":true,"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/pages\/134"}],"wp:attachment":[{"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/media?parent=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}