{"id":30733,"date":"2023-08-01T07:00:00","date_gmt":"2023-08-01T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=30733"},"modified":"2025-01-23T18:26:02","modified_gmt":"2025-01-24T02:26:02","slug":"building-infographic-with-cloudinary-and-the-national-park-service-api","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api","title":{"rendered":"Building Infographics With Cloudinary and the National Park Service API"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>I read this fascinating article about how Cloudinary was used for a World of Warcraft (WOW) campaign, (<a href=\"https:\/\/mcvuk.com\/business-news\/how-cloudinary-made-world-of-warcrafts-first-ever-marketing-campaign-go-viral\/\">How Cloudinary made World of Warcraft\u2019s first-ever marketing campaign go viral<\/a>). My wife is a huge WOW player, and I remember when this campaign went live. She shared the infographics that were created for her character. At the time, I thought it was impressive, but I honestly had no idea Cloudinary was used for it. I thought it would be cool to see if I could build something similar.<\/p>\n<p>While not quite as exciting as a massive, online multiplayer role-playing game, I thought I\u2019d create an example that used data from the <a href=\"https:\/\/www.nps.gov\/index.htm\">National Park Service<\/a> (NPS).<\/p>\n<h2>The NPS API<\/h2>\n<p>The NPS API is free with an <a href=\"https:\/\/www.nps.gov\/subjects\/developer\/get-started.htm\">API key<\/a> and has a healthy rate limit of 1,000 calls per hour (some endpoints differ on their rates). Their <a href=\"https:\/\/www.nps.gov\/subjects\/developer\/api-documentation.htm\">documentation<\/a> provides an incredible range of supported information.<\/p>\n<p>For my demo, I\u2019ll make use of the <code>\/parks<\/code> endpoint, which as you can guess returns information about parks. The endpoint supports filtering parks by park code (a special identifier for parks) or state and supports pagination. You can do basic searches as well.<\/p>\n<p>The information returned for a park is rather detailed, including:<\/p>\n<ul>\n<li>The name as well as a description.<\/li>\n<li>Location, both in plain text as well as in latitude and longitude.<\/li>\n<li>A list of activities supported by the park as well as the educational topics that can be learned about by visiting the park.<\/li>\n<li>Contact information.<\/li>\n<li>Detailed information about when the park is open as well as exceptions for holidays.<\/li>\n<li>Information about any required fees.<\/li>\n<li>Important weather-related details that might impact the park.<\/li>\n<\/ul>\n<p>Best of all, a set of pictures from the park are returned as well.<\/p>\n<p>For our demo, we\u2019ll get a set of parks based on a state, and for each park, use Cloudinary to generate an infographic based on a photo from the park. Let\u2019s get started!<\/p>\n<h2>Getting Parks<\/h2>\n<p>As mentioned above, working with the NPS API requires a free key, so be sure to register and get one first. Once we have a key, the endpoint to get parks for a particular state looks like so:<\/p>\n<pre><code>https:\/\/developer.nps.gov\/api\/v1\/parks?stateCode=STATE&amp;limit=100&amp;fields=images&amp;api_key=API_KEY\n<\/code><\/pre>\n<p>I\u2019ve set the limit to 100, which in my testing is high enough to cover every state in America. Keep in mind though that if you need to, the API will return information about how to get the next page of results. Let\u2019s look at a function that wraps this up nicely for us:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> NPS_KEY = process.env.NPS_KEY;\n\n<span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getParksForState<\/span>(<span class=\"hljs-params\">state<\/span>) <\/span>{\n\n\t<span class=\"hljs-keyword\">let<\/span> resp = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`https:\/\/developer.nps.gov\/api\/v1\/parks?stateCode=<span class=\"hljs-subst\">${state}<\/span>&amp;limit=100&amp;fields=images&amp;api_key=<span class=\"hljs-subst\">${NPS_KEY}<\/span>`<\/span>);\n\t<span class=\"hljs-keyword\">return<\/span> (<span class=\"hljs-keyword\">await<\/span> resp.json()).data;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This would be better with error handling, of course, but for our simple needs, it does the trick. By returning the <code>.data<\/code> key of the result, we strip out the pagination information and return an array of parks.<\/p>\n<p>As mentioned above, the information returned for just one park is rather large, but if you\u2019d like, you can see a complete park record below:<\/p>\n<textarea style=\"width:100%;height: 400px\">\n{\n    &#8220;id&#8221;: &#8220;77E0D7F0-1942-494A-ACE2-9004D2BDC59E&#8221;,\n    &#8220;url&#8221;: &#8220;https:\/\/www.nps.gov\/abli\/index.htm&#8221;,\n    &#8220;fullName&#8221;: &#8220;Abraham Lincoln Birthplace National Historical Park&#8221;,\n    &#8220;parkCode&#8221;: &#8220;abli&#8221;,\n    &#8220;description&#8221;: &#8220;For over a century people from around the world have come to rural Central Kentucky to honor the humble beginnings of our 16th president, Abraham Lincoln. His early life on Kentucky&#8217;s frontier shaped his character and prepared him to lead the nation through Civil War. Visit our country&#8217;s first memorial to Lincoln, built with donations from young and old, and the site of his childhood home.&#8221;,\n    &#8220;latitude&#8221;: &#8220;37.5858662&#8221;,\n    &#8220;longitude&#8221;: &#8220;-85.67330523&#8221;,\n    &#8220;latLong&#8221;: &#8220;lat:37.5858662, long:-85.67330523&#8221;,\n    &#8220;activities&#8221;: [{\n            &#8220;id&#8221;: &#8220;13A57703-BB1A-41A2-94B8-53B692EB7238&#8221;,\n            &#8220;name&#8221;: &#8220;Astronomy&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;D37A0003-8317-4F04-8FB0-4CF0A272E195&#8221;,\n            &#8220;name&#8221;: &#8220;Stargazing&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;1DFACD97-1B9C-4F5A-80F2-05593604799E&#8221;,\n            &#8220;name&#8221;: &#8220;Food&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;C6D3230A-2CEA-4AFE-BFF3-DC1E2C2C4BB4&#8221;,\n            &#8220;name&#8221;: &#8220;Picnicking&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;B33DC9B6-0B7D-4322-BAD7-A13A34C584A3&#8221;,\n            &#8220;name&#8221;: &#8220;Guided Tours&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;A0631906-9672-4583-91DE-113B93DB6B6E&#8221;,\n            &#8220;name&#8221;: &#8220;Self-Guided Tours &#8211; Walking&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;42FD78B9-2B90-4AA9-BC43-F10E9FEA8B5A&#8221;,\n            &#8220;name&#8221;: &#8220;Hands-On&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;DF4A35E0-7983-4A3E-BC47-F37B872B0F25&#8221;,\n            &#8220;name&#8221;: &#8220;Junior Ranger Program&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;0B685688-3405-4E2A-ABBA-E3069492EC50&#8221;,\n            &#8220;name&#8221;: &#8220;Wildlife Watching&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;5A2C91D1-50EC-4B24-8BED-A2E11A1892DF&#8221;,\n            &#8220;name&#8221;: &#8220;Birdwatching&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;0C0D142F-06B5-4BE1-8B44-491B90F93DEB&#8221;,\n            &#8220;name&#8221;: &#8220;Park Film&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;C8F98B28-3C10-41AE-AA99-092B3B398C43&#8221;,\n            &#8220;name&#8221;: &#8220;Museum Exhibits&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;24380E3F-AD9D-4E38-BF13-C8EEB21893E7&#8221;,\n            &#8220;name&#8221;: &#8220;Shopping&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;467DC8B8-0B7D-436D-A026-80A22358F615&#8221;,\n            &#8220;name&#8221;: &#8220;Bookstore and Park Store&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;43800AD1-D439-40F3-AAB3-9FB651FE45BB&#8221;,\n            &#8220;name&#8221;: &#8220;Gift Shop and Souvenirs&#8221;\n        }\n    ],\n    &#8220;topics&#8221;: [{\n            &#8220;id&#8221;: &#8220;D10852A3-443C-4743-A5FA-6DD6D2A054B3&#8221;,\n            &#8220;name&#8221;: &#8220;Birthplace&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;F669BC40-BDC4-41C0-9ACE-B2CD25373045&#8221;,\n            &#8220;name&#8221;: &#8220;Presidents&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;0D00073E-18C3-46E5-8727-2F87B112DDC6&#8221;,\n            &#8220;name&#8221;: &#8220;Animals&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;957EF2BD-AC6C-4B7B-BD9A-87593ADC6691&#8221;,\n            &#8220;name&#8221;: &#8220;Birds&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;E25F3456-43ED-45DD-93BC-057F9B944F7A&#8221;,\n            &#8220;name&#8221;: &#8220;Caves, Caverns and Karst&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;F0F97E32-2F29-41B4-AF98-9FBE8DAB36B1&#8221;,\n            &#8220;name&#8221;: &#8220;Geology&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;4BE01DC5-52E6-4F18-8C9A-B22D65965F6D&#8221;,\n            &#8220;name&#8221;: &#8220;Groundwater&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;0E1A04CC-EB51-4F18-93D4-EC0B0B4EC1E3&#8221;,\n            &#8220;name&#8221;: &#8220;Freshwater Springs&#8221;\n        },\n        {\n            &#8220;id&#8221;: &#8220;A7359FC4-DAD8-45F5-AF15-7FF62F816ED3&#8221;,\n            &#8220;name&#8221;: &#8220;Night Sky&#8221;\n        }\n    ],\n    &#8220;states&#8221;: &#8220;KY&#8221;,\n    &#8220;contacts&#8221;: {\n        &#8220;phoneNumbers&#8221;: [{\n                &#8220;phoneNumber&#8221;: &#8220;2703583137&#8221;,\n                &#8220;description&#8221;: &#8220;&#8221;,\n                &#8220;extension&#8221;: &#8220;&#8221;,\n                &#8220;type&#8221;: &#8220;Voice&#8221;\n            },\n            {\n                &#8220;phoneNumber&#8221;: &#8220;2703583874&#8221;,\n                &#8220;description&#8221;: &#8220;&#8221;,\n                &#8220;extension&#8221;: &#8220;&#8221;,\n                &#8220;type&#8221;: &#8220;Fax&#8221;\n            }\n        ],\n        &#8220;emailAddresses&#8221;: [{\n            &#8220;description&#8221;: &#8220;&#8221;,\n            &#8220;emailAddress&#8221;: &#8220;ABLI_Administration@nps.gov&#8221;\n        }]\n    },\n    &#8220;entranceFees&#8221;: [],\n    &#8220;entrancePasses&#8221;: [],\n    &#8220;fees&#8221;: [],\n    &#8220;directionsInfo&#8221;: &#8220;The Birthplace Unit of the park is located approximately 2 miles south of the town of Hodgenville on U.S. Highway 31E South. The Boyhood Home Unit at Knob Creek is located approximately 10 miles northeast of the Birthplace Unit of the park.&#8221;,\n    &#8220;directionsUrl&#8221;: &#8220;http:\/\/www.nps.gov\/abli\/planyourvisit\/directions.htm&#8221;,\n    &#8220;operatingHours&#8221;: [{\n            &#8220;exceptions&#8221;: [{\n                    &#8220;exceptionHours&#8221;: {},\n                    &#8220;startDate&#8221;: &#8220;2023-11-23&#8221;,\n                    &#8220;name&#8221;: &#8220;Park is Closed&#8221;,\n                    &#8220;endDate&#8221;: &#8220;2023-11-23&#8221;\n                },\n                {\n                    &#8220;exceptionHours&#8221;: {},\n                    &#8220;startDate&#8221;: &#8220;2023-12-25&#8221;,\n                    &#8220;name&#8221;: &#8220;Park is Closed&#8221;,\n                    &#8220;endDate&#8221;: &#8220;2023-12-25&#8221;\n                },\n                {\n                    &#8220;exceptionHours&#8221;: {},\n                    &#8220;startDate&#8221;: &#8220;2024-01-01&#8221;,\n                    &#8220;name&#8221;: &#8220;Park is Closed&#8221;,\n                    &#8220;endDate&#8221;: &#8220;2024-01-01&#8221;\n                }\n            ],\n            &#8220;description&#8221;: &#8220;Memorial Building:\\nopen 9:00 am &#8211; 4:30 pm eastern time.\\n\\nBirthplace Unit Visitor Center and Grounds: \\nopen 9:00 am &#8211; 5:00 pm eastern time.&#8221;,\n            &#8220;standardHours&#8221;: {\n                &#8220;wednesday&#8221;: &#8220;9:00AM &#8211; 5:00PM&#8221;,\n                &#8220;monday&#8221;: &#8220;9:00AM &#8211; 5:00PM&#8221;,\n                &#8220;thursday&#8221;: &#8220;9:00AM &#8211; 5:00PM&#8221;,\n                &#8220;sunday&#8221;: &#8220;9:00AM &#8211; 5:00PM&#8221;,\n                &#8220;tuesday&#8221;: &#8220;9:00AM &#8211; 5:00PM&#8221;,\n                &#8220;friday&#8221;: &#8220;9:00AM &#8211; 5:00PM&#8221;,\n                &#8220;saturday&#8221;: &#8220;9:00AM &#8211; 5:00PM&#8221;\n            },\n            &#8220;name&#8221;: &#8220;Birthplace Unit&#8221;\n        },\n        {\n            &#8220;exceptions&#8221;: [{\n                    &#8220;exceptionHours&#8221;: {\n                        &#8220;wednesday&#8221;: &#8220;Closed&#8221;,\n                        &#8220;monday&#8221;: &#8220;Closed&#8221;,\n                        &#8220;thursday&#8221;: &#8220;Closed&#8221;,\n                        &#8220;sunday&#8221;: &#8220;10:00AM &#8211; 4:00PM&#8221;,\n                        &#8220;tuesday&#8221;: &#8220;Closed&#8221;,\n                        &#8220;friday&#8221;: &#8220;Closed&#8221;,\n                        &#8220;saturday&#8221;: &#8220;10:00AM &#8211; 4:00PM&#8221;\n                    },\n                    &#8220;startDate&#8221;: &#8220;2023-04-01&#8221;,\n                    &#8220;name&#8221;: &#8220;Spring Hours &#8211; Visitor Center at Knob Creek&#8221;,\n                    &#8220;endDate&#8221;: &#8220;2023-05-31&#8221;\n                },\n                {\n                    &#8220;exceptionHours&#8221;: {\n                        &#8220;wednesday&#8221;: &#8220;Closed&#8221;,\n                        &#8220;monday&#8221;: &#8220;Closed&#8221;,\n                        &#8220;thursday&#8221;: &#8220;Closed&#8221;,\n                        &#8220;sunday&#8221;: &#8220;10:00AM &#8211; 4:00PM&#8221;,\n                        &#8220;tuesday&#8221;: &#8220;Closed&#8221;,\n                        &#8220;friday&#8221;: &#8220;Closed&#8221;,\n                        &#8220;saturday&#8221;: &#8220;10:00AM &#8211; 4:00PM&#8221;\n                    },\n                    &#8220;startDate&#8221;: &#8220;2023-09-01&#8221;,\n                    &#8220;name&#8221;: &#8220;Fall Hours &#8211; Knob Creek Visitor Center&#8221;,\n                    &#8220;endDate&#8221;: &#8220;2023-10-31&#8221;\n                }\n            ],\n            &#8220;description&#8221;: &#8220;The Boyhood Home Unit at Knob Creek Grounds:\\nopen daily dawn to dusk.\\n\\nKnob Creek Tavern Visitor Center:\\nopen on weekends in April, May, September and October and 5 days a week from Memorial Day to Labor day from 10 am to 4pm (Thursday &#8211; Monday) closed for the winter.&#8221;,\n            &#8220;standardHours&#8221;: {\n                &#8220;wednesday&#8221;: &#8220;Closed&#8221;,\n                &#8220;monday&#8221;: &#8220;10:00AM &#8211; 4:00PM&#8221;,\n                &#8220;thursday&#8221;: &#8220;10:00AM &#8211; 4:00PM&#8221;,\n                &#8220;sunday&#8221;: &#8220;10:00AM &#8211; 4:00PM&#8221;,\n                &#8220;tuesday&#8221;: &#8220;Closed&#8221;,\n                &#8220;friday&#8221;: &#8220;10:00AM &#8211; 4:00PM&#8221;,\n                &#8220;saturday&#8221;: &#8220;10:00AM &#8211; 4:00PM&#8221;\n            },\n            &#8220;name&#8221;: &#8220;Boyhood Unit&#8221;\n        }\n    ],\n    &#8220;addresses&#8221;: [{\n            &#8220;postalCode&#8221;: &#8220;42748&#8221;,\n            &#8220;city&#8221;: &#8220;Hodgenville&#8221;,\n            &#8220;stateCode&#8221;: &#8220;KY&#8221;,\n            &#8220;countryCode&#8221;: &#8220;US&#8221;,\n            &#8220;provinceTerritoryCode&#8221;: &#8220;&#8221;,\n            &#8220;line1&#8221;: &#8220;2995 Lincoln Farm Road&#8221;,\n            &#8220;type&#8221;: &#8220;Physical&#8221;,\n            &#8220;line3&#8221;: &#8220;&#8221;,\n            &#8220;line2&#8221;: &#8220;&#8221;\n        },\n        {\n            &#8220;postalCode&#8221;: &#8220;42748&#8221;,\n            &#8220;city&#8221;: &#8220;Hodgenville&#8221;,\n            &#8220;stateCode&#8221;: &#8220;KY&#8221;,\n            &#8220;countryCode&#8221;: &#8220;US&#8221;,\n            &#8220;provinceTerritoryCode&#8221;: &#8220;&#8221;,\n            &#8220;line1&#8221;: &#8220;2995 Lincoln Farm Road&#8221;,\n            &#8220;type&#8221;: &#8220;Mailing&#8221;,\n            &#8220;line3&#8221;: &#8220;&#8221;,\n            &#8220;line2&#8221;: &#8220;&#8221;\n        }\n    ],\n    &#8220;images&#8221;: [{\n            &#8220;credit&#8221;: &#8220;NPS Photo&#8221;,\n            &#8220;title&#8221;: &#8220;The Memorial Building with fall colors&#8221;,\n            &#8220;altText&#8221;: &#8220;The Memorial Building surrounded by fall colors&#8221;,\n            &#8220;caption&#8221;: &#8220;Over 200,000 people a year come to walk up the steps of the Memorial Building to visit the site where Abraham Lincoln was born&#8221;,\n            &#8220;url&#8221;: &#8220;https:\/\/www.nps.gov\/common\/uploads\/structured_data\/3C861078-1DD8-B71B-0B774A242EF6A706.jpg&#8221;\n        },\n        {\n            &#8220;credit&#8221;: &#8220;NPS Photo&#8221;,\n            &#8220;title&#8221;: &#8220;The Memorial Building&#8221;,\n            &#8220;altText&#8221;: &#8220;The first memorial erected to honor Abraham Lincoln&#8221;,\n            &#8220;caption&#8221;: &#8220;The Memorial Building constructed on the traditional site of the birth of Abraham Lincoln.&#8221;,\n            &#8220;url&#8221;: &#8220;https:\/\/www.nps.gov\/common\/uploads\/structured_data\/3C861263-1DD8-B71B-0B71EF9B95F9644F.jpg&#8221;\n        },\n        {\n            &#8220;credit&#8221;: &#8220;NPS Photo&#8221;,\n            &#8220;title&#8221;: &#8220;The Symbolic Birth Cabin of Abraham Lincoln&#8221;,\n            &#8220;altText&#8221;: &#8220;The symbolic birth cabin on the traditional site of the birth of Abraham Lincoln.&#8221;,\n            &#8220;caption&#8221;: &#8220;The symbolic birth cabin of Abraham Lincoln.&#8221;,\n            &#8220;url&#8221;: &#8220;https:\/\/www.nps.gov\/common\/uploads\/structured_data\/3C86137D-1DD8-B71B-0B978BACD7EBAEF1.jpg&#8221;\n        },\n        {\n            &#8220;credit&#8221;: &#8220;NPS Photo&#8221;,\n            &#8220;title&#8221;: &#8220;Statue of the Lincoln Family in the Visitor Center&#8221;,\n            &#8220;altText&#8221;: &#8220;Statue of the Lincoln family in the park&#8217;s Visitor Center&#8221;,\n            &#8220;caption&#8221;: &#8220;Visitors to the park can view the statue of the Lincoln family.&#8221;,\n            &#8220;url&#8221;: &#8220;https:\/\/www.nps.gov\/common\/uploads\/structured_data\/3C8614D1-1DD8-B71B-0B1AF72CA452B051.jpg&#8221;\n        }\n    ],\n    &#8220;weatherInfo&#8221;: &#8220;There are four distinct seasons in Central Kentucky. However, temperature and weather conditions can vary widely within those seasons. Spring and Fall are generally pleasant with frequent rain showers. Summer is usually hot and humid. Winter is moderately cold with mixed precipitation.&#8221;,\n    &#8220;name&#8221;: &#8220;Abraham Lincoln Birthplace&#8221;,\n    &#8220;designation&#8221;: &#8220;National Historical Park&#8221;\n}\n<\/textarea>\n<p>Have fun reading that if you wish, but in the next step, we\u2019ll figure out what parts of that make sense for our infographic.<\/p>\n<p>With this function in place, I then wrote some code to request the parks in Louisiana and loop over the results:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> laParks = <span class=\"hljs-keyword\">await<\/span> getParksForState(<span class=\"hljs-string\">'la'<\/span>);\n<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`Creating infographics for <span class=\"hljs-subst\">${laParks.length}<\/span> parks.\\n\\n`<\/span>);\n\nlaParks.forEach(<span class=\"hljs-keyword\">async<\/span> l =&gt; {\n\n\t<span class=\"hljs-comment\">\/\/ Stuff to do here!<\/span>\n\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Designing the Infographic<\/h2>\n<p>Alright, considering we\u2019ve got a wealth of information coming from the API, what would make sense to include in our infographic? For this demo, I decided on the following:<\/p>\n<ul>\n<li>The full name of the park.<\/li>\n<li>Contact information for the park (phone and email).<\/li>\n<li>The park address.<\/li>\n<\/ul>\n<p>Here\u2019s an example of one of the results:<\/p>\n<img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/raymondcamden\/image\/upload\/c_fit,h_600,w_800\/b_black,bo_10px_solid_black,co_white,g_north_west,l_text:NationalPark-VariableVF.ttf_26_bold:New%20Orleans%20Jazz%20National%20Historical%20Park\/b_black,bo_10px_solid_black,co_white,g_south_east,l_text:Arial_10_bold:%0APhone%3A%20504-589-3882%0AEmail%3A%20jazz_interpretation%40nps.gov%20%0A%0A916%20N%20Peters%20St%0ANew%20Orleans%20LA%2070116%0A\/v1\/parks\/jazz\">\n<p>To build this, I <em>finally<\/em> made use of the <a href=\"https:\/\/cloudinary.com\/documentation\/node_integration\">Cloudinary Node SDK<\/a>. I\u2019ve avoided it for a while now as I love how I can simply craft URLs by working with strings. I\u2019ve avoided the JavaScript SDK because I felt like I could get by without adding that to the page load. This was less of a concern in a Node application. I also felt like my transformations will be more complex and I was hopeful the SDK could help with that.<\/p>\n<p>While Cloudinary can work with remote images, my first step was to upload the park image. If you remember from the code above, I\u2019m looping over each result from the API and assigning it to a variable, <code>l<\/code>. For my uploads, I named them according to their park code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> options = {\n\t<span class=\"hljs-attr\">public_id<\/span>: <span class=\"hljs-string\">`parks\/<span class=\"hljs-subst\">${l.parkCode}<\/span>`<\/span>\n};\n<span class=\"hljs-keyword\">let<\/span> img = <span class=\"hljs-keyword\">await<\/span> cloudinary.uploader.upload(l.images&#91;<span class=\"hljs-number\">0<\/span>].url,options);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, I worked on the content that\u2019s displayed in the lower right of the infographic. Namely, the contact information and address. To do this, I\u2019ll check for each part of the park record and build out a string.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> phone = <span class=\"hljs-string\">''<\/span>;\n<span class=\"hljs-keyword\">if<\/span>(l.contacts.phoneNumbers) {\n\tl.contacts.phoneNumbers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">p<\/span> =&gt;<\/span> {\n\t\t<span class=\"hljs-keyword\">if<\/span>(p.type === <span class=\"hljs-string\">'Voice'<\/span>) {\n\t\t\tphone = p.phoneNumber;\n\t\t\t<span class=\"hljs-keyword\">if<\/span>(p.extension !== <span class=\"hljs-string\">''<\/span>) phone += <span class=\"hljs-string\">` Ext: <span class=\"hljs-subst\">${p.extension}<\/span>`<\/span>;\n\t\t}\n\t});\n}\n<span class=\"hljs-keyword\">if<\/span>(phone !== <span class=\"hljs-string\">''<\/span>) phone = <span class=\"hljs-string\">`Phone: <span class=\"hljs-subst\">${phone}<\/span>`<\/span>;\n\n<span class=\"hljs-keyword\">let<\/span> email = <span class=\"hljs-string\">''<\/span>;\n<span class=\"hljs-comment\">\/\/ unlike phone, always use first email<\/span>\n<span class=\"hljs-keyword\">if<\/span>(l.contacts.emailAddresses) {\n\temail = <span class=\"hljs-string\">`Email: <span class=\"hljs-subst\">${l.contacts.emailAddresses&#91;<span class=\"hljs-number\">0<\/span>].emailAddress}<\/span>`<\/span>\n}\n\n<span class=\"hljs-keyword\">let<\/span> address = <span class=\"hljs-string\">''<\/span>;\n<span class=\"hljs-keyword\">if<\/span>(l.addresses &amp;&amp; l.addresses&#91;<span class=\"hljs-number\">0<\/span>]) {\n\taddress = l.addresses&#91;<span class=\"hljs-number\">0<\/span>].line1;\n\t<span class=\"hljs-keyword\">if<\/span>(l.addresses&#91;<span class=\"hljs-number\">0<\/span>].line2 !== <span class=\"hljs-string\">''<\/span>) address += <span class=\"hljs-string\">`\\n<span class=\"hljs-subst\">${l.addresses&#91;<span class=\"hljs-number\">0<\/span>].line2}<\/span>`<\/span>;\n\t<span class=\"hljs-keyword\">if<\/span>(l.addresses&#91;<span class=\"hljs-number\">0<\/span>].line3 !== <span class=\"hljs-string\">''<\/span>) address += <span class=\"hljs-string\">`\\n<span class=\"hljs-subst\">${l.addresses&#91;<span class=\"hljs-number\">0<\/span>].line3}<\/span>`<\/span>;\n\taddress += <span class=\"hljs-string\">`\\n<span class=\"hljs-subst\">${l.addresses&#91;<span class=\"hljs-number\">0<\/span>].city}<\/span> <span class=\"hljs-subst\">${l.addresses&#91;<span class=\"hljs-number\">0<\/span>].stateCode}<\/span> <span class=\"hljs-subst\">${l.addresses&#91;<span class=\"hljs-number\">0<\/span>].postalCode}<\/span>`<\/span>;\n}\n\n<span class=\"hljs-keyword\">let<\/span> details = \n<span class=\"hljs-string\">`\n<span class=\"hljs-subst\">${phone}<\/span>\n<span class=\"hljs-subst\">${email}<\/span> \n\n<span class=\"hljs-subst\">${address}<\/span>\n`<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The net result here is a string that <em>may<\/em> contain a phone, an email, and an address. In general, these values seemed to be consistently available in the data so this always \u201cjust worked.\u201d<\/p>\n<p>Now it\u2019s time to actually do the transformations. The general form of how this is done in the SDK is like so:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">let<\/span> result = cloudinary.url(img.public_id, {\n\t<span class=\"hljs-attr\">transformation<\/span>: &#91;\n\t\t<span class=\"hljs-comment\">\/\/ a set of transforms<\/span>\n\t]\n});\n\n<span class=\"hljs-built_in\">console<\/span>.log(result);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>I\u2019ll use the <code>url<\/code> method as all I want is the URL of the image, not an HTML image tag. I\u2019ll then add my transformations, and as it\u2019s an array, it was simple to add, test, and repeat.<\/p>\n<p>My first transformation did a resize:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">{ <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">800<\/span>, height: <span class=\"hljs-number\">600<\/span>, crop: <span class=\"hljs-string\">'fit'<\/span> },\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, I\u2019ll add the park name to the top left of the image:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">{<span class=\"hljs-attr\">overlay<\/span>: {<span class=\"hljs-attr\">font_family<\/span>: <span class=\"hljs-string\">'NationalPark-VariableVF.ttf'<\/span>, <span class=\"hljs-attr\">font_size<\/span>: <span class=\"hljs-number\">26<\/span>, <span class=\"hljs-attr\">font_weight<\/span>: <span class=\"hljs-string\">'bold'<\/span>, <span class=\"hljs-attr\">text<\/span>: l.fullName}, <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'white'<\/span>, <span class=\"hljs-attr\">gravity<\/span>:<span class=\"hljs-string\">'north_west'<\/span>, <span class=\"hljs-attr\">background<\/span>:<span class=\"hljs-string\">'black'<\/span>, <span class=\"hljs-attr\">border<\/span>:<span class=\"hljs-string\">'10px_solid_black'<\/span>},\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Note that I\u2019ll use the <a href=\"https:\/\/cloudinary.com\/documentation\/layers#custom_fonts\">custom fonts<\/a> feature with a cool, free font called <a href=\"https:\/\/nationalparktypeface.com\/\">National Park Typeface<\/a>. Also, note the use of a border to add a black box around the text. This ensures the white text is readable.<\/p>\n<p>Finally, I\u2019ll add the large details string:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">{<span class=\"hljs-attr\">overlay<\/span>: {<span class=\"hljs-attr\">font_family<\/span>: <span class=\"hljs-string\">'Arial'<\/span>, <span class=\"hljs-attr\">font_size<\/span>: <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-attr\">font_weight<\/span>: <span class=\"hljs-string\">'bold'<\/span>, <span class=\"hljs-attr\">text<\/span>: details}, <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'white'<\/span>, <span class=\"hljs-attr\">gravity<\/span>:<span class=\"hljs-string\">'south_east'<\/span>, <span class=\"hljs-attr\">background<\/span>:<span class=\"hljs-string\">'black'<\/span>, <span class=\"hljs-attr\">border<\/span>:<span class=\"hljs-string\">'10px_solid_black'<\/span>} \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>For this, I switched back to Arial and a smaller font. Design is <em>not<\/em> my strongest skill, so blame any unpleasantness on me, not Cloudinary!<\/p>\n<p>And that\u2019s it! Here\u2019s one beautiful example:<\/p>\n<img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/raymondcamden\/image\/upload\/c_fit,h_600,w_800\/b_black,bo_10px_solid_black,co_white,g_north_west,l_text:NationalPark-VariableVF.ttf_26_bold:Vicksburg%20National%20Military%20Park\/b_black,bo_10px_solid_black,co_white,g_south_east,l_text:Arial_10_bold:%0APhone%3A%206016360583%0AEmail%3A%20Vick_Interpretation%40nps.gov%20%0A%0A3201%20Clay%20Street%0AVicksburg%20MS%2039183%0A\/v1\/parks\/vick\">\n<p>The complete source code may be found below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> NPS_KEY = process.env.NPS_KEY;\n\n<span class=\"hljs-keyword\">const<\/span> cloudinary = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'cloudinary'<\/span>).v2;\n<span class=\"hljs-keyword\">const<\/span> API_KEY = process.env.API_KEY;\n<span class=\"hljs-keyword\">const<\/span> API_SECRET = process.env.API_SECRET;\n<span class=\"hljs-keyword\">const<\/span> CLOUD_NAME = <span class=\"hljs-string\">'raymondcamden'<\/span>;\n\ncloudinary.config({\n\t<span class=\"hljs-attr\">cloud_name<\/span>: CLOUD_NAME,\n\t<span class=\"hljs-attr\">api_key<\/span>: API_KEY, \n\t<span class=\"hljs-attr\">api_secret<\/span>: API_SECRET, \n\t<span class=\"hljs-attr\">secure<\/span>: <span class=\"hljs-literal\">true<\/span>\n});\n\n<span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getParksForState<\/span>(<span class=\"hljs-params\">state<\/span>) <\/span>{\n\n\t<span class=\"hljs-keyword\">let<\/span> resp = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`https:\/\/developer.nps.gov\/api\/v1\/parks?stateCode=<span class=\"hljs-subst\">${state}<\/span>&amp;limit=100&amp;fields=images&amp;api_key=<span class=\"hljs-subst\">${NPS_KEY}<\/span>`<\/span>);\n\t<span class=\"hljs-keyword\">return<\/span> (<span class=\"hljs-keyword\">await<\/span> resp.json()).data;\n}\n\n(<span class=\"hljs-keyword\">async<\/span> () =&gt; {\n\n\t<span class=\"hljs-keyword\">let<\/span> laParks = <span class=\"hljs-keyword\">await<\/span> getParksForState(<span class=\"hljs-string\">'la'<\/span>);\n\t<span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`Creating infographics for <span class=\"hljs-subst\">${laParks.length}<\/span> parks.\\n\\n`<\/span>);\n\n\tlaParks.forEach(<span class=\"hljs-keyword\">async<\/span> l =&gt; {\n\n\t\t<span class=\"hljs-keyword\">let<\/span> options = {\n\t\t\t<span class=\"hljs-attr\">public_id<\/span>: <span class=\"hljs-string\">`parks\/<span class=\"hljs-subst\">${l.parkCode}<\/span>`<\/span>\n\t\t};\n\t\t<span class=\"hljs-keyword\">let<\/span> img = <span class=\"hljs-keyword\">await<\/span> cloudinary.uploader.upload(l.images&#91;<span class=\"hljs-number\">0<\/span>].url,options);\n\n\t\t<span class=\"hljs-keyword\">let<\/span> phone = <span class=\"hljs-string\">''<\/span>;\n\t\t<span class=\"hljs-keyword\">if<\/span>(l.contacts.phoneNumbers) {\n\t\t\tl.contacts.phoneNumbers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">p<\/span> =&gt;<\/span> {\n\t\t\t\t<span class=\"hljs-keyword\">if<\/span>(p.type === <span class=\"hljs-string\">'Voice'<\/span>) {\n\t\t\t\t\tphone = p.phoneNumber;\n\t\t\t\t\t<span class=\"hljs-keyword\">if<\/span>(p.extension !== <span class=\"hljs-string\">''<\/span>) phone += <span class=\"hljs-string\">` Ext: <span class=\"hljs-subst\">${p.extension}<\/span>`<\/span>;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\t<span class=\"hljs-keyword\">if<\/span>(phone !== <span class=\"hljs-string\">''<\/span>) phone = <span class=\"hljs-string\">`Phone: <span class=\"hljs-subst\">${phone}<\/span>`<\/span>;\n\n\t\t<span class=\"hljs-keyword\">let<\/span> email = <span class=\"hljs-string\">''<\/span>;\n\t\t<span class=\"hljs-comment\">\/\/ unlike phone, always use first email<\/span>\n\t\t<span class=\"hljs-keyword\">if<\/span>(l.contacts.emailAddresses) {\n\t\t\temail = <span class=\"hljs-string\">`Email: <span class=\"hljs-subst\">${l.contacts.emailAddresses&#91;<span class=\"hljs-number\">0<\/span>].emailAddress}<\/span>`<\/span>\n\t\t}\n\n\t\t<span class=\"hljs-keyword\">let<\/span> address = <span class=\"hljs-string\">''<\/span>;\n\t\t<span class=\"hljs-keyword\">if<\/span>(l.addresses &amp;&amp; l.addresses&#91;<span class=\"hljs-number\">0<\/span>]) {\n\t\t\taddress = l.addresses&#91;<span class=\"hljs-number\">0<\/span>].line1;\n\t\t\t<span class=\"hljs-keyword\">if<\/span>(l.addresses&#91;<span class=\"hljs-number\">0<\/span>].line2 !== <span class=\"hljs-string\">''<\/span>) address += <span class=\"hljs-string\">`\\n<span class=\"hljs-subst\">${l.addresses&#91;<span class=\"hljs-number\">0<\/span>].line2}<\/span>`<\/span>;\n\t\t\t<span class=\"hljs-keyword\">if<\/span>(l.addresses&#91;<span class=\"hljs-number\">0<\/span>].line3 !== <span class=\"hljs-string\">''<\/span>) address += <span class=\"hljs-string\">`\\n<span class=\"hljs-subst\">${l.addresses&#91;<span class=\"hljs-number\">0<\/span>].line3}<\/span>`<\/span>;\n\t\t\taddress += <span class=\"hljs-string\">`\\n<span class=\"hljs-subst\">${l.addresses&#91;<span class=\"hljs-number\">0<\/span>].city}<\/span> <span class=\"hljs-subst\">${l.addresses&#91;<span class=\"hljs-number\">0<\/span>].stateCode}<\/span> <span class=\"hljs-subst\">${l.addresses&#91;<span class=\"hljs-number\">0<\/span>].postalCode}<\/span>`<\/span>;\n\t\t}\n\n\t\t<span class=\"hljs-keyword\">let<\/span> details = \n<span class=\"hljs-string\">`\n<span class=\"hljs-subst\">${phone}<\/span>\n<span class=\"hljs-subst\">${email}<\/span> \n\n<span class=\"hljs-subst\">${address}<\/span>\n`<\/span>;\n\n\t\t<span class=\"hljs-comment\">\/*\n\t\tTransformations:\n\t\t1) Resize\n\t\t2) Add name to top left\n\t\t3) Add details to bottom right\n\t\t*\/<\/span>\n\t\t\n\t\t<span class=\"hljs-keyword\">let<\/span> result = cloudinary.url(img.public_id, {\n\t\t\t<span class=\"hljs-attr\">transformation<\/span>: &#91;\n\t\t\t\t{ <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">800<\/span>, <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-number\">600<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">'fit'<\/span> },\n\t\t\t\t{<span class=\"hljs-attr\">overlay<\/span>: {<span class=\"hljs-attr\">font_family<\/span>: <span class=\"hljs-string\">'NationalPark-VariableVF.ttf'<\/span>, <span class=\"hljs-attr\">font_size<\/span>: <span class=\"hljs-number\">26<\/span>, <span class=\"hljs-attr\">font_weight<\/span>: <span class=\"hljs-string\">'bold'<\/span>, <span class=\"hljs-attr\">text<\/span>: l.fullName}, <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'white'<\/span>, <span class=\"hljs-attr\">gravity<\/span>:<span class=\"hljs-string\">'north_west'<\/span>, <span class=\"hljs-attr\">background<\/span>:<span class=\"hljs-string\">'black'<\/span>, <span class=\"hljs-attr\">border<\/span>:<span class=\"hljs-string\">'10px_solid_black'<\/span>},\n\t\t\t\t{<span class=\"hljs-attr\">overlay<\/span>: {<span class=\"hljs-attr\">font_family<\/span>: <span class=\"hljs-string\">'Arial'<\/span>, <span class=\"hljs-attr\">font_size<\/span>: <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-attr\">font_weight<\/span>: <span class=\"hljs-string\">'bold'<\/span>, <span class=\"hljs-attr\">text<\/span>: details}, <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">'white'<\/span>, <span class=\"hljs-attr\">gravity<\/span>:<span class=\"hljs-string\">'south_east'<\/span>, <span class=\"hljs-attr\">background<\/span>:<span class=\"hljs-string\">'black'<\/span>, <span class=\"hljs-attr\">border<\/span>:<span class=\"hljs-string\">'10px_solid_black'<\/span>} \n\t\t\t]\n\t\t});\n\n\t\t<span class=\"hljs-built_in\">console<\/span>.log(result);\n\t});\n\n\n})();\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":30762,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[332,134],"class_list":["post-30733","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-api","tag-guest-post"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Building Infographics With Cloudinary and the National Park Service API<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Infographics With Cloudinary and the National Park Service API\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-01T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-24T02:26:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1687206539\/Blog-NPS-api-infographic\/Blog-NPS-api-infographic-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Building Infographics With Cloudinary and the National Park Service API\",\"datePublished\":\"2023-08-01T14:00:00+00:00\",\"dateModified\":\"2025-01-24T02:26:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1687206539\/Blog-NPS-api-infographic\/Blog-NPS-api-infographic.jpg?_i=AA\",\"keywords\":[\"API\",\"Guest Post\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api\",\"url\":\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api\",\"name\":\"Building Infographics With Cloudinary and the National Park Service API\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1687206539\/Blog-NPS-api-infographic\/Blog-NPS-api-infographic.jpg?_i=AA\",\"datePublished\":\"2023-08-01T14:00:00+00:00\",\"dateModified\":\"2025-01-24T02:26:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1687206539\/Blog-NPS-api-infographic\/Blog-NPS-api-infographic.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1687206539\/Blog-NPS-api-infographic\/Blog-NPS-api-infographic.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building Infographics With Cloudinary and the National Park Service API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building Infographics With Cloudinary and the National Park Service API","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api","og_locale":"en_US","og_type":"article","og_title":"Building Infographics With Cloudinary and the National Park Service API","og_url":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api","og_site_name":"Cloudinary Blog","article_published_time":"2023-08-01T14:00:00+00:00","article_modified_time":"2025-01-24T02:26:02+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1687206539\/Blog-NPS-api-infographic\/Blog-NPS-api-infographic-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Building Infographics With Cloudinary and the National Park Service API","datePublished":"2023-08-01T14:00:00+00:00","dateModified":"2025-01-24T02:26:02+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1687206539\/Blog-NPS-api-infographic\/Blog-NPS-api-infographic.jpg?_i=AA","keywords":["API","Guest Post"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api","url":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api","name":"Building Infographics With Cloudinary and the National Park Service API","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1687206539\/Blog-NPS-api-infographic\/Blog-NPS-api-infographic.jpg?_i=AA","datePublished":"2023-08-01T14:00:00+00:00","dateModified":"2025-01-24T02:26:02+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1687206539\/Blog-NPS-api-infographic\/Blog-NPS-api-infographic.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1687206539\/Blog-NPS-api-infographic\/Blog-NPS-api-infographic.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/building-infographic-with-cloudinary-and-the-national-park-service-api#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building Infographics With Cloudinary and the National Park Service API"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1687206539\/Blog-NPS-api-infographic\/Blog-NPS-api-infographic.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/30733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=30733"}],"version-history":[{"count":12,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/30733\/revisions"}],"predecessor-version":[{"id":36615,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/30733\/revisions\/36615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/30762"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=30733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=30733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=30733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}