{"id":821,"date":"2020-06-04T10:20:03","date_gmt":"2020-06-04T15:20:03","guid":{"rendered":"https:\/\/offtherichterdesign.com\/Blog\/?p=821"},"modified":"2025-08-13T14:28:55","modified_gmt":"2025-08-13T19:28:55","slug":"interactive-map-for-north-dakota-state-university-moorhead","status":"publish","type":"post","link":"https:\/\/offtherichterdesign.com\/Blog\/interactive-map-for-north-dakota-state-university-moorhead\/","title":{"rendered":"Interactive Map for North Dakota State University"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"458\" src=\"https:\/\/offtherichterdesign.com\/Blog\/wp-content\/uploads\/2024\/07\/Interactive-Map-for-NDSU-1024x458.png\" alt=\"Interactive Map for NDSU\" class=\"wp-image-822\" srcset=\"https:\/\/offtherichterdesign.com\/Blog\/wp-content\/uploads\/2024\/07\/Interactive-Map-for-NDSU-1024x458.png 1024w, https:\/\/offtherichterdesign.com\/Blog\/wp-content\/uploads\/2024\/07\/Interactive-Map-for-NDSU-300x134.png 300w, https:\/\/offtherichterdesign.com\/Blog\/wp-content\/uploads\/2024\/07\/Interactive-Map-for-NDSU-768x343.png 768w, https:\/\/offtherichterdesign.com\/Blog\/wp-content\/uploads\/2024\/07\/Interactive-Map-for-NDSU.png 1445w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We\u2019re excited to highlight the <strong>Interactive Map<\/strong> project developed for <strong>North Dakota State University (NDSU)<\/strong> \u2014 a fully customized, responsive tool designed to help students and visitors explore campus housing and dining options in a visually engaging and intuitive way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Project Overview<\/h2>\n\n\n\n<p><strong>Client:<\/strong> North Dakota State University<br><strong>Objective:<\/strong> Build an interactive campus map showcasing dorms, dining centers, and building amenities<br><strong>Technology:<\/strong> Mapbox, Custom JavaScript\/CSS<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bringing Campus to Life<\/h2>\n\n\n\n<p>The map was designed to showcase NDSU\u2019s wide variety of housing and dining services, providing students with an easy way to filter and explore their options. Whether a visitor is on a desktop, tablet, or smartphone, the map adapts seamlessly to the screen size, making it accessible on the go.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Core Features Include:<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dynamic Filtering:<\/strong><br>Users can filter buildings by:\n<ul class=\"wp-block-list\">\n<li><strong>Type:<\/strong> Apartment or Residence Hall<\/li>\n\n\n\n<li><strong>Style:<\/strong> Traditional Style \u2013 Low Rise, Suite Style \u2013 High Rise, or Apartment Style<\/li>\n\n\n\n<li><strong>Gender:<\/strong> Women\u2019s, Men\u2019s, or Co-Ed housing<\/li>\n\n\n\n<li><strong>Connected to Dining Center:<\/strong> Yes or No<\/li>\n\n\n\n<li><strong>Air Conditioning:<\/strong> Yes or No<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Visual Experience:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Grayscale Base Map<\/strong> for a clean, professional look<\/li>\n\n\n\n<li><strong>3D Building Models<\/strong> for enhanced spatial understanding<\/li>\n\n\n\n<li><strong>Yellow Dots<\/strong> marking virtual tours of dorm buildings<\/li>\n\n\n\n<li><strong>Green Dots<\/strong> marking the names and locations of dining centers<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Virtual Tours:<\/strong><br>The map integrates immersive virtual dorm tours created by <strong>Be More Colorful<\/strong>, allowing prospective students to \u201cstep inside\u201d and explore spaces without being on campus.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Development Process<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Concept &amp; Planning:<\/strong> Collaborated with NDSU to define filtering criteria, user interface needs, and visual style.<\/li>\n\n\n\n<li><strong>Mapbox Implementation:<\/strong> Used Mapbox to design and style the map with responsive 3D elements and interactive controls.<\/li>\n\n\n\n<li><strong>Custom Coding:<\/strong> Built custom JavaScript functionality for the multi-layered filtering system.<\/li>\n\n\n\n<li><strong>Partner Integration:<\/strong> Embedded virtual tours from Be More Colorful to enhance the user experience.<\/li>\n\n\n\n<li><strong>Testing &amp; Launch:<\/strong> Conducted usability testing across devices to ensure smooth navigation and optimal performance.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Impact<\/h2>\n\n\n\n<p>The <strong>Interactive Map<\/strong> now serves as a valuable resource for prospective and current students, helping them make informed housing and dining choices. It combines practicality with an engaging visual experience, making it a powerful marketing and informational tool for NDSU.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>This project is a perfect example of how thoughtful design, modern mapping technology, and collaborative partnerships can come together to create an engaging, user-focused solution. The NDSU Interactive Map not only guides students through their housing and dining options but also reflects the university\u2019s commitment to accessibility and innovation.<\/p>\n\n\n\n<p><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>We\u2019re excited to highlight the Interactive Map project developed for North Dakota State University (NDSU) \u2014 a fully customized, responsive tool designed to help students and visitors explore campus housing and dining options in a visually engaging and intuitive way. Project Overview Client: North Dakota State UniversityObjective: Build an interactive campus map showcasing dorms, dining&#8230;<\/p>\n<p class=\"more-link\"><a href=\"https:\/\/offtherichterdesign.com\/Blog\/interactive-map-for-north-dakota-state-university-moorhead\/\" class=\"themebutton3\">Read More<\/a><\/p>\n<p><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":822,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,194],"tags":[111,291,294,296,265,295,293,292,268,290,136,297,277],"class_list":["post-821","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured-projects","category-web-development-and-design","tag-be-more-colorful","tag-campus-map","tag-custom-javascript","tag-dining-services","tag-featured-project","tag-interactive-map","tag-mapbox-development","tag-ndsu","tag-responsive-web-design","tag-student-housing","tag-user-experience","tag-virtual-tours","tag-web-development-and-design"],"_links":{"self":[{"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/posts\/821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/comments?post=821"}],"version-history":[{"count":3,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/posts\/821\/revisions"}],"predecessor-version":[{"id":958,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/posts\/821\/revisions\/958"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/media\/822"}],"wp:attachment":[{"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/media?parent=821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/categories?post=821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/tags?post=821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}