Get your own customer support community
 

How do I use WMSMapProvider with specific bbox values?

Hi all,

Forgive me if this is a dumb question but I am a newbie to all these mapping efforts. So I am having trouble getting my code to work with modest maps via WMSMapProvider. I have a GeoServer set up with one map and I am trying to have modest maps to display the map, here is the piece of code that I put in my main.mxml:

<modest:mapcomponent height="596" width="920" />

I am guessing that I need to set my bbox values somewhere but I am not sure how? So when I ran my code, I am getting blank.

Another thing is... I read something about TileCache from another thread. Do I have to install TileCache in order for my app to support zoom in/out and pan?

Thank you very in advance for any kind of support,
 
indifferent I’m confused
Inappropriate?
1 person has this question

  • Inappropriate?
    Flex support is minimal. I strongly recommend using an actionscript 3 project unless you know what you're doing with Flex.

    You don't need to provide bbox parameters to the WMSMapProvider itself - it will figure those out itself from the extent of the map. Use map.setExtent (or extent="" in Flex) with latitude and longitude parameters to set the initial view. Or use setCenterZoom if you want to specify a center point and zoom level.

    TileCache is a good idea but it's not strictly essential. If you're not familiar with rendering tiles in GeoServer it might be a good idea to find out more about that first and be sure that WMSMapProvider is actually what you need. If you have a TileCache setup that can take row/col/zoom and render maps in Google-style projection then you might want to take a look at the BlueMarble or OpenStreetMap providers instead for examples of how much that simplifies things vs WMS.
  • supremelmfz
    Inappropriate?
    Thank you for the reply. The reason that I am using a Flex project is because I started this effort with Flex to begin with. I was being able to import Modest Maps and its source codes inside of my project so I tried to make it work for my application by modifying a few things. However I do not have any luck with it as of this point.

    The reason I am using WMSMapProvider is because I will be running this application in a private network where there will be no internet connection, this is the reason why I set up a GeoServer as my backend WMS map provider.

    Aside from TileCaching, I am just trying to have my application to display a map area with the extends I defined but I am still having some trouble with it and here is a snippet my code:

    main.mxml:

    <modest:mapcomponent height="596" width="920" />

    I also made a small change in the WMSMapProvider's default object so that it uses the right layer:
    WMSMapProvider.as:

    public static const DEFAULT_PARAMS:Object = {
    LAYERS: 'mynamespace:newLayer',
    ....

    When I ran the application I am getting a blank canvas back with code described above, but if I ran the following code(changed the provider) :

    <modest:mapcomponent height="596" width="920" />

    I would end up with a correct map area.

    I also tried to browse to the map stored in my GeoServer via the WMS string in a browser and the map shows up correctly as well so I am hoping that it is only something minor that I am missing or a little modifications which I have to make?

    http://ip:port/geoserver/wms?bbox=-77.35626,34.64177,-77.31475,34.67548&format=image/png&request=GetMap&version=1.1.1&layers=mynamespace:newLayer&width=920&height=596&srs=EPSG:4326

    Thanks again,
     
    indifferent I’m fustrated
  • Inappropriate?
    Thanks for posting more info. Unfortunately I have no idea if this is a Flex issue or a Modest Maps issue or a WMS provider issue... let's dig deeper, if you have time?

    Is the final URL you posted above something that Modest Maps is loading? The width and height are suspicious - it should be requesting tiles that are 256px square.

    You don't need to modify the default parameters, you can override them with the params object in the WMSMapProvider constructor.

    Can you try debugging using a plain as3 project? A minimal app would look something like:



    package
    {
    import com.modestmaps.Map;
    import com.modestmaps.core.MapExtent;
    import com.modestmaps.extras.MapControls;
    import com.modestmaps.mapproviders.WMSMapProvider;

    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.MouseEvent;

    [SWF(backgroundColor="#ffffff")]
    public class HelloWMS extends Sprite
    {
    public var map:Map;

    public function HelloWMS()
    {
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;

    var wmsProvider:WMSMapProvider = new WMSMapProvider("http://labs.metacarta.com/wms/vmap0", {
    LAYERS: 'basic',
    SERVICE: 'WMS',
    VERSION: '1.1.1',
    REQUEST: 'GetMap',
    STYLES: '',
    SRS: WMSMapProvider.EPSG_900913,
    EXCEPTIONS: 'application/vnd.ogc.se_inimage',
    FORMAT: 'image/jpeg',
    WIDTH: '256',
    HEIGHT: '256'
    });

    map = new Map(stage.stageWidth, stage.stageHeight, true, wmsProvider, new MapExtent(48.383, 43.300, 5.367, -4.500));
    map.addEventListener(MouseEvent.DOUBLE_CLICK, map.onDoubleClick);
    addChild(map);

    map.addChild(new MapControls(map));

    stage.addEventListener(Event.RESIZE, onStageResize);
    }

    protected function onStageResize(event:Event):void
    {
    map.setSize(stage.stageWidth, stage.stageHeight);
    }

    }
    }



    If that works (with your server details) then we'll know it's an issue with the Modest Maps Flex class. It's a woefully neglected class (sorry) because nobody currently maintaining Modest Maps uses Flex at all.
  • supremelmfz
    Inappropriate?
    Thank you for your reply again, and I actually spent a little more time to give your suggestion a try, first of all I would like to answer your question. The URL I posted above is not what ModestMap is loading, it is actually the request I used in the browser just to see if my parameters are correct. It's a request to GeoServer and GeoServer uses OpenLayers as it's default viewer so the map showed correctly with OpenLayers. Is there a way to actually see what the request that ModestMap uses look like?

    I followed your suggestion and created a as3 project and used the code you suggested above with my server's details but I had no luck with it neither. Here is the snippet of my code:


    package {
    import com.modestmaps.Map;
    import com.modestmaps.core.MapExtent;
    import com.modestmaps.extras.MapControls;
    import com.modestmaps.mapproviders.WMSMapProvider;

    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.MouseEvent;

    [SWF(backgroundColor="#ffffff")]
    public class ModestTestProject extends Sprite
    {
    public var map:Map;
    public function ModestTestProject()
    {
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    var wmsProvider:WMSMapProvider = new WMSMapProvider("http://localhost:80/geoserver", {
    LAYERS: 'mynamespace:mylayer',
    SERVICE: 'WMS',
    VERSION: '1.1.1',
    REQUEST: 'GetMap',
    STYLES: '',
    SRS: WMSMapProvider.EPSG_4326,
    FORMAT: 'image/png',
    WIDTH: '256',
    HEIGHT: '256'
    });
    //map = new Map(stage.stageWidth, stage.stageHeight, true, wmsProvider, new MapExtent(34.67548, 34.64177, -77.31475, -77.35626));
    map = new Map(256, 256, true, wmsProvider, new MapExtent(34.7230765, 34.640257, -77.27107, -77.35701));
    map.addEventListener(MouseEvent.DOUBLE_CLICK, map.onDoubleClick);
    addChild(map);
    map.addChild(new MapControls(map));
    stage.addEventListener(Event.RESIZE, onStageResize);
    }
    protected function onStageResize(event:Event):void {
    map.setSize(stage.stageWidth, stage.stageHeight);
    }
    }
    }



    There is a few things I am trying to understand here, the parameters used in MapExtent, I am assuming it dictates the maximum bounds of my map? Because my wms provider does not provider area of the whole map but the lat/long I included above are the maximum lat/long it can support (just one part of North Carolina). With that said, how does ModestMap determine what's the bbox values (in other words the actual default map area that gets shown on the map)? Everything seems to be set correctly and my only guess is that ModestMap is using a map area that is not defined by my WMS provider. It might be zoomed in too far or zoomed out too far?

    I am kind of new to as3, is there a print line method I can use to print the actual lat/long that ModestMap is using for the area?

    Thank you once again and I look forward for your response,
  • Inappropriate?
    I'll answer the easy bits now and come back to the hard bits soon.

    If you use Safari you can use the activity window to see which URLs are being loaded. The Firebug extension for Firefox will also do this.

    In Flash and Flex Builder you can use the trace function to output to the console - there are various logging extensions which will output to the browser if you prefer that, but I don't use them.

    The MapExtent in Modest Maps in transformed into a view that uses the best available zoom level to fit the corners of the extent. This is so that images are not scaled on the client side, which is especially important for text. The zoom level restrictions make more sense for tile sets which have been pre-rendered (e.g. Google Maps 256px tiles), but are still imposed on WMS views to ensure reuse of cached images wherever possible.

    I'll take a look at the code as soon as I can.
    Sprite_screen 1 person says this answers the question
  • Comment_icon
    Ah! After using Firebug knowing what the request actually looks like, I found out that I have to identify the request as WMS aside from the Service attribute from the object, everything works great now, thanks! At least it works on the as3 part, I am going to give it a go for my Flex project, thanks a lot!!

    Snippet of the line of code that fixed it:

    ...
    var wmsProvider:WMSMapProvider = new WMSMapProvider("http://localhost:80/geoserver/wms?", {
    ...
  • supremelmfz
    Inappropriate?
    As you mentioned earlier, there is minimal supports for Flex and I found that the Map component is replaced by the MapComponent component in Flex and it behaves differently, does ModestMap plans to support Flex in the near future? Such as MapControls for flex, etc.
     
    happy
  • Inappropriate?
    Nobody I know of has plans to support Flex at this time, sorry.

    We'd be happy to hear from people interested in building this out and I'd personally be happy to advise/help write/adapt a Map class to work more like Flex coders expect - for example extending UIComponent instead of Sprite so that you can add UIComponents as markers.
  • supremelmfz
    Inappropriate?
    Having a Map class extending UIComponent would be really helpful. The as Map class worked great for me. But MapComponent from Flex worked a bit different for me, it actually took my whole map regardless of my extent input and scale it down to a really small tile inside of a bigger map area.But the same parameters would work fine with Map class...any insight on that? I included a screenshot of what I meant.

    Sorry about the long on-going posting.

    P.S. I am trying to work on a Map component version which is Flex friendly on the side but seems like I might need more help regarding it since I am an actionscript beginning.

  • Inappropriate?
    My advice is to use Map directly and avoid MapComponent. I don't know anything about MapComponent really.
User_default_medium