nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Using OpenStreetMap in ArcGIS Viwer for Flex

AnnikaHermodsson

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

Find more posts tagged with

Accepted answers

All comments

EstherColero

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;
}

deleted-user-NnRwwd8ols89

Great thanks very much! works a treat now!

Ben

KarlWilson

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

deleted-user-NnRwwd8ols89

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

Flex_OSM.JPG

Flex_OSM_error.JPG

KarlWilson

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

RobertScheitlin__GISP

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.

KarlWilson

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

RobertScheitlin__GISP

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

KarlWilson

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

BjornSvensson

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.