Magnify and Magnifying Glass Example

[Stephen_Bebb]

Hi,

I have having some porting issues from the Silverlight Magnify and Magnifyingglass examples.

Are the Silverlight SDK examples going to be ported across to the ArcGIS Viewer samples?

An example of the code behind that works with the ArcGIS Viewer would be great.

       private Map MyMap;
        private MagnifyingGlass mGlass = new MagnifyingGlass();


            MyMap = MapApplication.Current.Map;

            ArcGISTiledMapServiceLayer arcgisMagnifyingLayer = new ArcGISTiledMapServiceLayer();
            arcgisMagnifyingLayer.Url = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
            mGlass.Layer = arcgisMagnifyingLayer;
            mGlass.Visibility = Visibility.Visible;
            mGlass.ZoomFactor = 3;
            mGlass.Map = MyMap;
            mGlass.IsEnabled = true;

This doesn't seem to work.

[KatherineDalton]

Hi Stephen,

It's unlikely that we'll port all of the ArcGIS API for Silverlight samples over to the Viewer, but thank you for suggesting some of the Toolkit controls like Magnifier and Magnifying Glass.

One option, if you know the layer you want to magnify, is to place the control directly in the layout as we do in the Viewer SDK sample "Control in Layout with Toggle Tool": http://help.arcgis.com/en/webapps/silverlightviewer/samples/start.html.

I took the following xaml from the sample and then modified to use the Magnfying glass. Feel free to make your own modifications. You need the "MagnifyingGlassContainer" if you want to use the toggle button to turn off and on the control. Otherwise specifying the actual Magnifying Glass is almost identical to how it is specified in the ArcGIS Silverlight SDK.

<StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" >
                    <Border x:Name="MagnifyingGlassContainer" Margin="5,0,0,5" 
                            VerticalAlignment="Bottom" d:LayoutOverrides="HorizontalAlignment, VerticalAlignment" HorizontalAlignment="Left" >
                        <Grid>
                             <StackPanel Margin="5">
                                <esri:MagnifyingGlass x:Name="MagnifyingGlass" BorderThickness="0"  Map="{Binding ElementName=Map}"                                          
                                        VerticalContentAlignment="Center" Height="250" 
                                        VerticalAlignment="Bottom" Margin="1,1,0,0" HorizontalAlignment="Left" 
                                        Width="250" d:LayoutOverrides="VerticalAlignment" >
                                    <esri:MagnifyingGlass.Layer>
                                        <esri:ArcGISTiledMapServiceLayer ID="Test" 
                                                                         Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" />
                                    </esri:MagnifyingGlass.Layer>
                               </esri:MagnifyingGlass>
                            </StackPanel>
                        </Grid>
                    </Border>
                   .........
                </StackPanel>

[Stephen_Bebb]

Hi Katy,

Thanks for your help. We really appreciate it.

We are trying to put a capability demonstration together so it would be great if we could get a little more help.

Our main challenge in porting between the Silverlight SDK and ArcGIS Viewer is getting the control to dynamically interact with the "MapApplication.Current.Map".

In the Silverlight SDK solutions their is always the XAML reference to  esri:Map which the other class bind to.

e.g.
<esri:Map x:Name="MyMap" WrapAround="True" Extent="-15000000,2000000,-7000000,8000000">       ...... blah....        </esri:Map>

<esri:MagnifyingGlass x:Name="MyMagnifyingGlass" Visibility="Visible" ZoomFactor="3" Map="{Binding ElementName=MyMap}" >


But this is always omitted in the ArcGIS Viewer Control XAML.

While we can show a control like the Magnify glass, it doesn't seem to dynamically link to the "MapApplication.Current.Map" or respond to zoom in commands that seem to be out of the box when building apps using the silverlight sdk.


Other tools like the overview map etc. are also critical for us and if we solve this problem we then then easily apply this dynamic link solution.

Our code is below, but it doesn't seem to bind to the current map. We would be so grateful if you could help resolve this.

#####

<UserControl x:Class="MagnifyGlass.AddIns.MagnifyingGlass"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">



    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" >
        <Border x:Name="MagnifyingGlassContainer" Margin="5,0,0,5"
                            VerticalAlignment="Bottom" d:LayoutOverrides="HorizontalAlignment, VerticalAlignment" HorizontalAlignment="Left" >
            <Grid>
                <StackPanel Margin="5">
                    <esri:MagnifyingGlass x:Name="My_MagnifyingGlass" BorderThickness="0"  Map="{Binding ElementName=TestMap}"                                         
                                        VerticalContentAlignment="Center" Height="250"
                                        VerticalAlignment="Bottom" Margin="1,1,0,0" HorizontalAlignment="Left"
                                        Width="250" d:LayoutOverrides="VerticalAlignment" >
                        <esri:MagnifyingGlass.Layer>
                            <esri:ArcGISTiledMapServiceLayer ID="Test"
                                                                         Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" />
                        </esri:MagnifyingGlass.Layer>
                    </esri:MagnifyingGlass>
                </StackPanel>
            </Grid>
        </Border>

    </StackPanel>
   
   
</UserControl>


#####

namespace MagnifyGlass.AddIns
{
    public partial class MagnifyingGlass : UserControl
    {
      

        public MagnifyingGlass()
        {


            InitializeComponent();
        }


    }
}


