Community
Select to view content in your preferred language

Create Email with Hyperlink to share map extent

5013
21
10-12-2011 06:23 AM
JustinConner
by
Frequent Contributor
‎10-12-2011 06:23 AM
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.
Tags (2)
21 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-12-2011 07:01 AM
Justin,

   Have you seen the documentation on the Viewer URL Params?

http://help.arcgis.com/en/webapps/flexviewer/help/index.html#/Viewer_URL_parameters/01m3000000290000...
0 Kudos
JustinConner
by
Frequent Contributor
‎10-12-2011 07:12 AM
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.
0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-12-2011 07:28 AM
Justin,

   Time to attach your button click code then.
0 Kudos
JustinConner
by
Frequent Contributor
‎10-12-2011 07:40 AM
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.
0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-12-2011 07:44 AM
Justin,

   Sorry I meant that I want you to attach your button click code that you are using for me to look at.
0 Kudos
JustinConner
by
Frequent Contributor
‎10-12-2011 07:52 AM
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>
0 Kudos
JustinConner
by
Frequent Contributor
‎10-12-2011 08:52 AM
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>
0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-12-2011 09:02 AM
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");
0 Kudos
JustinConner
by
Frequent Contributor
‎10-12-2011 10:09 AM
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
0 Kudos