{"id":118117,"date":"2018-12-03T19:05:41","date_gmt":"2018-12-04T00:05:41","guid":{"rendered":"http:\/\/www.bu.edu\/tech\/?page_id=118117"},"modified":"2021-11-09T11:55:27","modified_gmt":"2021-11-09T16:55:27","slug":"campus-map","status":"publish","type":"page","link":"https:\/\/www.bu.edu\/tech\/services\/cccs\/websites\/www\/wordpress\/how-to\/campus-map\/","title":{"rendered":"Using the Online Campus Map"},"content":{"rendered":"<p>Boston University implemented a new, more mobile-friendly <a href=\"https:\/\/maps.bu.edu\/\">online campus map<\/a>\u00a0in 2019. It has been designed specifically for the Charles River, Medical, and Fenway Campuses and features plenty of engaging, easy-to-use functionality. The map features include:<\/p>\n<ul>\n<li>three-dimensional renderings of each campus<\/li>\n<li>a more intelligent search function<\/li>\n<li>360-degree views of select campus locations<\/li>\n<li>a filter accommodating multiple search factors<\/li>\n<li>accessibility and safety locations such as curb cuts, lactation rooms, and emergency call boxes<\/li>\n<\/ul>\n<h2>Ways to use BU Maps on your Website<\/h2>\n<p>Website editors at BU are encouraged to use the new maps on their BU websites. There are three ways to refer to BU maps from your BU website:<\/p>\n<ol>\n<li>Simply <strong>linking<\/strong> to your location on the new map.<\/li>\n<li><strong>Embedding a static map<\/strong> for a single location.<\/li>\n<li><strong>Embedding an interactive map<\/strong> for special use and\/or multiple locations.<\/li>\n<\/ol>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h3 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Linking to BU Maps<\/h3><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<ol>\n<li>Visit <a href=\"https:\/\/maps.bu.edu\/\">maps.bu.edu<\/a>\u00a0and use the navigation menu to find your location on the map.<\/li>\n<li>Select your location &#8212; the address will appear in the sidebar.<\/li>\n<li>Click the Share Location icon at the top of the sidebar. Share options will be displayed in a popup window.<\/li>\n<li>Copy the &#8220;Link to this Location&#8221; URL. Use that address to create a simple link to your location on the map.<\/li>\n<\/ol>\n<p>The new maps application is at &#8220;maps.bu.edu&#8221; and <em>old web addresses to &#8220;www.bu.edu\/maps&#8221; should be replaced<\/em>.<\/p>\n<p><em>For example, here are old\/new links to the IT Help Center:<\/em><br \/>\n<strong>OLD<\/strong> map: https:\/\/www.bu.edu\/maps\/?id=225<br \/>\n<strong>NEW<\/strong> map: <a href=\"https:\/\/maps.bu.edu\/?id=647#!m\/288657\">https:\/\/maps.bu.edu\/?id=647#!m\/288657<\/a><\/p>\n<p><\/div>\n<\/div>\n\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h3 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Embedding a Static Map<\/h3><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p>Static Maps should always be used to highlight a <strong>single location<\/strong>.<\/p>\n<ol>\n<li>Visit <a href=\"https:\/\/maps.bu.edu\/\">maps.bu.edu<\/a>\u00a0and use the navigation menu to find your location on the map.<\/li>\n<li>Select your location &#8212; the address will appear in the sidebar.<\/li>\n<li>Click the Share Location icon at the top of the sidebar. Share options will be displayed in a popup window.<\/li>\n<li>Copy the &#8220;Link to this Location&#8221; URL. You will need information from this URL to create a static map link.<\/li>\n<li>Copy this basic static maps link:\n<pre>https:\/\/staticmap.concept3d.com\/map\/static-map\/?map=647&amp;loc=&lt;MARKER_ID&gt;&amp;scale=1&amp;label=&lt;LABEL_NAME&gt;&amp;zoom=19<\/pre>\n<\/li>\n<li><strong>Replace &lt;MARKER_ID&gt;<\/strong> with the unique 6-digit number at the end of the link URL you copied in Step 4.<\/li>\n<li><strong>Replace &lt;LABEL_NAME&gt;<\/strong> with text you want for the label on your map. Do not use word spaces &#8212; if you need a word space, use %20 (for instance: &#8220;IT%20Help%20Center&#8221; and not &#8220;IT Help Center&#8221;)\n<ul>\n<li>If you do not want a label, delete <strong>&amp;label=&lt;LABEL_NAME&gt;<\/strong> from the link.<\/li>\n<li>If you want the default label already associated with your location, simply 1) use <strong>&amp;label<\/strong> in the URL and 2) delete <strong>=&lt;LABEL_NAME&gt;<\/strong><\/li>\n<\/ul>\n<\/li>\n<li>scale=1 indicates a standard width of 512px. If you need a wider map change to scale=2 for 1024px wide map, or scale=4 for 2048px wide map.<\/li>\n<li>zoom=19 is the standard zoom level. Adjust this accordingly to the zoom level you want (e.g. changing to zoom=20 will show a static map with your location zoomed in closer; zoom=18 will show an image zoomed further out, etc.<\/li>\n<li>Optional: after inserting the image into your web page, you can highlight the image and add a link to the image, so clicking the embedded static map would take your visitor to your location in BU Maps. (The map examples below are linking to the map.)<\/li>\n<\/ol>\n<h4>Examples for the IT Help Center:<\/h4>\n<pre>https:\/\/staticmap.concept3d.com\/map\/static-map\/?map=647&amp;loc=288657&amp;scale=1&amp;label=IT%20Help%20Center&amp;zoom=19<\/pre>\n<p><strong>This produces a static map a) with a label; and b) standard zoom level of 19<\/strong><\/p>\n<p><a href=\"https:\/\/maps.bu.edu\/?id=647#!m\/288657\"><img loading=\"lazy\" src=\"https:\/\/staticmap.concept3d.com\/map\/static-map\/?map=647&amp;loc=288657&amp;scale=1&amp;label=IT%20Help%20Center&amp;zoom=19\" width=\"512\" height=\"512\" alt=\"Map location for IT Help Center\" class=\"alignnone size-full\" \/><\/a><\/p>\n<pre>https:\/\/staticmap.concept3d.com\/map\/static-map\/?map=647&amp;loc=288657&amp;scale=1&amp;zoom=17<\/pre>\n<p><strong>This produces a static map a) without a label; and b) zoomed out to level 17<\/strong><\/p>\n<p><a href=\"https:\/\/maps.bu.edu\/?id=647#!m\/288657\"><img loading=\"lazy\" src=\"https:\/\/staticmap.concept3d.com\/map\/static-map\/?map=647&amp;loc=288657&amp;scale=1&amp;zoom=17\" width=\"512\" height=\"512\" alt=\"IT Help Center location on BU Maps\" class=\"alignnone size-full\" \/><\/a><\/p>\n<p><\/div>\n<\/div>\n\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h3 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Embedding an Interactive Map<\/h3><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p>Embedding the full Interactive Map should only be done when you are highlighting multiple locations (e.g. map of all student housing) or in special use cases (e.g. map of commencement locations). The interactive map loads slower and takes up more bandwidth, so if you are highlighting only a single location, please use the instructions above to embed a Static Map instead.<\/p>\n<ol>\n<li>Visit <a href=\"https:\/\/maps.bu.edu\/\">maps.bu.edu<\/a>\u00a0and use the navigation menu to find your location on the map.<\/li>\n<li>Select your location &#8212; the address will appear in the sidebar.<\/li>\n<li>Click the Share Location icon at the top of the sidebar. Share options will be displayed in a popup window.<\/li>\n<li>Copy the &#8220;Embed on Your Website&#8221; code. This is HTML to embed an &#8220;iframe&#8221; on your site. Copy the entire block of code.<\/li>\n<li>In the &#8220;text editing&#8221; mode on your WordPress page, paste the entire embed code into the HTML in the location where you want the map on your page.<\/li>\n<li>Adjust the height of the map for it to display properly on your website. In the embed code you pasted into the content editor, <em>change the height to a fixed pixel size rather than a percentage.<\/em> For example, height = \u201c500\u201d.\n<pre>&lt;iframe width=\"100%\" <span style=\"background-color: #ffff00;\">height=\"100%\"<\/span> ...<\/pre>\n<p>change to<\/p>\n<pre>&lt;iframe width=\"100%\" <span style=\"background-color: #ffff00;\">height=\"500\"<\/span> ..<\/pre>\n<p><img loading=\"lazy\" src=\"\/tech\/files\/2018\/12\/maps04-636x97.png\" alt=\"screen capture of HTML code inserted into WordPress editor\" class=\"alignnone wp-image-118124 size-medium\" width=\"636\" height=\"97\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps04-636x97.png 636w, https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps04-768x117.png 768w, https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps04-1024x156.png 1024w, https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps04.png 1768w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/li>\n<li>Save your changes and view the map on your site <strong>in a desktop web browser and on a mobile device<\/strong>. Adjust the height accordingly as needed to work well on both types of devices.<\/li>\n<li>You may wish to hide map elements on your embedded map (like the red header and the footer links at the bottom of the map embed). You can achieve this by adding some additional code to the URL of the map embed.<br \/>\n<img loading=\"lazy\" src=\"\/tech\/files\/2018\/12\/maps05-636x590.png\" alt=\"screen capture highlighting header and footer of embedded maps\" class=\"alignnone wp-image-118125\" width=\"500\" height=\"464\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps05-636x590.png 636w, https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps05-768x712.png 768w, https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps05-1024x949.png 1024w, https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps05.png 1096w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><br \/>\nIn the embed code you pasted into the content editor, add <strong>&amp;tbh&amp;sbh<\/strong> after the ID number and before the # in the source URL.<img loading=\"lazy\" src=\"\/tech\/files\/2018\/12\/maps06-636x102.png\" alt=\"screen capture of HTML code with added code highlighted\" class=\"alignnone size-medium wp-image-118126\" width=\"636\" height=\"102\" srcset=\"https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps06-636x102.png 636w, https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps06-768x124.png 768w, https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps06-1024x165.png 1024w, https:\/\/www.bu.edu\/tech\/files\/2018\/12\/maps06.png 1764w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/li>\n<\/ol>\n<p><\/div>\n<\/div>\n\n<h2>Other Custom Map Embed Options<\/h2>\n<p>Our vendor supports additional custom map embed options. You can learn more at <a href=\"https:\/\/help.concept3d.com\/hc\/en-us\/articles\/115004127673-Query-Strings\">Concept 3D documentation page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Boston University implemented a new, more mobile-friendly online campus map\u00a0in 2019. It has been designed specifically for the Charles River, Medical, and Fenway Campuses and features plenty of engaging, easy-to-use functionality. The map features include: three-dimensional renderings of each campus a more intelligent search function 360-degree views of select campus locations a filter accommodating multiple&#8230;<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":304,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/118117"}],"collection":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/comments?post=118117"}],"version-history":[{"count":28,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/118117\/revisions"}],"predecessor-version":[{"id":137731,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/118117\/revisions\/137731"}],"up":[{"embeddable":true,"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/pages\/304"}],"wp:attachment":[{"href":"https:\/\/www.bu.edu\/tech\/wp-json\/wp\/v2\/media?parent=118117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}