msfd_portal_hcmr/public/js/modules/selection/selection.js

var layer_to_select_from = [
    {
        _layerId: "select_layer_1",
        _urlWMS: "http://services.heraklion.gr/geoserver/herakliovect/wms",
        _layerName: "tsp_pol_ot"
    },
    {
        _layerId: "select_layer_2",
        _urlWMS: "http://services.heraklion.gr/geoserver/herakliovect/wms",
        _layerName: "trs_pol_oria_topikon_rymotomikon"
    },
    {
        _layerId: "select_layer_3",
        _urlWMS: "http://services.heraklion.gr/geoserver/herakliovect/wms",
        _layerName: "rym_pol_tomeis_sxediou_polis"
    },
    {
        _layerId: "select_layer_4",
        _urlWMS: "http://services.heraklion.gr/geoserver/herakliovect/wms",
        _layerName: "map_lin_odiko"
    }
];

function user_selected(v) {
    console.log(v)
}

var selection_translation = {
    el_gr: {
        tab_title: 'Πείτε μας την γνώμη σας',
        btn1: 'Ξενινήστε!',
        btn1_tooltip: 'Κάντε κλικ πάνω στον χάρτη',
        please_wait: 'Παρακαλώ περιμένετε...',

        win_title: 'Παρακαλώ επιλέξτε να',

        opinion: 'Προτείνετε για το  ',
        point: ' στο σημείο αυτό',

        selection_context_draw_point: 'Σχεδιάστε ένα σημείο',
        selection_context_draw_line: 'Σχεδιάστε μία γραμμή',
        selection_context_draw_polygon: 'Σχεδιάστε ένα πολύγωνο',

        tsp_pol_ot: 'layer 1',
        trs_pol_oria_topikon_rymotomikon: 'layer 2',
        rym_pol_tomeis_sxediou_polis: 'layer 3',
        map_lin_odiko: 'layer 4'
    },
    en_us: {
        tab_title: 'Πείτε μας την γνώμη σας',
        btn1: 'Ξενινήστε!',
        btn1_tooltip: 'Κάντε κλικ πάνω στον χάρτη',
        please_wait: 'Παρακαλώ περιμένετε...',

        win_title: 'Προτείνετε για το ',

        opinion: 'Πείτε την γνώμη σας για το ',
        point: ' στο σημείο αυτό',

        selection_context_draw_point: 'Σχεδιάστε ένα σημείο',
        selection_context_draw_line: 'Σχεδιάστε μία γραμμή',
        selection_context_draw_polygon: 'Σχεδιάστε ένα πολύγωνο',

        tsp_pol_ot: 'layer 1',
        trs_pol_oria_topikon_rymotomikon: 'layer 2',
        rym_pol_tomeis_sxediou_polis: 'layer 3',
        map_lin_odiko: 'layer 4'
    }
};

var selection_pointLayer = new OpenLayers.Layer.Vector("Selection Point Layer");
var selection_lineLayer = new OpenLayers.Layer.Vector("Selection Line Layer");
var selection_polygonLayer = new OpenLayers.Layer.Vector("Selection Polygon Layer");
var selection_drawControls = {
    point: new OpenLayers.Control.DrawFeature(selection_pointLayer, OpenLayers.Handler.Point),
    line: new OpenLayers.Control.DrawFeature(selection_lineLayer, OpenLayers.Handler.Path),
    polygon: new OpenLayers.Control.DrawFeature(selection_polygonLayer, OpenLayers.Handler.Polygon)
};
selection_pointLayer.events.on({
    'featureadded': function (obj) {
        selection_drawControls['point'].deactivate();
        selection_user_selected(selection_pointLayer, 'point');
        selection_add_opinion(false);
    }
});
selection_lineLayer.events.on({
    'featureadded': function (obj) {
        selection_drawControls['line'].deactivate();
        selection_user_selected(selection_lineLayer, 'line');
        selection_add_opinion(false);
    }
});
selection_polygonLayer.events.on({
    'featureadded': function (obj) {
        selection_drawControls['polygon'].deactivate();
        selection_user_selected(selection_polygonLayer, 'polygon');
        selection_add_opinion(false);
    }
});

function selection_contextMenu_items() {
    var items = [
        {
            id: 'selection_context_menu',
            xtype: 'label',
            html: selection_translation[language].win_title,
            _selection_win: null
        },
        {
            xtype: 'menuseparator'
        },
        {
            id: 'selection_context_menu_please_wait',
            text: selection_translation[language].please_wait,
            iconCls: 'selection_please_wait'
        }
    ];

    layer_to_select_from.forEach(function (ly) {
        items.push(
            {
                text: selection_translation[language].opinion +  selection_translation[language][ly._layerName] + selection_translation[language].point,
                id: ly._layerId,
                iconCls: 'selection_context_layer',
                hidden: true
            }
        )
    });

    items.push({
        xtype: 'menuseparator'
    });
    items.push({
        text: selection_translation[language].selection_context_draw_point,
        id: 'selection_context_draw_point',
        iconCls: 'selection_context_draw_point',
        hidden: true,
        handler: function () {
            selection_toggleControl('point');
        }
    });
    items.push({
        text: selection_translation[language].selection_context_draw_line,
        id: 'selection_context_draw_line',
        iconCls: 'selection_context_draw_line',
        hidden: true,
        handler: function () {
            selection_toggleControl('line');
        }
    });
    items.push({
        text: selection_translation[language].selection_context_draw_polygon,
        id: 'selection_context_draw_polygon',
        iconCls: 'selection_context_draw_polygon',
        hidden: true,
        handler: function () {
            selection_toggleControl('polygon');
        }
    });
    items.push({
        xtype: 'menuseparator'
    });
    items.push({
        text: _map_contextMenu_Cancel,
        iconCls: 'selection_cancel',
        handler: function () {
            selection_add_opinion(false);
            Ext.getCmp("selection_btn1").toggle(true);
        }
    });

    return items
}

