topic Re: Create Email with Hyperlink to share map extent in ArcGIS Viewer for Flex Questions

Create Email with Hyperlink to share map extent

JustinConner — Wed, 12 Oct 2011 13:23:37 GMT

I've been trying to use the Pass URL parameters from the Flex API samples to pass a hyperlink of the map to an email message. I'd like to offer my users an easier way to share a map extent that doesn't require using the Bookmark Widget. There is great example of this on the Javascript gallery http://localgovtemplates2.esri.com/ParkFinder/default.htm. I really wish the esri development teams would release these the same tools across all the APIs.

Re: Create Email with Hyperlink to share map extent

RobertScheitlin__GISP — Wed, 12 Oct 2011 14:01:08 GMT

Justin,

Have you seen the documentation on the Viewer URL Params?

http://help.arcgis.com/en/webapps/flexviewer/help/index.html#/Viewer_URL_parameters/01m300000029000000/

Re: Create Email with Hyperlink to share map extent

JustinConner — Wed, 12 Oct 2011 14:12:46 GMT

I get that part (I think).

At the moment when I click on my button a new browser opens ( I know not an email but baby steps right?) and the URL generated seems correct but the map doesn't respond to those coordinates but rather stays at 0,0.

I'm also getting an error because it wants a configuration xml file along with it.

Re: Create Email with Hyperlink to share map extent

RobertScheitlin__GISP — Wed, 12 Oct 2011 14:28:09 GMT

Justin,

Time to attach your button click code then.

Re: Create Email with Hyperlink to share map extent

JustinConner — Wed, 12 Oct 2011 14:40:30 GMT

Justin,

Time to attach your button click code then.

I'm a complete novice at this but I'm trying to learn. I'll have to look back at the FIAW course to see what you mean.

Re: Create Email with Hyperlink to share map extent

RobertScheitlin__GISP — Wed, 12 Oct 2011 14:44:39 GMT

Justin,

Sorry I meant that I want you to attach your button click code that you are using for me to look at.

Re: Create Email with Hyperlink to share map extent

JustinConner — Sat, 11 Dec 2021 07:25:19 GMT

Justin,

Sorry I meant that I want you to attach your button click code that you are using for me to look at.

Be gentle i'm still learning. 🙂

<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:viewer="com.esri.viewer.*">
 <fx:Script>
   <![CDATA[
    import com.esri.ags.geometry.MapPoint;
    import com.esri.ags.utils.WebMercatorUtil;
    
    import mx.controls.Alert;
    
    private function createPermalink():void
    {
     var currentCenter:MapPoint = WebMercatorUtil.webMercatorToGeographic(map.extent.center) as MapPoint;
     navigateToURL(new URLRequest(
      "index.html?center="
      + myDegreeFormatter.format(currentCenter.y)
      + ","
      + myDegreeFormatter.format(currentCenter.x)
      + "&scale="
      + Math.round(map.scale)), "_blank");
    }
    
    private function getURLParameters():Object
    {
     var result:URLVariables = new URLVariables();
     
     try
     {
      if (ExternalInterface.available)
      {
       // Use JavaScript to get the search string from the current browser location.
       // Use substring() to remove leading '?'.
       // See http://livedocs.adobe.com/flex/3/langref/flash/external/ExternalInterface.html
       var search:String = ExternalInterface.call("location.search.substring", 1);
       if (search && search.length > 0)
       {
        result.decode(search);
       }
      }
     }
     catch (error:Error)
     {
      Alert.show(error.toString());
     }
     
     return result;
    }
    
    private function setMapLocation():void
    {
     var params:Object = getURLParameters();
     if (params["ll"])
     {
      var latlong:Array = String(params.ll).split(",");
      if (latlong.length == 2)
      {
       map.centerAt(WebMercatorUtil.geographicToWebMercator(new MapPoint(latlong[1], latlong[0])) as MapPoint);
      }
     }
     if (params["scale"])
     {
      map.scale = params.scale;
     }
    }
   ]]>
  </fx:Script>
  
  <fx:Declarations>
   <mx:NumberFormatter id="myDegreeFormatter"
        precision="6"
        useThousandsSeparator="true"/>
  </fx:Declarations>
  
 <viewer:WidgetTemplate id="passURL"  widgetTitle="Pass URL" width="200" height="100">

  <s:HGroup id="groupURL">
   
   <s:Button click="createPermalink()"
       fontSize="14"
       fontWeight="bold"
       label="Create a hyperlink"/>
   
  </s:HGroup>
  
 </viewer:WidgetTemplate>
</viewer:BaseWidget>

Re: Create Email with Hyperlink to share map extent

