Select to view content in your preferred language

Mashing Basemaps together in Flex

679
3
02-10-2012 10:16 PM
BruceBurwell
Deactivated User
I have large volumes of image data that I would like to integrate with ESRI's Image basemaps or the Bing Basemap. Specifically what I would like to do is have 1 Image basemap button that displays ESRI data down to a certain scale and then our own internal data turns on at a greater scale. It should look like a seemless cache on 1 button. I have tried to compile them as a Map Service and set scales but it doesn't like that with cached data. I do not want them seperately using Operational Layers.

Any ideas?

Bruce Burwell
GIS Analyst
Saudi Aramco
Tags (2)
0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Emeritus
Bruce,

  So it sounds like you do not what to have your imagery basemap data cached if so that is fine and here is the code you need to add to the MapManager.mxml to accomplish what you are wanting to do.


  1. Add the tiled esri basemap with a label for instance "Aerial" and then add your dynamic basemap layer with the same name "Aerial"
    <basemaps>

  2.             <layer label="Streets" type="tiled" visible="true"
                       url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
                <layer label="Aerial"  type="tiled" visible="false"
                       url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"/>

                <layer label="Topo"    type="tiled" visible="false"
                       url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>
                <layer label="Aerial" type="dynamic" visible="true"
                       url="http://yourserver/arcgis/rest/services/AerialMapService/MapServer"/>

            </basemaps>
  3. Then in the MapManger.mxml find the function addLayerToMap and then find the block of code below with the needed changes in red and make them in your code:
                        case "tiled":

  4.                     {
                            var tiledLayer:ArcGISTiledMapServiceLayer = new ArcGISTiledMapServiceLayer(url);
                            tiledLayer.alpha = alpha;
                            tiledLayer.id = label;
                            tiledLayer.name = label;
                            tiledLayer.token = token;
                            tiledLayer.visible = visible;
                            if (displayLevels)
                            {
                                tiledLayer.displayLevels = displayLevels.split(",");
                                for (i = 0; i < tiledLayer.displayLevels.length; i++)
                                {
                                    tiledLayer.displayLevels = Number(tiledLayer.displayLevels); // convert to Numbers
                                }
                            }
                            if (proxyUrl && useProxy)
                            {
                                tiledLayer.proxyURL = proxyUrl;
                            }
                            layerObject.layer = tiledLayer;
                            tiledLayer.addEventListener(LayerEvent.LOAD_ERROR, layer_loadErrorEvent);
                            tiledLayer.addEventListener(LayerEvent.LOAD, layer_loadEvent);
                            if(tiledLayer.name == "Aerial")
                                tiledLayer.maxScale = 288895.277144;

                            map.addLayer(tiledLayer);
                            break;
                        }
                        case "dynamic":
                        {
                            var dynLayer:ArcGISDynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(url);
                            dynLayer.alpha = alpha;
                            dynLayer.id = label;
                            dynLayer.name = label;
                            dynLayer.token = token;
                            dynLayer.visible = visible;
                            dynLayer.useMapTime = useMapTime;
                            if (autoRefresh > 0)
                            {
                                setInterval(dynLayer.refresh, autoRefresh * 1000);
                            }
                            if (imageFormat)
                            {
                                dynLayer.imageFormat = imageFormat;
                            }
                            if (visibleLayers)
                            {
                                var vizLayers:Array = visibleLayers.split(",");
                                for (i = 0; i < vizLayers.length; i++)
                                {
                                    vizLayers = Number(vizLayers); // convert to Numbers
                                }
                                dynLayer.visibleLayers = new ArrayCollection(vizLayers);
                            }
                            if (proxyUrl && useProxy)
                            {
                                dynLayer.proxyURL = proxyUrl;
                            }
                            if(dynLayer.name == "Aerial"){
                                dynLayer.minScale = 144447.638572;
                                dynLayer.imageFormat = "jpg";
                                dynLayer.dpi = 120;
                            }

                            layerObject.layer = dynLayer;
                            dynLayer.addEventListener(LayerEvent.LOAD_ERROR, layer_loadErrorEvent);
                            dynLayer.addEventListener(LayerEvent.LOAD, layer_loadEvent);
                            map.addLayer(dynLayer);
                            break;
                        }Of course the scales I chose are like not the ones your want to use but you get the idea. You will notice that in the dynlayer I also specify image format as jpg and set a higher dpi this is to get rid of the pixelation you might get from your dynamic map service that displays imagery. This code has been tested and works well.
Don't forget to click the Mark as answer check and to click the top arrow (promote) as shown below:
0 Kudos
DavidJosepha
Emerging Contributor
Hi there,

I'm looking to do the same. (mashing the basemaps together).
I have some questions tho.

Since i'm new to flashbuilder, after downloading the source code and make the changes that are posted in this post in red what do i have to do.
Save it and run it?!
And after running it do i need to replace the "flexviewer folder" on my server with the one from the source code? I'm clueless here.

Yesterday when i tried to edit the source MapManager.mxml file it gave me a warning that the source code was built with an older version of flashbuilder if I wanted to continue. (flashbuilder 4.6)
Does this make any difference?!
Because I'd decided to continue I noticed that there wer 78 warning or errors at the bottom of flash builder :Type was not found or was not a compile-time constant: LayerEvent    MapManager.mxml    /FlexViewer/src/com/esri/viewer/managers    line 853    Flex Problem

Can you please help?
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
David,

   Did you download the flex API swc was the HowToDownloadSWC.txt in the libs folder instructs? Updated the project source to Flash Builder 4.6 is not an issue at all. Once you make changes to source code and test it using the debug or play buttons, and you are ready to move your changes to your production server than you need to go to the project menu in Flash Builder and choose "Export Release build". that make a new folder in the flash builder project called bin-release and that folder has all the new compiled swfs and xml files that you need to move to your production server.

In the future even though you question is related (somewhat) to the original question you do need to start your own thread.

Don't forget to click the top arrow (promote) as shown below:
0 Kudos