var selection_contextMenu = Ext.create("Ext.menu.Menu", {
    floating: true,
    ignoreParentClick: true,
    width: 260,
    items: selection_contextMenu_items()
});

function init_selection() {

    var selection_tab = {
        xtype: 'toolbar',
        border: false,
        iconCls: 'selection_tab',
        id: 'maptab_toolbar_selection_tab',
        title: selection_translation[language].tab_title,
        items: [
            {xtype: 'tbseparator'},
            {
                xtype: 'button',
                iconCls: 'selection_btn1',
                id: 'selection_btn1',
                text: selection_translation[language].btn1,
                tooltip: selection_translation[language].btn1_tooltip,
                toggleGroup: 'map_control_one_btn_allowed_group',
                enableToggle: false,
                style: 'background-color:#ffff30;border-color: red;',
                toggleHandler: function (item, state) {
                    selection_add_opinion(state);
                }
            }
        ]
    };

    Ext.getCmp("maptab_north_tabpanel").insert(0, selection_tab);

    map.addLayers([selection_pointLayer, selection_lineLayer, selection_polygonLayer]);
    for (var key in selection_drawControls) {
        map.addControl(selection_drawControls[key]);
    }
}

init_onload_fn.push(init_selection);


function selection_toggleControl(element) {
    selection_add_opinion(false);
    selection_pointLayer.destroyFeatures();
    selection_lineLayer.destroyFeatures();
    selection_polygonLayer.destroyFeatures();
    for (var key in selection_drawControls) {
        var control = selection_drawControls[key];
        if (element === key) {
            control.activate();
        } else {
            control.deactivate();
        }
    }
}

function selection_add_opinion(state) {
    mapUnregisterEvents("click", selection_info_clickEvent);
    if (state) {
        Ext.get('maptab_map').setStyle("cursor", "copy");
        mapOnClick(selection_info_clickEvent);
        document.onkeydown = function (evt) {
            evt = evt || window.event;
            if (evt.keyCode === 27) {
                Ext.getCmp("selection_btn1").toggle(false);
            }
        }
    } else {
        mapUnregisterEvents("click", selection_info_clickEvent);
        Ext.get('maptab_map').setStyle("cursor", "default");
        Ext.getCmp("selection_btn1").toggle(false);
        selection_drawControls['point'].deactivate();
        selection_drawControls['line'].deactivate();
        selection_drawControls['polygon'].deactivate();
    }
}

function selection_info_clickEvent(evt) {
    if (evt) {

        Ext.getCmp("selection_context_menu_please_wait").show();

        layer_to_select_from.forEach(function (ly) {
            Ext.getCmp(ly._layerId).hide();
        });

        Ext.getCmp("selection_context_draw_point").hide();
        Ext.getCmp("selection_context_draw_line").hide();
        Ext.getCmp("selection_context_draw_polygon").hide();

        var topleft = Ext.getCmp("maptab_mapPanel").getXY();
        var _point_show_menu = new OpenLayers.Pixel(Number(evt.xy.x) + topleft[0], Number(evt.xy.y) + topleft[1]);
        var _point_info = new OpenLayers.Pixel(Number(evt.xy.x), Number(evt.xy.y));
        selection_contextMenu._pos = _point_show_menu;
        selection_contextMenu.showAt(_point_show_menu);

        selection_featureInfo(_point_info);
    }
}

function selection_featureInfo(_point) {
    var lonlat = map.getLonLatFromPixel(_point);
    var selection_featureInfo_request = new fn_get();
    var _queryObject = selection_featureInfo_fetch_querable_layers(_point);
    var _feature_count = 1000;

    if (_queryObject.length > 0) {
        selection_featureInfo_request._async = true;

        selection_featureInfo_request._query = fn_createGetQuery({
            _width: Math.round(mapGetSize().w),
            _height: Math.round(mapGetSize().h),
            _x: Math.round(_point.x),
            _y: Math.round(_point.y),
            _bbox: mapGetExtent().toString(),
            _srs: mapGetCurrentProjection(),
            _lon: lonlat.lon,
            _lat: lonlat.lat,
            _feature_count: _feature_count
        });

        selection_featureInfo_request._data = _queryObject;
        selection_featureInfo_request._timeout = 15000;
        selection_featureInfo_request._success = selection_featureInfo_success;
        selection_featureInfo_request._failure = selection_featureInfo_failure;
        selection_featureInfo_request.get();

        selection_add_opinion(false);
    }
}

