topic Re: Using OpenStreetMap in ArcGIS Viwer for Flex in ArcGIS Viewer for Flex Questions

Using OpenStreetMap in ArcGIS Viwer for Flex

AnnikaHermodsson — Fri, 08 Oct 2010 08:23:54 GMT

I'm wondering if it is possibel to use OpenStreetMap in ArcGIS Viewer for Flex? If it is how do I edit the config.xml to get the OpenStreetmap to show in my viewer?
___________________
Annika Hermodsson Hyltén
WSP Sverige AB
GIS-analyst

Re: Using OpenStreetMap in ArcGIS Viwer for Flex

BjornSvensson — Fri, 08 Oct 2010 23:47:48 GMT

Not out of the box in version 2.1.

However, if you work with the source code it is possible since the Flex API now supports OpenStreetMap. If you implement this, keep in my mind that the licensing for OpenStreetMap require you to also show the credits appropriately. See http://wiki.openstreetmap.org/wiki/Legal_FAQ

Re: Using OpenStreetMap in ArcGIS Viwer for Flex

KarlWilson — Thu, 28 Oct 2010 09:07:54 GMT

Hi,

Has anybody been able to get OpenStreetMap as a map layer in the Flex Viewer?

I've seen the API sample here:
http://help.arcgis.com/en/webapi/flex/samples/index.html?sample=OpenStreetMap

I was wondering where would be the best place to start editing the source code to implement this?

Thanks,
Karl

Re: Using OpenStreetMap in ArcGIS Viwer for Flex

RobertScheitlin__GISP — Sat, 11 Dec 2021 11:48:01 GMT

Karl,

The MapManager.mxml is the place to put this. In there you will find a block that looks like this

