{"id":111453,"date":"2025-06-01T04:03:21","date_gmt":"2025-05-31T23:33:21","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/rain-map-47hk\/"},"modified":"2025-06-01T04:03:21","modified_gmt":"2025-05-31T23:33:21","slug":"rain-map-47hk","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/rain-map-47hk\/","title":{"rendered":"\u0646\u0642\u0634\u0647 \u0628\u0627\u0631\u0627\u0646 &#8211; \u062c\u0627\u0645\u0639\u0647 dev"},"content":{"rendered":"<div data-article-id=\"2550075\" id=\"article-body\">\n<p>\u0646\u0642\u0634\u0647 \u0647\u0627\u06cc \u0628\u0627\u0631\u0627\u0646 \u0631\u0627 \u0628\u0627 \u062c\u0632\u0648\u0647 \u0648 Rainviewer \u062f\u0631\u0633\u062a \u06a9\u0646\u06cc\u062f<\/p>\n<p><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight php\"><code><span class=\"cp\"\/>\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n  <span class=\"nt\"><title\/><\/span>Peta Hujan - RainViewer + Leaflet<span class=\"nt\"\/>\n  <span class=\"nt\"><meta\/> <span class=\"na\">charset=<\/span><span class=\"s\">\"utf-8\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n  <span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/unpkg.com\/leaflet@1.9.3\/dist\/leaflet.css\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n  <span class=\"nt\"\/>\n    <span class=\"nf\">#map<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">100vh<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n  <span class=\"nt\"\/>\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n  <span class=\"nt\"><p> <span class=\"na\">id=<\/span><span class=\"s\">\"map\"<\/span><span class=\"nt\">&gt;<\/span><\/p><\/span>\n\n  <span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"https:\/\/unpkg.com\/leaflet@1.9.3\/dist\/leaflet.js\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"><script\/><\/span>\n    <span class=\"c1\">\/\/ Inisialisasi peta di koordinat Indonesia<\/span>\n    <span class=\"kd\">var<\/span> <span class=\"nx\">map<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">map<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">setView<\/span><span class=\"p\">([<\/span><span class=\"o\">-<\/span><span class=\"mf\">7.65<\/span><span class=\"p\">,<\/span> <span class=\"mf\">111.6<\/span><span class=\"p\">],<\/span> <span class=\"mi\">7<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Trenggalek<\/span>\n\n    <span class=\"c1\">\/\/ Tambahkan tile dasar (OpenStreetMap)<\/span>\n    <span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nf\">tileLayer<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">attribution<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\u00a9 OpenStreetMap<\/span><span class=\"dl\">'<\/span>\n    <span class=\"p\">}).<\/span><span class=\"nf\">addTo<\/span><span class=\"p\">(<\/span><span class=\"nx\">map<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Ambil data radar terbaru dari RainViewer<\/span>\n    <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/api.rainviewer.com\/public\/weather-maps.json<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">())<\/span>\n      <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ Ambil path radar terbaru<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">radar<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">radar<\/span><span class=\"p\">;<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">latestFrame<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">radar<\/span><span class=\"p\">.<\/span><span class=\"nx\">past<\/span><span class=\"p\">[<\/span><span class=\"nx\">radar<\/span><span class=\"p\">.<\/span><span class=\"nx\">past<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">];<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">tileUrl<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`https:\/\/tilecache.rainviewer.com<\/span><span class=\"p\">${<\/span><span class=\"nx\">latestFrame<\/span><span class=\"p\">.<\/span><span class=\"nx\">path<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/256\/{z}\/{x}\/{y}\/2\/1_1.png`<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ Tambahkan layer radar ke peta<\/span>\n        <span class=\"nx\">L<\/span><span class=\"p\">.<\/span><span class=\"nf\">tileLayer<\/span><span class=\"p\">(<\/span><span class=\"nx\">tileUrl<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n          <span class=\"na\">attribution<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Radar data \u00a9 RainViewer<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.6<\/span><span class=\"p\">,<\/span>\n          <span class=\"na\">transparent<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span>\n        <span class=\"p\">}).<\/span><span class=\"nf\">addTo<\/span><span class=\"p\">(<\/span><span class=\"nx\">map<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">})<\/span>\n      <span class=\"p\">.<\/span><span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Gagal memuat data radar:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">});<\/span>\n  <span class=\"nt\"\/>\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n\n<\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4nrjn9r6gxpo4sqah94c.png\" alt=\"\u0634\u0631\u062d \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"800\" title=\"\"><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0646\u0642\u0634\u0647 \u0647\u0627\u06cc \u0628\u0627\u0631\u0627\u0646 \u0631\u0627 \u0628\u0627 \u062c\u0632\u0648\u0647 \u0648 Rainviewer \u062f\u0631\u0633\u062a \u06a9\u0646\u06cc\u062f Peta Hujan &#8211; RainViewer + Leaflet charset=&#8221;utf-8&#8243; \/&gt; name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt; rel=&#8221;stylesheet&#8221; href=&#8221;https:\/\/unpkg.com\/leaflet@1.9.3\/dist\/leaflet.css&#8221; \/&gt; #map { height: 100vh; } id=&#8221;map&#8221;&gt; &#8220;https:\/\/unpkg.com\/leaflet@1.9.3\/dist\/leaflet.js&#8221;&gt; \/\/ Inisialisasi peta di koordinat Indonesia var map = L.map(&#8216;map&#8217;).setView([-7.65, 111.6], 7); \/\/ Trenggalek \/\/ Tambahkan tile dasar (OpenStreetMap) L.tileLayer(&#8216;https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png&#8217;, { attribution: &#8216;\u00a9 OpenStreetMap&#8217; &hellip;<\/p>\n","protected":false},"author":2,"featured_media":111454,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-111453","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/111453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=111453"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/111453\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/111454"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=111453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=111453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=111453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}