function selection_featureInfo_fetch_querable_layers(p) {
    var lonlat = map.getLonLatFromPixel(p);

    if (mapGetCurrentProjection() !== "EPSG:4326") {
        lonlat.transform(new OpenLayers.Projection(mapGetCurrentProjection()), new OpenLayers.Projection("EPSG:4326"));
    }

    var b = [];

    var features = [];

    Ext.each(layer_to_select_from, function (item) {

        b.push({
            _layerId: item._layerId,
            _serviceType: "WMS",
            _username: null,
            _serviceUrl: item._urlWMS,
            _serviceName: "WMS",
            _servicePort: "",
            _geometryField: "geom",
            _password: null,
            _layerName: item._layerName,
            _version: "1.3.0",
            _isService: true,
            _cqlFilter: null,
            _infoLon: lonlat.lon,
            _infoLat: lonlat.lat,
            _nativeSRS: "EPSG:4326",
            _featureInfoFormat: "application/vnd.ogc.gml",
            _featureId: features.join(","),
            _request: "getInfo"
        });

    });

    return b;
}

function selection_featureInfo_success(_response, _opts) {
    var _response = Ext.JSON.decode(_response.responseText);

    Ext.getCmp("selection_context_menu_please_wait").hide();

    Ext.each(_response, function (item) {
        Ext.each(item._response._attributes, function(attributes) {
            if (item._response._attributes[0]){
                var _feature = attributes;
                var record = _feature[0];

                var feature = {
                    _featureId: record._featureId,
                    _layerId: record._layerId,
                    _srsName: record._srsName,
                    _featureUrl: record._featureUrl,
                    _featureGeomFormat: record._featureGeomFormat
                };

                Ext.getCmp(record._layerId).show();
                Ext.getCmp(record._layerId).setHandler(function () {

                    var p = new fn_get();
                    p._async = true;
                    p._url = _proxy_url + "?proxy=proxy&url=" + feature._featureUrl.replace('application/vnd.ogc.gml', 'application/json');
                    p._timeout = 5000;
                    p._success = function(_response, _opts) {

                        var vector_layer = new OpenLayers.Layer.Vector();
                        var featurecollection = JSON.parse(_response.responseText);
                        var geojson_format = new OpenLayers.Format.GeoJSON();
                        vector_layer.addFeatures(geojson_format.read(featurecollection));

                        var tmp = vector_layer.features[0].geometry.transform(new OpenLayers.Projection(mapGetCurrentProjection()), new OpenLayers.Projection('EPSG:4326'));
                        var gml = new OpenLayers.Format.GML();
                        var pGML = null;

                        if (tmp.CLASS_NAME === 'OpenLayers.Geometry.Point') {
                            pGML = gml.buildGeometry.point.apply(gml, [tmp]);
                        } else if (tmp.CLASS_NAME === 'OpenLayers.Geometry.MultiPoint') {
                            pGML = gml.buildGeometry.multipoint.apply(gml, [tmp]);
                        } else if (tmp.CLASS_NAME === 'OpenLayers.Geometry.LineString') {
                            pGML = gml.buildGeometry.linestring.apply(gml, [tmp]);
                        } else if (tmp.CLASS_NAME === 'OpenLayers.Geometry.MultiLineString') {
                            pGML = gml.buildGeometry.multilinestring.apply(gml, [tmp]);
                        } else if (tmp.CLASS_NAME === 'OpenLayers.Geometry.Polygon') {
                            pGML = gml.buildGeometry.polygon.apply(gml, [tmp]);
                        } else if (tmp.CLASS_NAME === 'OpenLayers.Geometry.MultiPolygon') {
                            pGML = gml.buildGeometry.multipolygon.apply(gml, [tmp]);
                        }
                        var plgGMLString = (new XMLSerializer()).serializeToString(pGML);

                        user_selected(plgGMLString)
                    };
                    p.get();

                });

            }
        });
    });


    Ext.getCmp("selection_context_draw_point").show();
    Ext.getCmp("selection_context_draw_line").show();
    Ext.getCmp("selection_context_draw_polygon").show();

}

function selection_featureInfo_failure() {
    console.log('error)');
}

function selection_user_selected(ly, type) {

    var tmp = ly.features[0].geometry.transform(new OpenLayers.Projection(mapGetCurrentProjection()), new OpenLayers.Projection('EPSG:4326'));
    var gml = new OpenLayers.Format.GML();
    var pGML = null;

    if (type === 'point') {
        pGML = gml.buildGeometry.point.apply(gml, [tmp]);
    } else if (type === 'line') {
        pGML = gml.buildGeometry.linestring.apply(gml, [tmp]);
    } else if (type === 'polygon') {
        pGML = gml.buildGeometry.polygon.apply(gml, [tmp]);
    }
    var plgGMLString = (new XMLSerializer()).serializeToString(pGML);

    user_selected(plgGMLString);
}