Using OpenStreetMap in ArcGIS Viwer for Flex

3071
10
10-08-2010 01:23 AM
AnnikaHermodsson
Esri Contributor
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
Tags (2)
0 Kudos
10 Replies
BjornSvensson
Esri Regular Contributor
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
0 Kudos
KarlWilson
Occasional Contributor III
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
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
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
0 Kudos
KarlWilson
Occasional Contributor III
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
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
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.
0 Kudos
KarlWilson
Occasional Contributor III
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
0 Kudos
deleted-user-NnRwwd8ols89
New Contributor
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
0 Kudos
KarlWilson
Occasional Contributor III
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
0 Kudos
deleted-user-NnRwwd8ols89
New Contributor
Great thanks very much! works a treat now!

Ben
0 Kudos