{"id":359,"date":"2023-06-07T03:51:32","date_gmt":"2023-06-07T03:51:32","guid":{"rendered":"https:\/\/larrybuffaloboy.com\/?p=359"},"modified":"2023-06-05T03:53:49","modified_gmt":"2023-06-05T03:53:49","slug":"noaa-tides-and-currents-station-map","status":"publish","type":"post","link":"https:\/\/larrybuffaloboy.com\/index.php\/2023\/06\/07\/noaa-tides-and-currents-station-map\/","title":{"rendered":"NOAA Tides And Currents Station Map"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"580\" src=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/landing-1-1024x580.png\" alt=\"NOAA Tides and Currents Station Map\" class=\"wp-image-363\" srcset=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/landing-1-1024x580.png 1024w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/landing-1-300x170.png 300w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/landing-1-768x435.png 768w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/landing-1.png 1489w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>This is the feature product of the National Ocean Service Tides and Currents <a href=\"https:\/\/tidesandcurrents.noaa.gov\/\">website<\/a>. You can view this map <a rel=\"noreferrer noopener\" href=\"https:\/\/tidesandcurrents.noaa.gov\/map\/\" target=\"_blank\">here<\/a>. The map is a visual display of all of the coastal tide stations across the USA and territories, as well as the various tide data collected. The initial proposal was to replace an existing legacy map, writing this now I wish I had kept the screenshots of the old UI for comparison. The data in the old map was coming from perl script calls to the database, and the new map was going to integrate all of the new API capabilities that the NOS Center for Operational Oceanographic Products and Services (CO-OPS) have produced.<\/p>\n\n\n\n<p>I was the main developer and designer of this product working alongside NOS oceanographers to execute their requirements. The map is using LeafletJS and HighchartsJS for the charts. The main challenge with this product is the large amount of data and API calls needed. There was also a learning curve at the time of development learning about all of the types of tide stations and ocean data that needed to be represented. <\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"498\" src=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/cluster-1024x498.png\" alt=\"NOAA Tides and Currents Station Map cluster \" class=\"wp-image-366\" srcset=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/cluster-1024x498.png 1024w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/cluster-300x146.png 300w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/cluster-768x373.png 768w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/cluster-1536x747.png 1536w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/cluster.png 1892w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"564\" src=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/watertemp-1024x564.png\" alt=\"NOAA Tides and Currents Station Map water temperature view\" class=\"wp-image-365\" srcset=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/watertemp-1024x564.png 1024w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/watertemp-300x165.png 300w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/watertemp-768x423.png 768w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/watertemp.png 1497w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"627\" src=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/search-1024x627.png\" alt=\"NOAA Tides and Currents Station Map Station listing \" class=\"wp-image-364\" srcset=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/search-1024x627.png 1024w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/search-300x184.png 300w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/search-768x470.png 768w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/search.png 1347w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"573\" src=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/cambridge-1024x573.png\" alt=\"NOAA Tides and Currents Station Map popup\" class=\"wp-image-361\" srcset=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/cambridge-1024x573.png 1024w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/cambridge-300x168.png 300w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/cambridge-768x430.png 768w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/cambridge.png 1520w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/charts-1024x575.png\" alt=\"NOAA Tides and Currents Station Map charts example\" class=\"wp-image-362\" srcset=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/charts-1024x575.png 1024w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/charts-300x169.png 300w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/charts-768x432.png 768w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/charts.png 1518w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"575\" src=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/airgap-1024x575.png\" alt=\"NOAA Tides and Currents Station Map air gap station\" class=\"wp-image-360\" srcset=\"https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/airgap-1024x575.png 1024w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/airgap-300x168.png 300w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/airgap-768x431.png 768w, https:\/\/larrybuffaloboy.com\/wp-content\/uploads\/2023\/06\/airgap.png 1518w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This is the feature product of the National Ocean Service Tides and Currents website. You can view this map here. The map is a visual display of all of the coastal tide stations across the USA and territories, as well as the various tide data collected. The initial proposal was to replace an existing legacy [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/posts\/359"}],"collection":[{"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/comments?post=359"}],"version-history":[{"count":13,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/posts\/359\/revisions"}],"predecessor-version":[{"id":379,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/posts\/359\/revisions\/379"}],"wp:attachment":[{"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/media?parent=359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/categories?post=359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/larrybuffaloboy.com\/index.php\/wp-json\/wp\/v2\/tags?post=359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}