switch (type.toLowerCase())
                {
                    case "tiled":

That is the place

Re: Using OpenStreetMap in ArcGIS Viwer for Flex

KarlWilson — Sat, 11 Dec 2021 11:48:04 GMT

Robert, thank you!

I added the following case in the MapManager.mxml on line 387:

     // new case for OpenStreetMap
     case "openstreetmap":
     {
      var osmLayer:OpenStreetMapLayer = new OpenStreetMapLayer();
      osmLayer.id = label;
      osmLayer.name = label;
      osmLayer.visible = visible;
      osmLayer.alpha = alpha;
      if (operationalLayer)
      {
       layerObject.layer = osmLayer;
      }
      map.addLayer(osmLayer);
      break;
     }

...and then added the following to my config.xml within the basemaps tag:

<layer label="OSM"     type="openstreetmap" visible="true" alpha="1"/>

Now all I need to do is add the copyright information to my map. Is there a neat way of displaying this as text at the bottom of the map? Alternatively I may just use the Static Image Widget and plonk it on there as a jpg.

Thanks again,
Karl

Re: Using OpenStreetMap in ArcGIS Viwer for Flex

RobertScheitlin__GISP — Fri, 29 Oct 2010 10:26:04 GMT

Karl,

Yep I created a copyright widget a little while ago.

http://www.arcgis.com/home/item.html?id=3893f396489344aa9f8fcdef15b3fe1b

Don't forget to rate and comment on the widgets you use form the code gallery.

Re: Using OpenStreetMap in ArcGIS Viwer for Flex

KarlWilson — Sat, 11 Dec 2021 11:48:07 GMT

Thanks again Robert.

I modified your CopyrightWidget.mxml a little in order to accomodate the OpenStreetMap copyright notice, and to enable linking:

<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Version 2.1 - Oct 7, 2010
//
// Delevoped by Robert Scheitlin
//
////////////////////////////////////////////////////////////////////////////////
-->
<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.*" 
                   layout="horizontal"
                   widgetConfigLoaded="basewidget_widgetConfigLoadedHandler(event)">
    <fx:Script>
        <![CDATA[
            import com.esri.ags.events.MapEvent;
            import com.esri.ags.layers.*;
            import com.esri.viewer.AppEvent;
            import com.esri.viewer.ViewerContainer;
            
            // Import statements added to allow links in copyright notice
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.elements.TextFlow;
            
            // Set the OpenStreetMap copyright notice
            private var osmHtmlText:String = '© <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, '
                + '<a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
            private var osmTF:TextFlow = TextConverter.importToFlow(osmHtmlText, TextConverter.TEXT_FIELD_HTML_FORMAT);
            
            protected function basewidget_widgetConfigLoadedHandler(event:Event):void
            {
                if (configXML)
                {
                
                    const color:String = configXML.label.@color;
                    cright.setStyle("color", toNumber(color.length ? color : "0x000000"));
                    const fontFamily:String = configXML.label.@fontfamily;
                    cright.setStyle("fontFamily", fontFamily.length ? fontFamily : "Verdana");
                    const fontSize:String = configXML.label.@fontsize;
                    cright.setStyle("fontSize", parseInt(fontSize.length ? fontSize : "9"));
                    const fontWeight:String = configXML.label.@fontweight;
                    cright.setStyle("fontWeight", fontWeight.length ? fontWeight : "bold");

                    if (map.loaded)
                    {
                        map_loadHandler(null);
                    }
                    else
                    {
                        map.addEventListener(MapEvent.LOAD, map_loadHandler);
                    }
                }
                
                function map_loadHandler(event:MapEvent):void
                {
                    map.removeEventListener(MapEvent.LOAD, map_loadHandler);
                    ViewerContainer.addEventListener(AppEvent.BASEMAP_SWITCH,basemapSwitched);
                    //Set the copyright text to the first basemap in the list
                    var configBasemaps:Array = configData.basemaps;
                    var label:String = configBasemaps[0].label;
                    var layer:Layer = map.getLayer(label);
                    
                    if (layer is ArcGISTiledMapServiceLayer)
                    {
                        if(layer.visible)
                            cright.text = (layer as ArcGISTiledMapServiceLayer).copyright;
                    }
                    else if (layer is ArcGISDynamicMapServiceLayer)
                    {
                        if(layer.visible)
                            cright.text = (layer as ArcGISDynamicMapServiceLayer).copyright;
                    }
                    else if (layer is ArcGISImageServiceLayer)
                    {
                        if(layer.visible)
                            cright.text = (layer as ArcGISImageServiceLayer).copyright;
                    }
                    // if OpenStreetMapLayer
                    else if (layer is OpenStreetMapLayer)
                    {
                        if(layer.visible)
                            cright.textFlow = osmTF;
                    }                    
                }
            }
            
            private function toNumber(value:String):int
            {
                if (value.substr(0, 2) == "0x")
                {
                    return parseInt(value, 16);
                }
                return parseInt(value, 10);
            }
            
            protected function basemapSwitched(event:AppEvent):void
            {
                var id:String = event.data as String;
                var configBasemaps:Array = configData.basemaps;
                        
                if (id)
                {
                    for (var i:Number = 0; i < configBasemaps.length; i++)
                    {
                        var label:String = configBasemaps.label;
                        var layer:Layer = map.getLayer(label);
                        if (layer is ArcGISTiledMapServiceLayer)
                        {
                            if(layer.visible)
                                cright.text = (layer as ArcGISTiledMapServiceLayer).copyright;
                        }
                        else if (layer is ArcGISDynamicMapServiceLayer)
                        {
                            if(layer.visible)
                                cright.text = (layer as ArcGISDynamicMapServiceLayer).copyright;
                        }
                        else if (layer is ArcGISImageServiceLayer)
                        {
                            if(layer.visible)
                                cright.text = (layer as ArcGISImageServiceLayer).copyright;
                        }
                        // if OpenStreetMapLayer
                        else if (layer is OpenStreetMapLayer)
                        {
                            if(layer.visible)
                                cright.textFlow = osmTF;
                        }    
                    }
                }
            }
        ]]>
    </fx:Script>
    <viewer:filters>
        <mx:GlowFilter alpha="1"
                       blurX="3"
                       blurY="3"
                       color="0xFFFFFF"
                       strength="7"/>
    </viewer:filters>
    
    <!--<s:Label id="cright"/>-->
    
    <s:RichEditableText id="cright"
                        bottom="2"
                        editable="false"
                        horizontalCenter="0"
                        selectable="false"/>
</viewer:BaseWidget>

Karl

Re: Using OpenStreetMap in ArcGIS Viwer for Flex

deleted-user-NnRwwd8ols89 — Mon, 08 Nov 2010 04:45:24 GMT

Hey thanks for the tips on this guys, i'm still struggling to implement the openstreetmap layer though being a newbie!

i've put the code posted above by Karl as a new case in the MapManager.mxml but i'm getting 2 errors, as seen in the attached image, where am i going wrong?!

errors:
-1046: Type was not found or was not a compile-time constant: OpenStreetMapLayer.
-1180: Call to a possibly undefined method OpenStreetMapLayer.

is there something else i'm missing? i'm using flash builder 4 with flex api 2.1

thanks!

Ben

Re: Using OpenStreetMap in ArcGIS Viwer for Flex

KarlWilson — Mon, 08 Nov 2010 11:40:30 GMT

Ben,

You'll need to add an import statement near the top of the script code, along with the other imports:

import com.esri.ags.layers.OpenStreetMapLayer;

Hope that works,
Karl

Re: Using OpenStreetMap in ArcGIS Viwer for Flex

deleted-user-NnRwwd8ols89 — Mon, 08 Nov 2010 23:09:35 GMT

Great thanks very much! works a treat now!

Ben

Re: Using OpenStreetMap in ArcGIS Viwer for Flex

EstherColero — Sat, 11 Dec 2021 11:48:09 GMT

Great post!!

Just one more thing. If you want to use OpenStreetMap as a base map it is neccesary add this code in OverviewMapComponent.mxml

case "openstreetmap":
{
    var osmLayer:OpenStreetMapLayer = new OpenStreetMapLayer();
    osmLayer.id = label;
    osmLayer.name = label;
    osmLayer.visible = visible;
    osmLayer.alpha = alpha;
    ovMap.addLayer(osmLayer);
    break;
}