nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Create Email with Hyperlink to share map extent

JustinConner

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.

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

JakeSopher

Thanks for posting this thread everyone. It has been very useful!

Jake Sopher
GIS Tech
Erickson Contract Surveying

dougbrowning

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.

Arthurgov

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.

RobertScheitlin__GISP

Arthur,

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

Arthurgov

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

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

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>

TristanForward2

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>

RobertScheitlin__GISP

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

JustinConner

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

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

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

JustinConner

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

RobertScheitlin__GISP

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

JustinConner

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>

JustinConner

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>

RobertScheitlin__GISP

Justin,

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

JustinConner

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.

RobertScheitlin__GISP

Justin,

Time to attach your button click code then.

JustinConner

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.

RobertScheitlin__GISP

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/

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.