Mapguide & Openlayers 3.12.1 Displaydpi for mobile/tablet devices

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

Mapguide & Openlayers 3.12.1 Displaydpi for mobile/tablet devices

RenoSun
I am currently trying to update our mobile map viewer (Kaliopa Mapguide Mobile Viewer) from OL2 to OL3.

I found there is no display problems for mapguide layer on the desktop browsing.

However, when I zoomed in higher zoom levels on the mobile devices, the features on the mapguide layers such as points, labels, and lines are displayed so small.

I tried to use the custom resolutions array for mobile devices, and it works as following:

   var DesktopResolutions = [156543.03390625, 78271.516953125, 39135.7584765625,
              19567.87923828125, 9783.939619140625, 4891.9698095703125,
              2445.9849047851562, 1222.9924523925781, 611.4962261962891,
              305.74811309814453, 152.87405654907226, 76.43702827453613,
              38.218514137268066, 19.109257068634033, 9.554628534317017,
              4.777314267158508, 2.388657133579254, 1.194328566789627,
              0.5971642833948135, 0.2986, 0.1493];
    var MobileResolutions = [156543.03390625, 78271.516953125, 39135.7584765625,
              19567.87923828125, 9783.939619140625, 4891.9698095703125,
              2445.9849047851562, 1222.9924523925781, 611.4962261962891,
              305.74811309814453, 152.87405654907226, 76.43702827453613,
              38.218514137268066, 19.109257068634033, 9.554628534317017,
              4.777314267158508, 2.388657133579254, 1.194328566789627,
              0.5971642833948135];

var mgLayerSource = new ol.source.ImageMapGuide({
        projection: 'EPSG:3857',
        url: agentUrl,
        useOverlay: true,
        hidpi: true,
        metersPerUnit: metersPerUnit,
        displayDpi:  DPI, //  default 96
        units: unitsType,
        ratio: 1,
        resolutions: (isMobile ? MobileResolutions : DesktopResolutions),
        params: {
            mapName: mapName,
            session: sessionId,
            selectioncolor: selectionColor,
            behavior: 2,
            locale: locale,
            VERSION: "2.1.0",
            clientagent: clientAgent,
            format: 'PNG',
            showGroups: '',
            hideGroups: '',
            showLayers: '',
            hideLayers: ''
        }
    });

    mgLayer = new ol.layer.Image({
        title: 'Mapguide Layer',
        extent: bounds,
        source: mgLayerSource
    });

It works to show larger features, but won't refresh the mapguide layer when I zoom over zoom level 18.

Therefore, I don't like the solution above.

Then, I found out that if I change the display DPI, it will work just fine on most of the devices.

        displayDpi: (isMobile ? 300: DPI),
        units: unitsType,
        ratio: 1,
        //resolutions: (isMobile ? MobileResolutions : DesktopResolutions),

Hope this help someone works on the similar projects, or please let me know if there are more responsive solutions.

Thanks a lot!



Reply | Threaded
Open this post in threaded view
|

Re: Mapguide & Openlayers 3.12.1 Displaydpi for mobile/tablet devices

Greg
I found that using pixelRatio: 1 in the map definition and keeping displayDpi: 96 in the layer definition works better:

map = new ol.Map({
                layers: [bingRoad, bingAerialWithLabels, mgLayer, selLayer],
                controls: controls,
                pixelRatio: 1,
                interactions: interactions,
                target: 'map',
                view: view1
            });

Greg
Reply | Threaded
Open this post in threaded view
|

Re: Mapguide & Openlayers 3.12.1 Displaydpi for mobile/tablet devices

swimming123
In reply to this post by RenoSun
I feel it's big challenging for MapGuide switch from OpenLayer2 to OpenLayers3. Let's look at the API documnets:
In OpenLayers2, OpenLayers.Layer.MapGuide constructor can accept params including mapDefinition, locale, mapName, session, basemaplayergroupname, format, showLayers, hideLayers, showGroups, hideGroups and selectionXml. So you can pass these parameters and manipulate your MapGuide instance; seeAPI doc: http://dev.openlayers.org/apidocs/files/OpenLayers/Layer/MapGuide-js.html.

