{"id":1172802,"date":"2021-04-29T06:07:05","date_gmt":"2021-04-29T13:07:05","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1172802"},"modified":"2024-04-12T04:02:07","modified_gmt":"2024-04-12T11:02:07","slug":"map-your-outdoor-activities","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities","title":{"rendered":"Map your outdoor activities in 3D with the elevation profile widget"},"author":7011,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23771,738191],"tags":[23811,760122,357382,300392,29401],"industry":[],"product":[761642,36831,36601],"class_list":["post-1172802","blog","type-blog","status-publish","format-standard","hentry","category-3d-gis","category-developers","tag-3d-visualization","tag-cycling","tag-hiking","tag-outdoor","tag-web","product-platform","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Ideas on creating 3D web visualizations of outdoor sport activities","flexible_content":[{"acf_fc_layout":"content","content":"<p class=\"graf graf--p\">We all like to track our small (or maybe big!) outdoor adventures and share them with our family and friends. In this article I\u2019ll share some ideas on how to display outdoor data on an interactive 3D web map. We&#8217;ll also use the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-ElevationProfile.html\" target=\"_blank\" rel=\"noopener\">elevation profile<\/a> widget to plot it in a chart. At the end we&#8217;ll also look into how to display the photos from your adventure directly on the map.<\/p>\n<p class=\"graf graf--p\">Whether you record it using your phone, your watch or a GPS device, most of the time your data will end up in a <a href=\"https:\/\/de.wikipedia.org\/wiki\/GPS_Exchange_Format\" target=\"_blank\" rel=\"noopener\">gpx<\/a> or <a href=\"https:\/\/en.wikipedia.org\/wiki\/Training_Center_XML\" target=\"_blank\" rel=\"noopener\">tcx<\/a> format. To be able to read this data in ArcGIS API for JavaScript, we\u2019re going to use <a href=\"https:\/\/www.npmjs.com\/package\/@tmcw\/togeojson\" target=\"_blank\" rel=\"noopener\">togeojson<\/a>, a small library written by <a href=\"https:\/\/macwright.com\/\" target=\"_blank\" rel=\"noopener\">Tom MacWright<\/a>. Let&#8217;s have a closer look at two examples: a bicycle and a paragliding gpx track.<\/p>\n<h3>Visualizing a bicycle track<\/h3>\n<p class=\"graf graf--p\">Using <a href=\"https:\/\/www.npmjs.com\/package\/@tmcw\/togeojson\" target=\"_blank\" rel=\"noopener\">togeojson<\/a> we can load a bicycle gpx track and display it on a 3D map using <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/\" target=\"_blank\" rel=\"noopener\">ArcGIS API for JavaScript<\/a>:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1176132,"id":1176132,"title":"Screenshot 2021-03-29 at 19.00.47","filename":"Screenshot-2021-03-29-at-19.00.47.png","filesize":230496,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.00.47.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\/screenshot-2021-03-29-at-19-00-47","alt":"3D visualizatin of a bicycle gpx track","author":"7011","description":"3D visualizatin of a bicycle gpx track.","caption":"3D visualizatin of a bicycle gpx track. Click on the image to open the live application.","name":"screenshot-2021-03-29-at-19-00-47","status":"inherit","uploaded_to":1172802,"date":"2021-03-29 17:01:13","modified":"2021-04-01 09:28:34","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1076,"height":777,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.00.47-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.00.47.png","medium-width":361,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.00.47.png","medium_large-width":768,"medium_large-height":555,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.00.47.png","large-width":1076,"large-height":777,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.00.47.png","1536x1536-width":1076,"1536x1536-height":777,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.00.47.png","2048x2048-width":1076,"2048x2048-height":777,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.00.47-644x465.png","card_image-width":644,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.00.47.png","wide_image-width":1076,"wide_image-height":777}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/outdoor-map\/cycling\/"},{"acf_fc_layout":"content","content":"<p>To display an elevation profile of the track and add more information about length, altitude or steepness, we can import the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-ElevationProfile.html\">elevation profile widget<\/a> and connect it to our track. Here\u2019s the JavaScript code snippet to add the widget:<\/p>\n"},{"acf_fc_layout":"content","content":"<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\">\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> elevationProfile = <span style=\"color: #333; font-weight: bold;\">new<\/span> ElevationProfile({\r\n  view: view,\r\n  container: <span style=\"color: #d14;\">\"profile\"<\/span>,\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ pass the bike track geometry into the input property<\/span>\r\n  input: {\r\n    geometry: geometry\r\n  },\r\n  profiles: [\r\n    {\r\n      <span style=\"color: #998; font-style: italic;\">\/\/ displays elevation values from the input geometry<\/span>\r\n      type: <span style=\"color: #d14;\">\"input\"<\/span>, <span style=\"color: #998; font-style: italic;\">\/\/autocasts as new ElevationProfileLineInput()<\/span>\r\n      color: <span style=\"color: #d14;\">\"yellow\"<\/span>,\r\n      title: <span style=\"color: #d14;\">\"Bicycle track\"<\/span>\r\n    },\r\n  ],\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ UI elements that shouldn't be visible<\/span>\r\n  visibleElements: {\r\n    sketchButton: <span style=\"color: #333; font-weight: 500;\">false<\/span>,\r\n    selectButton: <span style=\"color: #333; font-weight: 500;\">false<\/span>\r\n  }\r\n});\r\n\r\n<span style=\"color: #998; font-style: italic;\">\/\/ add the elevation profile to the view UI<\/span>\r\nview.ui.add(elevationProfile, <span style=\"color: #d14;\">\"top-right\"<\/span>);\r\n\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"<p>And here&#8217;s the <a href=\"https:\/\/ralucanicola.github.io\/outdoor-map\/cycling\/\">live application<\/a> where you can try it out for yourself:<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"<a href=\"https:\/\/ralucanicola.github.io\/outdoor-map\/cycling\/\">https:\/\/ralucanicola.github.io\/outdoor-map\/cycling\/<\/a>"},{"acf_fc_layout":"content","content":"<p>&nbsp;<\/p>\n<p class=\"graf graf--p\">I also added the start and end point of the bicycle ride, marked with green and red points. The dataset has information about the heart rate as well, so I created a second layer where I&#8217;m splitting the data in different segments and visualizing the heart rate value on each segment:<\/p>\n<p>&nbsp;<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1217872,"id":1217872,"title":"elevation-profile-heart-rate","filename":"elevation-profile-heart-rate.png","filesize":204513,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-heart-rate.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\/elevation-profile-heart-rate","alt":"3D visualization of a bicycle track with additional information on the heart rate.","author":"7011","description":"","caption":"3D visualization of a bicycle track with additional information on the heart rate. ","name":"elevation-profile-heart-rate","status":"inherit","uploaded_to":1172802,"date":"2021-04-29 12:51:44","modified":"2021-04-29 13:15:52","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1142,"height":758,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-heart-rate-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-heart-rate.png","medium-width":393,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-heart-rate.png","medium_large-width":768,"medium_large-height":510,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-heart-rate.png","large-width":1142,"large-height":758,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-heart-rate.png","1536x1536-width":1142,"1536x1536-height":758,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-heart-rate.png","2048x2048-width":1142,"2048x2048-height":758,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-heart-rate-701x465.png","card_image-width":701,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-heart-rate.png","wide_image-width":1142,"wide_image-height":758}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/outdoor-map\/cycling\/"},{"acf_fc_layout":"content","content":"<p>&nbsp;<\/p>\n<h3>Visualizing a paragliding track<\/h3>\n<p>An interesting use case is visualizing flight data in 3D. The following example shows a paragliding gpx track above the Alps in Switzerland:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1173192,"id":1173192,"title":"Screenshot 2021-03-25 at 19.53.11","filename":"Screenshot-2021-03-25-at-19.53.11.png","filesize":121466,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.53.11.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\/screenshot-2021-03-25-at-19-53-11","alt":"Paragliding track visualized with ArcGIS API for JavaScript","author":"7011","description":"","caption":"Paragliding track visualized with ArcGIS API for JavaScript","name":"screenshot-2021-03-25-at-19-53-11","status":"inherit","uploaded_to":1172802,"date":"2021-03-25 18:53:57","modified":"2021-04-29 14:57:43","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1054,"height":423,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.53.11-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.53.11.png","medium-width":464,"medium-height":186,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.53.11.png","medium_large-width":768,"medium_large-height":308,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.53.11.png","large-width":1054,"large-height":423,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.53.11.png","1536x1536-width":1054,"1536x1536-height":423,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.53.11.png","2048x2048-width":1054,"2048x2048-height":423,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.53.11-826x331.png","card_image-width":826,"card_image-height":331,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.53.11.png","wide_image-width":1054,"wide_image-height":423}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/outdoor-map\/paragliding\/"},{"acf_fc_layout":"content","content":"<p>You might notice that when features are positioned in the air, it&#8217;s hard to know where they are placed and how high from the ground they are. Most of the time navigating in the map helps to understand the position, but in this case I decided to add a vertical semi-transparent wall that connects the line to the terrain:<\/p>\n<p>&nbsp;<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1173202,"id":1173202,"title":"Screenshot 2021-03-25 at 19.58.50","filename":"Screenshot-2021-03-25-at-19.58.50.png","filesize":173978,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.58.50.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\/screenshot-2021-03-25-at-19-58-50","alt":"Paragliding track 3D visualization with a vertical wall that connects the paragliding track to the ground","author":"7011","description":"","caption":"Paragliding visualization with a vertical wall that connects the paragliding track to the ground","name":"screenshot-2021-03-25-at-19-58-50","status":"inherit","uploaded_to":1172802,"date":"2021-03-25 18:59:15","modified":"2021-04-29 14:58:16","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1079,"height":613,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.58.50-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.58.50.png","medium-width":459,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.58.50.png","medium_large-width":768,"medium_large-height":436,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.58.50.png","large-width":1079,"large-height":613,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.58.50.png","1536x1536-width":1079,"1536x1536-height":613,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.58.50.png","2048x2048-width":1079,"2048x2048-height":613,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.58.50-818x465.png","card_image-width":818,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-25-at-19.58.50.png","wide_image-width":1079,"wide_image-height":613}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/outdoor-map\/paragliding\/"},{"acf_fc_layout":"content","content":"<p>We can create this visualization in several ways. One option is to add the geometry in another layer and symbolize it with a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-PathSymbol3DLayer.html\" target=\"_blank\" rel=\"noopener\">PathSymbol3DLayer<\/a> for the vertical wall. The solution I used is to create a symbol with multiple symbol layers. So I added a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-PathSymbol3DLayer.html\" target=\"_blank\" rel=\"noopener\">PathSymbol3DLayer<\/a> to the existing <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-LineSymbol3DLayer.html\" target=\"_blank\" rel=\"noopener\">LineSymbol3DLayer<\/a>. By setting the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-PathSymbol3DLayer.html#anchor\" target=\"_blank\" rel=\"noopener\">anchor<\/a> position of the path symbol layer to &#8216;top&#8217;, the vertical wall will be placed below the actual geometry. Here&#8217;s what this looks like in code:<\/p>\n"},{"acf_fc_layout":"content","content":"<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\">\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> lineSymbol = <span style=\"color: #333; font-weight: bold;\">new<\/span> LineSymbol3D({\r\n  symbolLayers: [\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ a symbol layer displayed in screen space<\/span>\r\n    <span style=\"color: #333; font-weight: bold;\">new<\/span> LineSymbol3DLayer({\r\n      material: { color: [<span style=\"color: #008080;\">245<\/span>, <span style=\"color: #008080;\">203<\/span>, <span style=\"color: #008080;\">66<\/span>] },\r\n      size: <span style=\"color: #d14;\">\"3px\"<\/span>\r\n    }),\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ a symbol layer displayed as a vertical semi-transparent wall<\/span>\r\n    <span style=\"color: #333; font-weight: bold;\">new<\/span> PathSymbol3DLayer({\r\n      profile: <span style=\"color: #d14;\">\"quad\"<\/span>,\r\n      material: { color: [<span style=\"color: #008080;\">245<\/span>, <span style=\"color: #008080;\">203<\/span>, <span style=\"color: #008080;\">66<\/span>, <span style=\"color: #008080;\">0.3<\/span>] },\r\n      width: <span style=\"color: #008080;\">0<\/span>,\r\n      height: <span style=\"color: #008080;\">2000<\/span>,\r\n      join: <span style=\"color: #d14;\">\"miter\"<\/span>,\r\n      cap: <span style=\"color: #d14;\">\"butt\"<\/span>,\r\n      anchor: <span style=\"color: #d14;\">\"top\"<\/span>,\r\n      profileRotation: <span style=\"color: #d14;\">\"heading\"<\/span>\r\n    })\r\n  ]\r\n});\r\n\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"<p>The elevation profile can also show a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-ElevationProfile-ElevationProfileLineGround.html\" target=\"_blank\" rel=\"noopener\">ground profile<\/a>. In this scenario this works really well, because we&#8217;re not only interested in seeing the absolute height of the input line (the paragliding track), but also the height of this line relative to the ground.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1217882,"id":1217882,"title":"elevation-profile-paragliding","filename":"elevation-profile-paragliding.png","filesize":190474,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-paragliding.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\/elevation-profile-paragliding","alt":"Paragliding track and ground elevation profiles","author":"7011","description":"","caption":"Paragliding track and ground elevation profiles","name":"elevation-profile-paragliding","status":"inherit","uploaded_to":1172802,"date":"2021-04-29 12:55:24","modified":"2021-04-29 13:17:04","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1142,"height":758,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-paragliding-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-paragliding.png","medium-width":393,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-paragliding.png","medium_large-width":768,"medium_large-height":510,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-paragliding.png","large-width":1142,"large-height":758,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-paragliding.png","1536x1536-width":1142,"1536x1536-height":758,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-paragliding.png","2048x2048-width":1142,"2048x2048-height":758,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-paragliding-701x465.png","card_image-width":701,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/elevation-profile-paragliding.png","wide_image-width":1142,"wide_image-height":758}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/outdoor-map\/paragliding\/"},{"acf_fc_layout":"content","content":"<p>Try it out for yourself in the <a href=\"https:\/\/ralucanicola.github.io\/outdoor-map\/paragliding\/\" target=\"_blank\" rel=\"noopener\">live application<\/a>.<\/p>\n<h3>Adding photos to your map<\/h3>\n<p class=\"graf graf--p\">Now besides the visualization and the information about elevation, sometimes it\u2019s nice to also be able to share pictures on the map. If geotagging is enabled on your camera, then the images already store the locations where they were taken. If you upload the images in a zip file to ArcGIS Online you\u2019ll get a point feature layer with the images as attachments. In case you are interested in the exact workflow, here is a blog post where Paul explains how to do this: <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/from-photos-to-features-publishing-photos-with-locations-in-arcgis-online\/\" target=\"_blank\" rel=\"noopener\">From photos to features: Publishing photos with locations in ArcGIS Online<\/a>. By default the popup will show these images as attachments. For our use case this is not ideal because we want to click on a point and see the image directly. With a little bit of <a href=\"https:\/\/developers.arcgis.com\/arcade\/\" target=\"_blank\" rel=\"noopener\">Arcade<\/a> magic, we can display the full images in the popup:<\/p>\n"},{"acf_fc_layout":"content","content":"<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\">\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> popupExpression = <span style=\"color: #d14;\">`\r\n  var urlPart1 = \"https:\/\/services2.arcgis.com\/cFEFS0EWrhfDeVw9\/arcgis\/rest\/services\/Hiking_POI\/FeatureServer\/0\/\"\r\n  var objectID = $feature.OBJECTID\r\n  var urlPart2 = \"\/attachments\/\"\r\n  var attachID = 0;\r\n  if (Count(Attachments($feature)) &amp;gt; 0) {\r\n    attachID = (First(Attachments($feature))).id\r\n  }\r\n  return urlPart1 + objectID + urlPart2 + attachID\r\n`<\/span>;\r\n\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> picturesLayer = <span style=\"color: #333; font-weight: bold;\">new<\/span> FeatureLayer({\r\n  url: <span style=\"color: #d14;\">\"https:\/\/services2.arcgis.com\/cFEFS0EWrhfDeVw9\/arcgis\/rest\/services\/Hiking_POI\/FeatureServer\"<\/span>,\r\n  popupTemplate: {\r\n    expressionInfos: [{\r\n      name: <span style=\"color: #d14;\">\"image\"<\/span>,\r\n      expression: popupExpression\r\n    }],\r\n    content: <span style=\"color: #d14;\">\"&lt;img src='{expression\/image}'%'&gt;\"<\/span>\r\n  }\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"<p>Here&#8217;s an example where I used this workflow to display the images from a hike I went on earlier this year:<\/p>\n<p>&nbsp;<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1176282,"id":1176282,"title":"Screenshot 2021-03-29 at 19.21.39","filename":"Screenshot-2021-03-29-at-19.21.39.png","filesize":163357,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.21.39.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\/screenshot-2021-03-29-at-19-21-39","alt":"A map with points and an open popup showing an attachment of the point","author":"7011","description":"","caption":"Display images directly in the map. Click on the image to go to the live application.","name":"screenshot-2021-03-29-at-19-21-39","status":"inherit","uploaded_to":1172802,"date":"2021-03-29 17:21:57","modified":"2021-04-29 14:59:08","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1076,"height":777,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.21.39-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.21.39.png","medium-width":361,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.21.39.png","medium_large-width":768,"medium_large-height":555,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.21.39.png","large-width":1076,"large-height":777,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.21.39.png","1536x1536-width":1076,"1536x1536-height":777,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.21.39.png","2048x2048-width":1076,"2048x2048-height":777,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.21.39-644x465.png","card_image-width":644,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/Screenshot-2021-03-29-at-19.21.39.png","wide_image-width":1076,"wide_image-height":777}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/hike-visualization.netlify.app\/"},{"acf_fc_layout":"content","content":"<p>The code for all these apps can be found on Github:<\/p>\n<ol>\n<li>Bicycle gpx data visualization &#8211; <a href=\"https:\/\/ralucanicola.github.io\/outdoor-map\/cycling\/\" target=\"_blank\" rel=\"noopener\">Live app<\/a> &#8211; <a href=\"https:\/\/github.com\/RalucaNicola\/outdoor-map\/tree\/master\/cycling\" target=\"_blank\" rel=\"noopener\">code<\/a><\/li>\n<li>Paragliding gpx data visualization &#8211; <a href=\"https:\/\/ralucanicola.github.io\/outdoor-map\/paragliding\/\" target=\"_blank\" rel=\"noopener\">Live app<\/a> &#8211; <a href=\"https:\/\/github.com\/RalucaNicola\/outdoor-map\/tree\/master\/paragliding\" target=\"_blank\" rel=\"noopener\">code<\/a><\/li>\n<li>Hiking tcx data visualization and display of attachment images in a popup &#8211; <a href=\"https:\/\/hike-visualization.netlify.app\/\" target=\"_blank\" rel=\"noopener\">Live app<\/a> &#8211; <a href=\"https:\/\/github.com\/RalucaNicola\/hike-visualization\" target=\"_blank\" rel=\"noopener\">code<\/a><\/li>\n<\/ol>\n<p>Before wrapping up this article, here&#8217;s one more useful resource: <a href=\"https:\/\/saschabrunnerch.github.io\/load-gpx-3D\/\" target=\"_blank\" rel=\"noopener\">Load gpx in 3D<\/a> is an app where you can drag and drop your gpx file to visualize it in a web scene. It was built by my colleagues Sascha Brunner and Jesse van den Kieboom and you can find the code on <a href=\"https:\/\/github.com\/SaschaBrunnerCH\/load-gpx-3D\" target=\"_blank\" rel=\"noopener\">Github<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1217652,"id":1217652,"title":"gpx drag and drop visualization","filename":"Screenshot-2021-04-29-at-10.20.26.png","filesize":248766,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screenshot-2021-04-29-at-10.20.26.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\/screenshot-2021-04-29-at-10-20-26","alt":"Application visualizing gpx data per drag and drop","author":"7011","description":"","caption":"","name":"screenshot-2021-04-29-at-10-20-26","status":"inherit","uploaded_to":1172802,"date":"2021-04-29 08:20:54","modified":"2021-04-29 08:21:37","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1240,"height":826,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screenshot-2021-04-29-at-10.20.26-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screenshot-2021-04-29-at-10.20.26.png","medium-width":392,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screenshot-2021-04-29-at-10.20.26.png","medium_large-width":768,"medium_large-height":512,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screenshot-2021-04-29-at-10.20.26.png","large-width":1240,"large-height":826,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screenshot-2021-04-29-at-10.20.26.png","1536x1536-width":1240,"1536x1536-height":826,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screenshot-2021-04-29-at-10.20.26.png","2048x2048-width":1240,"2048x2048-height":826,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screenshot-2021-04-29-at-10.20.26-698x465.png","card_image-width":698,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screenshot-2021-04-29-at-10.20.26.png","wide_image-width":1240,"wide_image-height":826}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/saschabrunnerch.github.io\/load-gpx-3D\/"},{"acf_fc_layout":"content","content":"<p>So&#8230; enjoy your outdoors adventures and if you do end up mapping them, we&#8217;d love to see what you&#8217;ve been up to!<\/p>\n<p>Raluca and the ArcGIS API for JavaScript team<\/p>\n<p>&nbsp;<\/p>\n<p><em>Credits: thanks to <a href=\"https:\/\/unsplash.com\/@adventurous_artist?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Sina Sadeqi<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/cycling?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a> for the awesome banner image.<\/em><\/p>\n"}],"authors":[{"ID":7011,"user_firstname":"Raluca","user_lastname":"Nicola","nickname":"Raluca Nicola","user_nicename":"raluca_zurich","display_name":"Raluca Nicola","user_email":"RNicola@esri.com","user_url":"https:\/\/raluca-nicola.net\/","user_registered":"2018-03-02 00:19:07","user_description":"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/card-elevation.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/banner-elevation-profile-03.jpg"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Map your outdoor activities in 3D with the elevation profile widget<\/title>\n<meta name=\"description\" content=\"Ideas on creating 3D web visualizations of outdoor sport activities.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Map your outdoor activities in 3D with the elevation profile widget\" \/>\n<meta property=\"og:description\" content=\"Ideas on creating 3D web visualizations of outdoor sport activities.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T11:02:07+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\"},\"author\":{\"name\":\"Raluca Nicola\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4\"},\"headline\":\"Map your outdoor activities in 3D with the elevation profile widget\",\"datePublished\":\"2021-04-29T13:07:05+00:00\",\"dateModified\":\"2024-04-12T11:02:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\"},\"wordCount\":11,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"3D visualization\",\"cycling\",\"Hiking\",\"outdoor\",\"web\"],\"articleSection\":[\"3D Visualization &amp; Analytics\",\"Developers\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\",\"name\":\"Map your outdoor activities in 3D with the elevation profile widget\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2021-04-29T13:07:05+00:00\",\"dateModified\":\"2024-04-12T11:02:07+00:00\",\"description\":\"Ideas on creating 3D web visualizations of outdoor sport activities.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Map your outdoor activities in 3D with the elevation profile widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4\",\"name\":\"Raluca Nicola\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg\",\"caption\":\"Raluca Nicola\"},\"description\":\"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.\",\"sameAs\":[\"https:\/\/raluca-nicola.net\/\",\"https:\/\/www.linkedin.com\/in\/raluca-nicola-cartography\/\",\"https:\/\/x.com\/nicolaraluk\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Map your outdoor activities in 3D with the elevation profile widget","description":"Ideas on creating 3D web visualizations of outdoor sport activities.","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:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities","og_locale":"en_US","og_type":"article","og_title":"Map your outdoor activities in 3D with the elevation profile widget","og_description":"Ideas on creating 3D web visualizations of outdoor sport activities.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-04-12T11:02:07+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities"},"author":{"name":"Raluca Nicola","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4"},"headline":"Map your outdoor activities in 3D with the elevation profile widget","datePublished":"2021-04-29T13:07:05+00:00","dateModified":"2024-04-12T11:02:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities"},"wordCount":11,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["3D visualization","cycling","Hiking","outdoor","web"],"articleSection":["3D Visualization &amp; Analytics","Developers"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities","name":"Map your outdoor activities in 3D with the elevation profile widget","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2021-04-29T13:07:05+00:00","dateModified":"2024-04-12T11:02:07+00:00","description":"Ideas on creating 3D web visualizations of outdoor sport activities.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/map-your-outdoor-activities#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Map your outdoor activities in 3D with the elevation profile widget"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4","name":"Raluca Nicola","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg","caption":"Raluca Nicola"},"description":"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.","sameAs":["https:\/\/raluca-nicola.net\/","https:\/\/www.linkedin.com\/in\/raluca-nicola-cartography\/","https:\/\/x.com\/nicolaraluk"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich"}]}},"text_date":"April 29, 2021","author_name":"Raluca Nicola","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/banner-elevation-profile-03.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":23811,"name":"3D visualization","slug":"3d-visualization","term_group":0,"term_taxonomy_id":23811,"taxonomy":"post_tag","description":"","parent":0,"count":46,"filter":"raw"},{"term_id":760122,"name":"cycling","slug":"cycling","term_group":0,"term_taxonomy_id":760122,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":357382,"name":"Hiking","slug":"hiking","term_group":0,"term_taxonomy_id":357382,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":300392,"name":"outdoor","slug":"outdoor","term_group":0,"term_taxonomy_id":300392,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"},{"term_id":29401,"name":"web","slug":"web","term_group":0,"term_taxonomy_id":29401,"taxonomy":"post_tag","description":"","parent":0,"count":17,"filter":"raw"}],"category_data":[{"term_id":23771,"name":"3D Visualization &amp; Analytics","slug":"3d-gis","term_group":0,"term_taxonomy_id":23771,"taxonomy":"category","description":"","parent":0,"count":686,"filter":"raw"},{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":420,"filter":"raw"}],"product_data":[{"term_id":761642,"name":"ArcGIS Location Platform","slug":"platform","term_group":0,"term_taxonomy_id":761642,"taxonomy":"product","description":"","parent":36601,"count":213,"filter":"raw"},{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1172802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/7011"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1172802"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1172802\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1172802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1172802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1172802"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1172802"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1172802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}