JustinConner — Sat, 11 Dec 2021 07:25:21 GMT

I got it to work albeit to a new browser window and not an email message.

<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:viewer="com.esri.viewer.*">
 <fx:Script>
   <![CDATA[
    import com.esri.ags.geometry.MapPoint;
    import com.esri.ags.utils.WebMercatorUtil;
    
    import mx.controls.Alert;
    
    private function createPermalink():void
    {
     var currentCenter:MapPoint = (map.extent.center) as MapPoint;
     navigateToURL(new URLRequest(
      "index.html?center="
      + myDegreeFormatter.format(currentCenter.x)
      + ","
      + myDegreeFormatter.format(currentCenter.y)
      + "&scale="
      + Math.round(map.scale)), "_blank");
    }
    
    private function getURLParameters():Object
    {
     var result:URLVariables = new URLVariables();
     
     try
     {
      if (ExternalInterface.available)
      {
       // Use JavaScript to get the search string from the current browser location.
       // Use substring() to remove leading '?'.
       // See http://livedocs.adobe.com/flex/3/langref/flash/external/ExternalInterface.html
       var search:String = ExternalInterface.call("location.search.substring", 1);
       if (search && search.length > 0)
       {
        result.decode(search);
       }
      }
     }
     catch (error:Error)
     {
      Alert.show(error.toString());
     }
     
     return result;
    }
    
    private function setMapLocation():void
    {
     var params:Object = getURLParameters();
     if (params["ll"])
     {
      var latlong:Array = String(params.ll).split(",");
      if (latlong.length == 2)
      {
       map.centerAt(new MapPoint(latlong[1], latlong[0]));
      }
     }
     if (params["scale"])
     {
      map.scale = params.scale;
     }
    }
   ]]>
  </fx:Script>
  
  <fx:Declarations>
   <mx:NumberFormatter id="myDegreeFormatter"
        precision="0"
        useThousandsSeparator="false"/>
  </fx:Declarations>
  
 <viewer:WidgetTemplate id="passURL"  widgetTitle="Pass URL" width="200" height="100">

  <s:HGroup id="groupURL">
   
   <s:Button click="createPermalink()"
       fontSize="14"
       fontWeight="bold"
       label="Create a hyperlink"/>
   
  </s:HGroup>
  
 </viewer:WidgetTemplate>
</viewer:BaseWidget>

Re: Create Email with Hyperlink to share map extent

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:25:24 GMT

Justin,

Try this:

var request:URLRequest = new URLRequest("mailto:someone@gmail.com?subject=Map Link&body=index.html?center=" + myDegreeFormatter.format(currentCenter.x) + "," + myDegreeFormatter.format(currentCenter.y) + "&scale=" + Math.round(map.scale))
navigateToURL(request,"_blank");

Re: Create Email with Hyperlink to share map extent

JustinConner — Wed, 12 Oct 2011 17:09:12 GMT

Almost there!
The browser window still opens which I dont need and the map scale is not being included in the email link. It is showing at the end of the URL in the browser window.

Example of link from email message:
http://gis.co.wood.wi.us/Flex24/index.html?center=-10020714.32477927,5534890.079940923

Example from browser window:
mailto:someone@gmail.com?subject=Map Link&body=http://gis.co.wood.wi.us/Flex24/index.html?center=-10020714.32477927,5534890.079940923&scale=9028

Re: Create Email with Hyperlink to share map extent

JustinConner — Sat, 11 Dec 2021 07:25:27 GMT

I've pretty much got it nailed except for one small part. I changed "_blank" to "_self" and that did away with the browser window opening. My only hang up now is the url string in the email message. The url string wont go passes the &. I've tried using &amp with no luck.

var u:URLRequest=new URLRequest
      ("mailto:someone@gmail.com?subject=Map Link&body=http://gis.co.wood.wi.us/Flex24/index.html?center="
       + myDegreeFormatter.format(currentCenter.x)
       + ","
       + myDegreeFormatter.format(currentCenter.y)
       + "&"
       + "scale="
       + Math.round(map.scale))
     navigateToURL(u,"_self");

Re: Create Email with Hyperlink to share map extent

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:25:29 GMT

Justin,

Try this:

                    var u:URLRequest=new URLRequest
                        ("mailto:someone@gmail.com?subject=Map Link&body=http://gis.co.wood.wi.us/Flex24/index.html?center="
                            + myDegreeFormatter.format(currentCenter.x)
                            + ","
                            + myDegreeFormatter.format(currentCenter.y)
                            + "%26"
                            + "scale="
                            + Math.round(map.scale))
                    navigateToURL(u,"_self");

Re: Create Email with Hyperlink to share map extent

