Create Email with Hyperlink to share map extent

JustinConner · ‎10-12-2011

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.

JustinConner · ‎10-12-2011

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");

RobertScheitlin__GISP · ‎10-12-2011

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");

JustinConner · ‎10-12-2011

Here's what finally worked. I need to use "%26" for the ampersand, not "&" or "&amp". Always something isnt it! 😄

So basically this brings up an Outlook message with the url of the map center and scale.

Thanks a TON Robert!

<?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: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");
    }
    
    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="mailme()"
       fontSize="14"
       fontWeight="bold"
       label="Email Map Link"/>
   
  </s:HGroup>
  
 </viewer:WidgetTemplate>
</viewer:BaseWidget>

RobertScheitlin__GISP · ‎11-14-2011

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

TristanForward2 · ‎03-06-2012

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>

Arthurgov · ‎09-25-2013

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>

RobertScheitlin__GISP · ‎09-25-2013

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...

Arthurgov · ‎09-25-2013

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

RobertScheitlin__GISP · ‎09-25-2013

Arthur,

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

Arthurgov · ‎09-25-2013

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.