[Dojo-interest] Unexpected value matrix when adding features to openlayers

bartonjd bartonjd at gmail.com
Fri Jun 20 18:18:43 EDT 2014


I am attempting to add  many geometry shapes to a layer at instantiation of
the page. I am using a factory method to create the features I want. No
errors are displayed until I attempt to zoom. 

Upon zooming I get this error:
*
Unexpected value
matrix(1.00000000,0.00000000,0.00000000,1.00000000,89719.43855467,NaN)
parsing transform attribute.
...+tm.xx.toFixed(8)+","+tm.yx.toFixed(8)+","+tm.xy.toFixed(8)+","+tm.yy.toFixed(8)...*

Any thoughts?



var climateMap;
require(["dojo/_base/lang", "dojo/parser", "dojo/_base/declare", "dojo/dom",
"dojo/dom-style",
    "dojo/store/Memory", "dojox/geo/openlayers/Map", "dojox/mobile",
"dojox/mobile/TabBar",
    "dojox/mobile/TabBarButton", "dojox/mobile/View", "dojo/on",
"dojox/mobile/Button", "dojo/_base/array",
    "dojox/geo/openlayers/GfxLayer", "dojox/geo/openlayers/GeometryFeature",
"dojox/geo/openlayers/Collection",
    "dojox/geo/openlayers/LineString", "dojox/geo/openlayers/Point",
"dojox/geo/openlayers/WidgetFeature", "dojox/gfx", "dojox/gfx/fx",
    "dojo/request/xhr"
],
function (lang, parser, declare, dom, domStyle, Memory, Map, Mobile, TabBar,
TabBarButton, View, on, Button, array, GfxLayer, GeometryFeature,
Collection, LineString, Point, WidgetFeature, gfx, fx, xhr) {

    cmap = declare(Map, {

    });


    // Instatiate the object.
    var googleHybrid = {
        baseLayerName: "GoogleHybrid",
        baseLayerType: dojox.geo.openlayers.BaseLayerType.GOOGLE,
        baseLayerOptions: {
            type: google.maps.MapTypeId.HYBRID,
            numZoomLevels: 20
        }
    };
    var osm = {
        baseLayerName: "OpenStreetMap",
        baseLayerType: dojox.geo.openlayers.BaseLayerType.OSM
    };
    /*
    var googleVector =
{baseLayerName:"Google",baseLayerType:dojox.geo.openlayers.BaseLayerType.GOOGLE};
    var googleSatelite =
{baseLayerName:"GoogleSatellite",baseLayerType:dojox.geo.openlayers.BaseLayerType.GOOGLE,baseLayerOptions:{type:google.maps.MapTypeId.SATELLITE,numZoomLevels:20}};
   */
    climateMap = new cmap('map', googleHybrid);
    climateMap.fitTo([-160, 70, 160, -70]);
    var tabBar = new dojox.mobile.TabBar({
        fill: 'never',
        barType: "segmentedControl"
    }, 'mapOverlay');
    var buttonOSM = new dojox.mobile.TabBarButton({
        label: "OSM",
        icon1: "",
        icon2: "",
        id: 'OSM'
    });
    var buttonGoogle = new dojox.mobile.TabBarButton({
        label: "Google",
        icon1: "",
        icon2: "",
        selected: true
    });
    tabBar.addChild(buttonOSM);
    tabBar.addChild(buttonGoogle);
    tabBar.startup(climateMap);
    var zoomIn = new dojox.mobile.Button({
        label: '+',
        onClick: function () {
            climateMap.getOLMap().zoomIn();
        }
    }, 'ZoomIn');
    var zoomOut = new dojox.mobile.Button({
        label: '−',
        onClick: function () {
            climateMap.getOLMap().zoomOut();
        }
    }, 'ZoomOut');

    on(buttonOSM, "click", function (e) {
        climateMap.setBaseLayerType(osm);
    });
    on(buttonGoogle, "click", function (e) {
        climateMap.setBaseLayerType(googleHybrid);
    });



    // create a GfxLayer
    layer = new GfxLayer();


    function createStationIcon(config, coords) {
        /*******Arguments Documentation************
         * "config": in format of:
         * { text: xxx, //e.g. 'G' for GHCN
         *   fillColorTop:xxx //these colors are used for the background
gradient
         *   fillColorMiddle:xxx,
         *   fillColorBottom:xxx,
         *   strokeColor:xxx //defaults to white
         * }
         * "coords": in format of {latitude:xxx, longitude:xxx}
         */

        var p = new Point({
            x: coords.longitude,
            y: coords.latitude
        });


        // create a GeometryFeature
        var f = new GeometryFeature(p);
        // set the shape properties, fill and stroke
        f.setShapeProperties({
            r: 10
        });
        f.createShape = function (s) {
            var circ = s.createCircle({
                r: 5
            });

            return circ;
        };
        f.setFill({
            'type': 'linear',
            'x1': 0,
            'y1': -5,
            'x2': 0,
            'y2': 4,
            'colors': [{
                offset: 0,
                color: config.fillColorTop || '#111'
            }, {
                offset: .5,
                color: config.fillColorMiddle || '#222'
            }, {
                offset: 1,
                color: config.fillColorBottom || '#555'
            }]
        });
        f.setStroke({
            width: 2,
            color: config.strokeColor || 'white'
        });

        var p2 = new Point({
            x: coords.longitude,
            y: coords.latitude
        });
        var f2 = new GeometryFeature(p2);
        f2.createShape = function (s) {
            var txt = s.createText({
                text: config.text || '',
                align: "middle",
                y: 5
            });
            txt.setFont({
                size: '12px',
                family: 'Arial',
                align: "middle",
                weight: 'bold'
            });
            return txt;

        };
        f2.setFill('white');

        layer.addFeature(f);
        layer.addFeature(f2);
        return [f, f2];
}

var ghcn = {
    text: 'G',
    fillColorTop: 'red'
};
xhr("/test.php", {
    handleAs: "json"
    }).then(function(data){
        var mouseOver =  function () {
            f.setShapeProperties({
                r: 15
            });
            f.render();
        };
        var mouseOut = function () {
            f.setShapeProperties({
                r: 10
            });
            f.render();
        };
        for(var i=0;i<data.length;i++){
            data[i].latitude = Number((data[i].latitude).toFixed(2));
            data[i].longitude = Number((data[i].longitude).toFixed(2));
            
            features = createStationIcon(ghcn, data[i]);
              
            f = features[0]; 
            f2 = features[1]; 
            f.getShape().connect('onmouseover',mouseOver);
            f2.getShape().connect('mouseout',mouseOut );
            f2.getShape().connect('onmouseover', mouseOver);
            f.getShape().connect('mouseout',mouseOut);
        }

    }, function(err){
    // Handle the error condition
    }, function(evt){
    // Handle a progress event from the request if the
    // browser supports XHR2
    });

climateMap.addLayer(layer);
});



--
View this message in context: http://dojo-toolkit.33424.n3.nabble.com/Unexpected-value-matrix-when-adding-features-to-openlayers-tp4002811.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.


More information about the Dojo-interest mailing list