RobertScheitlin__GISP — Mon, 14 Nov 2011 19:19:03 GMT

Ha T,

When using URL parameters you use a ? before the first parameter and then each additional parameter gets a &, and the other issue is you only use on = not 2:

http://http://servername/FlexViewer/v23/idea/PAidea/MainProjectv231/index.html?config=config-Basic.xml&center=-8382590,4857620&scale=9028

Re: Create Email with Hyperlink to share map extent

TristanForward2 — Sun, 12 Dec 2021 16:05:35 GMT

I found this code very helpful. I have added a text box and area text box to allow for a subject and comment block to be added to the email.

I know that my coding is very crude, and I'm looking for input on how to better write it.

<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:viewer="com.esri.viewer.*">
 <fx:Script>
  <![CDATA[
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.utils.WebMercatorUtil;
   
   import mx.controls.Alert;
   
   [Bindable]
   private var EmailComment:String;
   
   
   // Sends data to email file
    // Ref: http://forums.arcgis.com/threads/41459-Create-Email-with-Hyperlink-to-share-map-extent
    // Ref: http://stackoverflow.com/questions/6841136/mailto-with-attachments-in-flex-or-air-applications
    // Ref: http://zoomquiet.org/res/scrapbook/ZqSKM/data/20100419224556/
   
   
   private function mailme():void
   {
    var currentCenter:MapPoint = (map.extent.center) as MapPoint;
    var u:String = "";
     u+= "mailto:mappers@site.com";
     u+= "?";
     u+= "subject=";
     u+= emailSubject.text;
     u+= " ";
     u+= "&body=http://url/siteweb/?center="
      + myDegreeFormatter.format(currentCenter.x)
      + ","
      + myDegreeFormatter.format(currentCenter.y)
      + "%26"
      + "scale="
      + Math.round(map.scale)
      + "%0D%0A" + "%0D%0A" //Creates two blank lines
      + emailComment.text;

     var url:URLRequest= new URLRequest(u);
     navigateToURL(url);
   } 
   
   private function getURLParameters():Object
   {
    var result:URLVariables = new URLVariables();
    
    try
    {
     if (ExternalInterface.available)
     {
      // Use JavaScript to get the search string from the current browser location.
      // Use substring() to remove leading '?'.
      // See http://livedocs.adobe.com/flex/3/langref/flash/external/ExternalInterface.html
      var search:String = ExternalInterface.call("location.search.substring", 1);
      if (search && search.length > 0)
      {
       result.decode(search);
      }
     }
    }
    catch (error:Error)
    {
     Alert.show(error.toString());
    }
    
    return result;
   }
   
   private function setMapLocation():void
   {
    var params:Object = getURLParameters();
    if (params["ll"])
    {
     var latlong:Array = String(params.ll).split(",");
     if (latlong.length == 2)
     {
      map.centerAt(new MapPoint(latlong[1], latlong[0]));
     }
    }
    if (params["scale"])
    {
     map.scale = params.scale;
    }
   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <mx:NumberFormatter id="myDegreeFormatter"
       precision="0"
       useThousandsSeparator="false"/>
 </fx:Declarations>
 
 <viewer:WidgetTemplate id="passURL"  widgetTitle="Pass URL" width="100%" height="100%">
  
  <s:VGroup id="groupURL">
   
   
   <s:Label 
    text="Subject: "/>
   <s:TextInput id="emailSubject"/>
   <s:Label 
    text="Comment: "/>
   <s:TextArea id="emailComment"
    maxChars="250"/> 

   <s:Button click="mailme()"
       fontSize="12"
       fontWeight="bold"
       label="Report Error"/>
   
  </s:VGroup>
  
 </viewer:WidgetTemplate>
</viewer:BaseWidget>

Re: Create Email with Hyperlink to share map extent

Arthurgov — Sat, 11 Dec 2021 07:25:32 GMT

Hi all,

I used this thread and code to create a Pass URL widget, but have problems with Chrome not wanting to open an email program like Outlook. Firefox and IE open fine without problem, but Chrome opens up a tab with the message "This webpage is not available." I cleared out the history and reran, but still have issues. Am I missing something in the code?

I should add that the Parks Finder equivalent at http://localgovtemplates2.esri.com/ParkFinder/default.htm works fine in my Chrome version whereby it opens Outlook correctly.

Thank you

<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:viewer="com.esri.viewer.*">
 <fx:Script>
  <![CDATA[
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.utils.WebMercatorUtil;
   
   import mx.controls.Alert;
   
   private function mailme():void
   {
    var currentCenter:MapPoint = (map.extent.center) as MapPoint;
    var u:String = "";
    u+= "mailto:email@address.com";
    u+= "?";
    u+= "subject=";
    u+= emailSubject.text;
    u+= " ";
    u+= "&body=http://my_url/index.html?center="
     + myDegreeFormatter.format(currentCenter.x)
     + ","
     + myDegreeFormatter.format(currentCenter.y)
     + "%26"
     + "scale="
     + Math.round(map.scale)
     + "%0D%0A" + "%0D%0A" //Creates two blank lines
     + emailComment.text;
    
    var url:URLRequest= new URLRequest(u);
    navigateToURL(url, "_self");
   }
   
   private function getURLParameters():Object
   {
    var result:URLVariables = new URLVariables();
    
    try
    {
     if (ExternalInterface.available)
     {
      // Use JavaScript to get the search string from the current browser location.
      // Use substring() to remove leading '?'.
      // See http://livedocs.adobe.com/flex/3/langref/flash/external/ExternalInterface.html
      var search:String = ExternalInterface.call("location.search.substring", 1);
      if (search && search.length > 0)
      {
       result.decode(search);
      }
     }
    }
    catch (error:Error)
    {
     Alert.show(error.toString());
    }
    
    return result;
   }
   
   private function setMapLocation():void
   {
    var params:Object = getURLParameters();
    if (params["ll"])
    {
     var latlong:Array = String(params.ll).split(",");
     if (latlong.length == 2)
     {
      map.centerAt(new MapPoint(latlong[1], latlong[0]));
     }
    }
    if (params["scale"])
    {
     map.scale = params.scale;
    }
   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <mx:NumberFormatter id="myDegreeFormatter"
       precision="0"
       useThousandsSeparator="false"/>
 </fx:Declarations>
 
 <viewer:WidgetTemplate id="passURL"  widgetTitle="Pass URL" width="100%" height="100%">
  
  <s:VGroup id="groupURL">
   
   <s:Label 
    text="Subject ID: "/>
   <s:TextInput id="emailSubject" width="300"/>
   <s:Label 
    text="Comment: "/>
   <s:TextArea id="emailComment" width="300" height="400"
      text ="I have a question."/>
   <s:Button click="mailme()"
       fontSize="14"
       fontWeight="bold"
       label="Email Us"/>
   
  </s:VGroup>
  
 </viewer:WidgetTemplate>
</viewer:BaseWidget>

Re: Create Email with Hyperlink to share map extent

RobertScheitlin__GISP — Wed, 25 Sep 2013 15:05:04 GMT

Arthur,

The mailto handling is browser specific and can be altered by the end users preference changes in the browser or a corporations IT restrictions. The user can change how mailto: links behave in chrome by visiting chrome://settings/handlers, or Chrome Settings->Content Settings->Manage Handlers...

Re: Create Email with Hyperlink to share map extent

Arthurgov — Wed, 25 Sep 2013 15:29:38 GMT

Arthur,

The mailto handling is browser specific and can be altered by the end users preference changes in the browser or a corporations IT restrictions. The user can change how mailto: links behave in chrome by visiting chrome://settings/handlers, or Chrome Settings->Content Settings->Manage Handlers...

Robert,

Thank you for the quick reply. Following that route, my Protocol Handlers are blank with no option to add or specify one. Should there be an option to specify outlook or gmail handlers here?

Thank you

Re: Create Email with Hyperlink to share map extent

RobertScheitlin__GISP — Wed, 25 Sep 2013 15:50:12 GMT

Arthur,

I am not a big Chrome fan so I don't know any more than what I Google on the net.

Re: Create Email with Hyperlink to share map extent

Arthurgov — Wed, 25 Sep 2013 15:52:42 GMT

Arthur,

I am not a big Chrome fan so I don't know any more than what I Google on the net.

I'm starting to understand why. Thank you for the help! It works with everything else.

Re: Create Email with Hyperlink to share map extent

DougBrowning — Thu, 26 Sep 2013 20:15:32 GMT

Sorry to be a bit off topic but has Esri or anyone else thought about allowing the user to save out a number of attributes that comprise a "state" of the map. So zoom level, layers that are on or off, layer order, changed colors of a dynamic layer, etc.

That way a user could get the map looking just the way they want then email someone a link or "map view state" file - so a hey look at this kind of thing. It would also be really cool to be able to save the state at say 4:55 so that a user could start back where there were the next morning versus starting over.

I did something similar where I used toc.includelayers = [] then added to that list as the user added maps they wanted. Then i had a save to a txt file button that could be sent to someone else to upload into the map. It would be great to go beyond that.

I know someone could take the layers and build their own map but that is a lot more work.

thanks.