#####


        private Map MyMap;
        private MagnifyingGlass mGlass;
        private FrameworkElement objectToToggle;


        #region ICommand members
        public void Execute(object parameter)
        {

            MyMap = MapApplication.Current.Map;
            MyMap.Name = "TestMap";
            mGlass = new MagnifyingGlass();


            if (objectToToggle == null)
                objectToToggle = MapApplication.Current.FindObjectInLayout("MagnifyingGlassContainer") as FrameworkElement;

            MapApplication.Current.ShowWindow("My Magnify", mGlass);


            if (objectToToggle != null)
                objectToToggle.Visibility = objectToToggle.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;


        }


#####

[KatherineDalton]

Stephen, apologies for the delay getting back to you.

As for putting the control (magnifier/mag glass) in the layout, I actually meant to put it in one of the layout files that is used in the ArcGIS Viewer for Silverlight, not the layout of the dialog you are displaying. For instance, if you click the Layout tab and click Change, you'll see the various layouts that are available. The xaml files for these are located in \inetpub\wwwroot\Builder\Templates\Default\Config\Layouts. That is where you would place any control that you are going to use in conjuction with the MapApplication.Current.FindObjectInLayout.

For what you are trying to do, I think the best example I can send you is the Time Slider in the Toolkit section of our samples: http://help.arcgis.com/en/webapps/silverlightviewer/samples/start.html. This shows how to set the data context and bind to the Map in the code-behind. In your case, you should be able to use the FloatingWindow control in the ESRI.ArcGIS.Client.Application.Controls assembly. You should be able to style the FloatingWindow control itself to be invisible and just show the content (i.e. the magnifying glass). Then use FloatingWindow.Show instead of MapApplication.Current.ShowWindow. I'll edit this post in a bit to post some example code.

Hope that helps a bit.

Katy

[Stephen_Bebb]

Hi Katy,

Yes, thanks so much - its great. Everyone is really impressed. Concept Demo went well.

We have managed to get it to work. I prefer the code behind so I can step through and debug easier.



One slight hiccup,

Fused Maps hosted by ESRI are builot on JPEG with a compression.  These all work (see below) withthe magnify. 

However, our Fused Map service was created with PNG 32.  This doesn't work.  I am currently creating a Fused Map service with JPEG to see if this is the issue.

e.g.

THIS WORKS (JPEG)->> 
magnify_layer.Url = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";

OR

THIS WORKS (JPEG)->> 
magnify_layer.Url = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";    


BUT THIS DOESN'T WORK (PNG)   ->>
magnify_layer.Url = "http://qaedevsom:82/ArcGIS/rest/services/infrastructure_magnify/MapServer";

[Stephen_Bebb]

Hi,

Just a quick update.

It appears there is an issue with our fused cache map service spatial reference, even though all 4 layers share the exact same projection.


We can see and connect to it through the Browse button, and then expand the service hierarchy and see 4 layers. But we can't add it to the Map Contents. We get the error:

" Layer could not be added.Reason for failure: Cached Map Service reference does not match. "



However, the exact same mxd that is also hosted as a dynamic map service works just fine.

I have sent it through ESRI support.

Thanks again for the help.

[KatherineDalton]

Hi Stephen,

I'm glad to hear the demo went well. I worked up a bit of code and chatted with the team about some ideas for bringing over tools from the ArcGIS SL API Toolkit such as the magnifying glass. Our recommendation is to use FloatingWindow.Show instead of MapApplication.Current.Map.Show() and then change the style of the FloatingWindow so that the window isn't visible and you only see the control (magnfiying glass). This is recommended in cases where you don't necessarily want to put the control directly in to the layout, but placing it in the layout is a good workflow as well (and we have a sample to demonstrate).

While the Time Slider sample and one or two others demonstrate using code-behind, we (as a team) are hoping to encourage keeping less code in code-behind if possible and even moving towards practices such as MVVM. Our Bookmarks and Locate Address samples are both examples of using MVVM. One key piece that I think you will find helpful is using the MapApplicationBindingSource in the UserControl.Resources xaml as below.

I've also attached a MagnifyingGlass.Addins project demonstrating adding the MagnifyingGlass to a Viewer application. This uses IToggleCommand instead of ICommand but otherwise works the same as any tool you would add to the toolbar. You'll also notice that I have a Resource Dictionary that holds the style for the Floating Window. I created this by using Microsoft Expression Blend and manually editing the FloatingWindow template. Let me know if you have any questions on this project.

For debugging, you can debug directly from the Visual Studio project. There is a bit of debugging info in the Visual" rel="nofollow" target="_blank">http://help.arcgis.com/en/webapps/silverlightviewer/help/inde... Studio template topic, but if you have more questions, please post back and let us know.

<UserControl x:Class="MagnifyingGlass.AddIns.MagGlass"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
             xmlns:esriExt="http://schemas.esri.com/arcgis/client/extensibility/2010"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

<UserControl.Resources>
        <esriExt:MapApplicationBindingSource x:Key="MapApplication"/>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <esri:MagnifyingGlass Map="{Binding Map, Source={StaticResource MapApplication}}" BorderBrush="Transparent" VerticalContentAlignment="Center" Height="250" 
VerticalAlignment="Bottom" Margin="1,1,0,0" HorizontalAlignment="Left" Width="250" d:LayoutOverrides="VerticalAlignment" >
            <esri:MagnifyingGlass.Layer>
                <esri:ArcGISTiledMapServiceLayer ID="Topo" Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" />
            </esri:MagnifyingGlass.Layer>
        </esri:MagnifyingGlass>
    </Grid>
</UserControl>

Katy