However OpenLayers 3 design and re-write from scratch, MapGuide instance is ol.source.ImageMapGuide,  it extend from ol.source.Image(version2 from OpenLayers.Layer), it accept a params object including ol.Extent, ol.Size,  metersPerUnit, dpi ; see api doc: http://openlayers.org/en/v3.0.0/apidoc/ol.source.ImageMapGuide.html.  I read the source code, I think probably to use this ol.source.ImageMapGuide.prototype.updateParams or try  using ol._params_ to pass parameters. Myself haven't try yet, will try once I feel more familiar with OpenLayers 3.

So OpenLayers3 is not even similar with OpenLayer2,  as MapGuide users/developers, there are a huge step need to take forward because OpenLayers 2.X will not going to develop further after Year2013 due to it aging of JavaScript. Move to OpenLayers3.X basically also need re-design and re-write from scratch.
Reply | Threaded
Open this post in threaded view
|

Re: Mapguide & Openlayers 3.12.1 Displaydpi for mobile/tablet devices

Jackie Ng
You use updateParams() of ol.source.ImageMapGuide to send updated request parameters:

Example: https://github.com/jumpinjackie/mapguide-rest/blob/master/assets/common/js/legend_ol3.js#L132

ol2 to ol3 migration appears challenging, but only due to a lack of good examples. When I added MapGuide support to ol3, I could only add one example because I needed a known MapGuide Server that's publicly available, and that's the Autodesk-hosted one at data.mapguide.com

If you need extra guidance, you can check out the various ol3 examples I've bundled with mapguide-rest (https://github.com/jumpinjackie/mapguide-rest/tree/master/sampleapps). Although the examples work against the APIs provided by mapguide-rest, most of the APIs provided by mapguide-rest are just "clean URL" variations of what is already provided by the mapagent, so porting these examples back to vanilla MapGuide should't be too much of a challenge.

- Jackie
Reply | Threaded
Open this post in threaded view
|

Re: Mapguide & Openlayers 3.12.1 Displaydpi for mobile/tablet devices

swimming123
Thanks Jackie, very helpful information
Reply | Threaded
Open this post in threaded view
|

Re: Mapguide & Openlayers 3.12.1 Displaydpi for mobile/tablet devices

swimming123
I will post my code once I can create a MapGuide Map with ol3, sencha to Github in the near future. I found ol3 has ol.control.* class to interaction with map, ol2 rely on DOM. Still feel lots to learn and practice.
Reply | Threaded
Open this post in threaded view
|

Re: Mapguide & Openlayers 3.12.1 Displaydpi for mobile/tablet devices

RenoSun
In reply to this post by Greg
Hi Greg,

It's exactly the solutions that I was looking for!

Thank you so much!
Reply | Threaded
Open this post in threaded view
|

Re: Mapguide & Openlayers 3.12.1 Displaydpi for mobile/tablet devices

RenoSun
This post was updated on .
In reply to this post by swimming123
Hi Swimming123,

I think OpenLayers 3 basically include everything I need for our mobile viewer to display our MapGuide map.

I do miss the function that called "redraw" for the layer feature.

mgLayer.redraw(true)

I meant we can used updateParams to update the mapguide layer, but I still think redraw make my life easier haha.

I upgraded our mobile viewer (https://github.com/sreckolipovsek/KaliopaMobileViewer) from OL2 to OL3, and I wasn't able to understand all the OL2 selection/measurement methods written in original KaliopaMobileViewer. However, I realize that OL3 made my life easier to implement new controls, measurement and selection interactions. I don't care those geometry style too much as long as my mapguide layer are displayed the layer styled correctly. However, if you would like to draw something on the map, I don't think WebGL will help you... I think you can only use CANVAS to do that.

Here is our municipal public GIS mobile viewer

Also, Jackie was totally right that we need to have more and more good example by using MapGuide with OL3, Leaflet, OL3-Cesium...and so on.

Jackie's mapguide-rest examples are showing a lot possibilities for the future of the MapGuide.

Thanks

Thanks!