{"id":2244,"date":"2021-12-25T09:47:27","date_gmt":"2021-12-25T09:47:27","guid":{"rendered":"https:\/\/365stack.in\/?p=2244"},"modified":"2021-12-25T09:49:07","modified_gmt":"2021-12-25T09:49:07","slug":"build-interactive-map-control-on-canvas-app","status":"publish","type":"post","link":"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/","title":{"rendered":"Build Interactive Map Control On Canvas App"},"content":{"rendered":"\n<p><strong>Step1: Enable Geospatial service<\/strong>.<\/p>\n\n\n\n<p>\u00a0Admin Center &#8211;> Environments &#8211;>&#8221;Your Environment&#8221; &#8211;>Settings &#8211;>Features<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"601\" height=\"136\" data-attachment-id=\"2273\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-28\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-28.png?fit=601%2C136&amp;ssl=1?v=1640425333\" data-orig-size=\"601,136\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-28\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-28.png?fit=300%2C68&amp;ssl=1?v=1640425333\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-28.png?fit=601%2C136&amp;ssl=1?v=1640425333\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-28.png?resize=601%2C136&#038;ssl=1\" alt=\"\" class=\"wp-image-2273\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-28.png?w=601&amp;ssl=1 601w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-28.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 601px) 100vw, 601px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><strong>Step2: Adding Map control into screen<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"245\" height=\"356\" data-attachment-id=\"2247\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-2-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-2.png?fit=245%2C356&amp;ssl=1?v=1640423549\" data-orig-size=\"245,356\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-2\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-2.png?fit=206%2C300&amp;ssl=1?v=1640423549\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-2.png?fit=245%2C356&amp;ssl=1?v=1640423549\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-2.png?resize=245%2C356&#038;ssl=1\" alt=\"\" class=\"wp-image-2247\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-2.png?w=245&amp;ssl=1 245w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-2.png?w=206&amp;ssl=1 206w\" sizes=\"auto, (max-width: 245px) 100vw, 245px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><strong>Step3:<\/strong><\/p>\n\n\n\n<p>Here my backend database is Dataverse.<\/p>\n\n\n\n<p><strong>Table Name:<\/strong> Account<\/p>\n\n\n\n<p><strong>Collection Used<\/strong>: colAccountData, colRouteCollection<\/p>\n\n\n\n<p><strong>Usage:<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-left\"><strong>colAccountData <\/strong>: To collect all the account address from Account Table.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><strong>colRouteCollection:<\/strong> To collect account address which will be used to show routing information.<\/p>\n\n\n\n<p><strong>Step 4:<\/strong> Here I\u2019m loading collection on button click<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"a\"><li>ClearCollect(colAccountData,Accounts); &#8211;> Load entire table into collection.<\/li><li>ClearCollect(colAccountData,AddColumns(Accounts,&#8221;Color&#8221;,&#8221;red&#8221;,&#8221;AccountIcon&#8221;,&#8221;car&#8221;,&#8221;AccountName&#8221;,&#8217;Account Name&#8217;)); \u00e0 Adding three more columns into our collection (Color,AccountIcon,AccountName).<\/li><\/ol>\n\n\n\n<p>Note: If your table already contains color or icon column you can skip b.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>ClearCollect(colRouteCollection,Filter(colAccountData,&#8217;Address 1: City&#8217;=&#8221;Lynnwood&#8221;||&#8217;Address 1: City&#8217;=&#8221;Renton&#8221;||&#8217;Address 1: City&#8217;=&#8221;Redmond&#8221;)); &#8211;> Planning to show route direction for this particular address alone. You can apply your logic here based on requirement.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>ClearCollect(colAccountData,Accounts);\r\nClearCollect(colAccountData,AddColumns(Accounts,\"Color\",\"red\",\"AccountIcon\",\"marker\",\"AccountName\",'Account Name'));\r\nClearCollect(colRouteCollection,Filter(colAccountData,'Address 1: City'=\"Lynnwood\"||'Address 1: City'=\"Renton\"||'Address 1: City'=\"Redmond\"));<\/code><\/pre>\n\n\n\n<p><strong>Step 5: Select your map source<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"446\" data-attachment-id=\"2248\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-3-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-3.png?fit=358%2C446&amp;ssl=1?v=1640423819\" data-orig-size=\"358,446\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-3\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-3.png?fit=241%2C300&amp;ssl=1?v=1640423819\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-3.png?fit=358%2C446&amp;ssl=1?v=1640423819\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-3.png?resize=358%2C446&#038;ssl=1\" alt=\"\" class=\"wp-image-2248\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-3.png?w=358&amp;ssl=1 358w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-3.png?w=241&amp;ssl=1 241w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><strong>Step 6:<\/strong> Select <strong>ItemAddresses <\/strong>property under map control. Here I\u2019m using \u201caddress1_composite\u201d column as an input address for the map control.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"48\" data-attachment-id=\"2249\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-4-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-4.png?fit=940%2C70&amp;ssl=1?v=1640423838\" data-orig-size=\"940,70\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-4\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-4.png?fit=300%2C22&amp;ssl=1?v=1640423838\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-4.png?fit=640%2C48&amp;ssl=1?v=1640423838\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-4.png?resize=640%2C48&#038;ssl=1\" alt=\"\" class=\"wp-image-2249\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-4.png?w=940&amp;ssl=1 940w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-4.png?w=300&amp;ssl=1 300w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-4.png?w=768&amp;ssl=1 768w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-4.png?w=920&amp;ssl=1 920w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><strong>Note:<\/strong> you can use latitude, longitude property as well to locate address.<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Eg: ItemsLatitudes:\u201dYour Latitude Column Name\u201d<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ItemLongitudes:\u201dYour Longitude Column Name\u201d<\/p>\n\n\n\n<p>Now you can find pins located on the map.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"346\" data-attachment-id=\"2250\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-5-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-5.png?fit=630%2C346&amp;ssl=1?v=1640423850\" data-orig-size=\"630,346\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-5\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-5.png?fit=300%2C165&amp;ssl=1?v=1640423850\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-5.png?fit=630%2C346&amp;ssl=1?v=1640423850\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-5.png?resize=630%2C346&#038;ssl=1\" alt=\"\" class=\"wp-image-2250\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-5.png?w=630&amp;ssl=1 630w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-5.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><strong>Step 7: How to change pin color.<\/strong><\/p>\n\n\n\n<p>In this example I\u2019m using static color for all the pins.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"19\" data-attachment-id=\"2251\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-6-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-6.png?fit=966%2C28&amp;ssl=1?v=1640424025\" data-orig-size=\"966,28\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-6\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-6.png?fit=300%2C9&amp;ssl=1?v=1640424025\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-6.png?fit=640%2C19&amp;ssl=1?v=1640424025\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-6.png?resize=640%2C19&#038;ssl=1\" alt=\"\" class=\"wp-image-2251\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-6.png?w=966&amp;ssl=1 966w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-6.png?w=300&amp;ssl=1 300w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-6.png?w=768&amp;ssl=1 768w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-6.png?w=920&amp;ssl=1 920w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><strong>ItemsColors<\/strong>:\u201dYour Color Column Name\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"594\" height=\"53\" data-attachment-id=\"2274\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-29\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-29.png?fit=594%2C53&amp;ssl=1?v=1640425379\" data-orig-size=\"594,53\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-29\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-29.png?fit=300%2C27&amp;ssl=1?v=1640425379\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-29.png?fit=594%2C53&amp;ssl=1?v=1640425379\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-29.png?resize=594%2C53&#038;ssl=1\" alt=\"\" class=\"wp-image-2274\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-29.png?w=594&amp;ssl=1 594w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-29.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 594px) 100vw, 594px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Note: you can apply your logic while adding color column into collection to show different color based on requirement.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"377\" height=\"243\" data-attachment-id=\"2268\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-23\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-23.png?fit=377%2C243&amp;ssl=1?v=1640424846\" data-orig-size=\"377,243\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-23\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-23.png?fit=300%2C193&amp;ssl=1?v=1640424846\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-23.png?fit=377%2C243&amp;ssl=1?v=1640424846\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-23.png?resize=377%2C243&#038;ssl=1\" alt=\"\" class=\"wp-image-2268\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-23.png?w=377&amp;ssl=1 377w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-23.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 377px) 100vw, 377px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><strong>Step 8<\/strong>: How to change pin icon.<\/p>\n\n\n\n<p>Here I\u2019m using static Icon for all the pins.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"18\" data-attachment-id=\"2255\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-10-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-10.png?fit=971%2C27&amp;ssl=1?v=1640424141\" data-orig-size=\"971,27\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-10\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-10.png?fit=300%2C8&amp;ssl=1?v=1640424141\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-10.png?fit=640%2C18&amp;ssl=1?v=1640424141\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-10.png?resize=640%2C18&#038;ssl=1\" alt=\"\" class=\"wp-image-2255\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-10.png?w=971&amp;ssl=1 971w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-10.png?w=300&amp;ssl=1 300w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-10.png?w=768&amp;ssl=1 768w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-10.png?w=920&amp;ssl=1 920w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"47\" data-attachment-id=\"2257\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-12\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-12.png?fit=580%2C47&amp;ssl=1?v=1640424221\" data-orig-size=\"580,47\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-12\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-12.png?fit=300%2C24&amp;ssl=1?v=1640424221\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-12.png?fit=580%2C47&amp;ssl=1?v=1640424221\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-12.png?resize=580%2C47&#038;ssl=1\" alt=\"\" class=\"wp-image-2257\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-12.png?w=580&amp;ssl=1 580w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-12.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Some of the icons you can use in canvas app.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"120\" data-attachment-id=\"2258\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-13\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-13.png?fit=749%2C141&amp;ssl=1?v=1640424319\" data-orig-size=\"749,141\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-13\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-13.png?fit=300%2C56&amp;ssl=1?v=1640424319\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-13.png?fit=640%2C120&amp;ssl=1?v=1640424319\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-13.png?resize=640%2C120&#038;ssl=1\" alt=\"\" class=\"wp-image-2258\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-13.png?w=749&amp;ssl=1 749w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-13.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Refer this URL for different icons:<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-maps\/how-to-use-image-templates-web-sdk#list-of-image-templates\">https:\/\/docs.microsoft.com\/en-us\/azure\/azure-maps\/how-to-use-image-templates-web-sdk#list-of-image-templates<\/a><\/p>\n\n\n\n<p><strong>Step 9: Show label for each pins.<\/strong><\/p>\n\n\n\n<p>Here I\u2019m showing account name on the label. You can map different column.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"587\" height=\"48\" data-attachment-id=\"2259\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-14\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-14.png?fit=587%2C48&amp;ssl=1?v=1640424432\" data-orig-size=\"587,48\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-14\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-14.png?fit=300%2C25&amp;ssl=1?v=1640424432\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-14.png?fit=587%2C48&amp;ssl=1?v=1640424432\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-14.png?resize=587%2C48&#038;ssl=1\" alt=\"\" class=\"wp-image-2259\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-14.png?w=587&amp;ssl=1 587w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-14.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 587px) 100vw, 587px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"302\" data-attachment-id=\"2269\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-24\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-24.png?fit=430%2C302&amp;ssl=1?v=1640424883\" data-orig-size=\"430,302\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-24\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-24.png?fit=300%2C211&amp;ssl=1?v=1640424883\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-24.png?fit=430%2C302&amp;ssl=1?v=1640424883\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-24.png?resize=430%2C302&#038;ssl=1\" alt=\"\" class=\"wp-image-2269\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-24.png?w=430&amp;ssl=1 430w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-24.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><strong>Step 10: Show Info card for each pin when user clicks\/hover<\/strong><\/p>\n\n\n\n<p>You can show multiple fields data in info card by adding fields in the map control. Refer below image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"143\" data-attachment-id=\"2270\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-25\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-25.png?fit=1935%2C430&amp;ssl=1?v=1640425001\" data-orig-size=\"1935,430\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-25\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-25.png?fit=300%2C67&amp;ssl=1?v=1640425001\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-25.png?fit=640%2C143&amp;ssl=1?v=1640425001\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-25-1024x228.png?resize=640%2C143&#038;ssl=1\" alt=\"\" class=\"wp-image-2270\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-25.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-25.png?w=300&amp;ssl=1 300w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-25.png?w=768&amp;ssl=1 768w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-25.png?w=1536&amp;ssl=1 1536w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-25.png?w=1935&amp;ssl=1 1935w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-25.png?w=1280&amp;ssl=1 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><strong>Step 11: Cluster near by addresses<\/strong><\/p>\n\n\n\n<p>Here you can cluster the near by address into single point.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"203\" data-attachment-id=\"2272\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-27\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-27.png?fit=350%2C203&amp;ssl=1?v=1640425216\" data-orig-size=\"350,203\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-27\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-27.png?fit=300%2C174&amp;ssl=1?v=1640425216\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-27.png?fit=350%2C203&amp;ssl=1?v=1640425216\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-27.png?resize=350%2C203&#038;ssl=1\" alt=\"\" class=\"wp-image-2272\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-27.png?w=350&amp;ssl=1 350w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-27.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"168\" data-attachment-id=\"2271\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-26\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-26.png?fit=663%2C174&amp;ssl=1?v=1640425141\" data-orig-size=\"663,174\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-26\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-26.png?fit=300%2C79&amp;ssl=1?v=1640425141\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-26.png?fit=640%2C168&amp;ssl=1?v=1640425141\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-26.png?resize=640%2C168&#038;ssl=1\" alt=\"\" class=\"wp-image-2271\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-26.png?w=663&amp;ssl=1 663w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-26.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p class=\"has-large-font-size\"><strong>How to show Route information<\/strong><\/p>\n\n\n\n<p>Here I\u2019m planning to show route direction for particular addresses alone so I\u2019m using filter. You can apply your logic here based on requirement.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ClearCollect(colRouteCollection,Filter(colAccountData,'Address 1: City'=\"Lynnwood\"||'Address 1: City'=\"Renton\"||'Address 1: City'=\"Redmond\"));<\/code><\/pre>\n\n\n\n<p><strong>Step 1: Assign your route collection to RouteWaypoints_Items<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"52\" data-attachment-id=\"2263\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-18\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-18.png?fit=624%2C52&amp;ssl=1?v=1640424617\" data-orig-size=\"624,52\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-18\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-18.png?fit=300%2C25&amp;ssl=1?v=1640424617\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-18.png?fit=624%2C52&amp;ssl=1?v=1640424617\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-18.png?resize=624%2C52&#038;ssl=1\" alt=\"\" class=\"wp-image-2263\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-18.png?w=624&amp;ssl=1 624w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-18.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><strong>Step 2:<\/strong> Select <strong>RouteWayPointsAddresses <\/strong>property under map control. Here I\u2019m using \u201caddress1_composite\u201d column as an input address for the map control.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"53\" data-attachment-id=\"2264\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-19\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-19.png?fit=646%2C54&amp;ssl=1?v=1640424638\" data-orig-size=\"646,54\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-19\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-19.png?fit=300%2C25&amp;ssl=1?v=1640424638\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-19.png?fit=640%2C53&amp;ssl=1?v=1640424638\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-19.png?resize=640%2C53&#038;ssl=1\" alt=\"\" class=\"wp-image-2264\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-19.png?w=646&amp;ssl=1 646w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-19.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Then, enable routing option on map control.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"314\" height=\"137\" data-attachment-id=\"2265\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-20\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-20.png?fit=314%2C137&amp;ssl=1?v=1640424706\" data-orig-size=\"314,137\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image-20\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-20.png?fit=300%2C131&amp;ssl=1?v=1640424706\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-20.png?fit=314%2C137&amp;ssl=1?v=1640424706\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-20.png?resize=314%2C137&#038;ssl=1\" alt=\"\" class=\"wp-image-2265\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-20.png?w=314&amp;ssl=1 314w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-20.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 314px) 100vw, 314px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>You optimize the route by distance or time.<\/p>\n\n\n\n<p>Now, your map will look like this<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"337\" data-attachment-id=\"2267\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/25\/build-interactive-map-control-on-canvas-app\/image-22\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-22.png?fit=480%2C337&amp;ssl=1?v=1640424785\" data-orig-size=\"480,337\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Map\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-22.png?fit=300%2C211&amp;ssl=1?v=1640424785\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-22.png?fit=480%2C337&amp;ssl=1?v=1640424785\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-22.png?resize=480%2C337&#038;ssl=1\" alt=\"\" class=\"wp-image-2267\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-22.png?w=480&amp;ssl=1 480w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-22.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Happy Building \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step1: Enable Geospatial service. \u00a0Admin Center &#8211;> Environments &#8211;>&#8221;Your Environment&#8221; &#8211;>Settings &#8211;>Features Step2: Adding Map control into screen Step3: Here my backend database is Dataverse. Table Name: Account Collection Used: colAccountData, colRouteCollection Usage: colAccountData : To collect all the account address from Account Table. colRouteCollection: To collect account address which will be used to show routing information. Step 4: Here [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2267,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[6,32],"tags":[12,33,9],"class_list":["post-2244","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas-apps","category-power-platform","tag-canvas-app","tag-power-platform","tag-powerapps"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/image-22.png?fit=480%2C337&ssl=1?v=1640424785","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1989,"url":"https:\/\/365stack.in\/index.php\/2022\/01\/03\/how-to-get-started-with-power-platform-solutions-canvas-apps\/","url_meta":{"origin":2244,"position":0},"title":"How to get started with Power Platform Solutions: Canvas Apps","author":"Hemanthkumar Rajan","date":"January 3, 2022","format":false,"excerpt":"Deploying app from one environment to another environment is the most problematic area in SDLC. If development is not taken place in a well-organized setup then the deployment is not going to be that easy. Especially working in the SaaS, we need to follow the product standards to get the\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-402-1.png?fit=1200%2C490&ssl=1%3Fv%3D1639549594&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1971,"url":"https:\/\/365stack.in\/index.php\/2021\/12\/11\/how-to-export-import-canvas-apps\/","url_meta":{"origin":2244,"position":1},"title":"How to Export &#038; Import Canvas Apps","author":"Hemanthkumar Rajan","date":"December 11, 2021","format":false,"excerpt":"Deploying artifacts from one environment to another is an integral part of application life cycle management. If the development is carried out in solutions (which is the recommended way) all the flows and apps can be exported and imported in one installment. Previously we saw how to import flows individually,\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-350.png?fit=1200%2C598&ssl=1%3Fv%3D1639077310&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1631,"url":"https:\/\/365stack.in\/index.php\/2021\/11\/27\/add-repeating-section-in-powerapps\/","url_meta":{"origin":2244,"position":2},"title":"Add repeating section in PowerApps","author":"Hemanthkumar Rajan","date":"November 27, 2021","format":false,"excerpt":"As we already discussed, Gallery is a multipurpose control in the canvas app. One of the use-cases of gallery is the repeating section, this scenario will be applicable between Parent-Child relationships in Lists or tables and if the form is converted from Nintex, InfoPath (OOTB repeating section control available there)\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-197.png?fit=1045%2C267&ssl=1%3Fv%3D1637926841&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2278,"url":"https:\/\/365stack.in\/index.php\/2021\/12\/28\/how-to-send-json-data-to-canvas-apps\/","url_meta":{"origin":2244,"position":3},"title":"How to send JSON data to Canvas Apps","author":"Premkumar Perumal","date":"December 28, 2021","format":false,"excerpt":"We're going to explain how to send a JSON response from Power Automate to Canvas app and how to convert the response into Collection format in Canvas app. To illustrate, we have explained a small app as example. As First step, create a new Instant flow that can be triggered\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-28-103100.png?fit=836%2C391&ssl=1%3Fv%3D1640667678&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1638,"url":"https:\/\/365stack.in\/index.php\/2022\/04\/21\/how-to-integrate-power-bi-charts-in-the-canvas-app\/","url_meta":{"origin":2244,"position":4},"title":"How to integrate Power BI charts in the Canvas app","author":"Hemanthkumar Rajan","date":"April 21, 2022","format":false,"excerpt":"Power BI is a visualization software available under the umbrella of Power Platform. It accepts data from a wide variety of data sources and the created chart can be integrated with Canvas Apps. \"Power BI Tile\" is a control available in charts option in the top ribbon bar. We assume\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-199.png?fit=1113%2C517&ssl=1%3Fv%3D1637949407&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2060,"url":"https:\/\/365stack.in\/index.php\/2021\/12\/12\/how-to-stop-infinite-flow-trigger-in-power-automate-using-flag-column\/","url_meta":{"origin":2244,"position":5},"title":"How to stop infinite flow trigger in Power Automate using flag column","author":"Hemanthkumar Rajan","date":"December 12, 2021","format":false,"excerpt":"Infinite flow trigger is a common scenario in workflow softwares like Nintex, K2 and even in Power Automate. If the Canvas app is involved in this process we can handle it easily with the \"Flag\" column. Create a Flag column with default values as \"Yes\" Flag Column Customize form for\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-530.png?fit=1200%2C562&ssl=1%3Fv%3D1639337681&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/2244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/comments?post=2244"}],"version-history":[{"count":2,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/2244\/revisions"}],"predecessor-version":[{"id":2276,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/2244\/revisions\/2276"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/media\/2267"}],"wp:attachment":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/media?parent=2244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/categories?post=2244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/tags?post=2244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}