Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More

How to use mapProperties method in Testcafe

Best JavaScript code snippet using testcafe

MapEditor.js

Source:MapEditor.js

1/* Copyright (C) OSBI Ltd - All Rights Reserved2 * Unauthorized copying of this file, via any medium is strictly prohibited3 * Proprietary and confidential4 * Written by Tom Barber, 20155 */6/**7 * @dependencies8 * - leaflet/leaflet-heat.js9 * - plugins/CCC_Chart/map_editor.css10 * - plugins/CCC_Chart/plugin.js11 * - render/SaikuMapRenderer.js12 * - views/QueryToolbar.js13 * - views/Workspace.js14 * - Saiku.js15 * - Settings.js16 */17/**18 * Class for edit map19 * 20 * @class MapEditor21 */22var MapEditor = Modal.extend({23    /**24     * Type name25     *26     * @property type27     * @type {String}28     * @private29     */30    type: 'map-editor',31    /**32     * Property with main template of modal33     *34     * @property message35     * @type {String}36     * @private37     */38    message: '<form class="form-group">' +39                '<label for="map-type" class="i18n">Map Type:</label>' +40                '<select id="map-type">' +41                    // '<option value="map_geo">Geo Map</option>' +42                    // '<option value="map_heat">Heat Map</option>' +43                    // '<option value="map_marker" selected>Marker Map</option>' +44                '</select>' +45                '<div class="div-country" hidden>' +46                    '<label for="select-country" class="i18n">Select Country Field:</label>' +47                    '<select id="select-country"></select>' +48                '</div>' +49                '<div class="div-geo">' +50                    '<label for="geo-lookup" class="i18n">Geo Lookup: <input type="checkbox" id="geo-lookup" value="true" checked></label>' +51                    '<div class="div-latlon" hidden>' +52                        '<label for="lat" class="i18n">Latitude Field:</label>' +53                        '<select id="lat"><option value=""></option></select>' +54                        '<label for="lon" class="i18n">Longitude Field:</label>' +55                        '<select id="lon"><option value=""></option></select>' +56                    '</div>' +57                    // '<div class="div-lookup">' +58                    //     '<label for="lookups">Lookup Fields:</label>' +59                    //     '<select id="lookups" multiple></select>' +60                    //     '<label for="geo-bias">Geo Bias (<a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" id="region-codes" target="_blank">Region Codes</a>):' +61                    //     '<input type="text" id="geo-bias">' +62                    // '</div>' +63                '</div>' +64                '<div class="div-metric">' +65                    '<label for="select-metric" class="i18n">Select a Metric:</label>' +66                    '<select id="select-metric"></select>' +67                '</div>' +68                '<div class="div-lookup">' +69                    '<div class="div-search chosen-mb" hidden>' +70                        '<label for="street-lookups" class="i18n">Street Mapping:</label>' +71                        '<select id="street-lookups"><option value=""></option></select>' +72                        '<label for="city-lookups" class="i18n">City Mapping:</label>' +73                        '<select id="city-lookups"><option value=""></option></select>' +74                        '<label for="county-lookups" class="i18n">County Mapping:</label>' +75                        '<select id="county-lookups"><option value=""></option></select>' +76                        '<label for="state-lookups" class="i18n">State Mapping:</label>' +77                        '<select id="state-lookups"><option value=""></option></select>' +78                        '<label for="country-lookups" class="i18n">Country Mapping:</label>' +79                        '<select id="country-lookups"><option value=""></option></select>' +80                    '</div>' +81                '</div>' +82             '</form>',83    /**84     * Events of buttons85     *86     * @property buttons87     * @type {Array}88     * @private89     */90    buttons: [91        { text: 'Save', method: 'save' },92        { text: 'Cancel', method: 'close' },93        { text: 'Help', method: 'help' }94    ],95    /**96     * The events hash (or method) can be used to specify a set of DOM events 97     * that will be bound to methods on your View through delegateEvents98     * 99     * @property events100     * @type {Object}101     * @private102     */103    events: {104        'click  .dialog_footer a' : 'call',105        'change #map-type'        : 'change_map',106        'click  #geo-lookup'      : 'change_geo',107    },108    /**109     * The constructor of view, it will be called when the view is first created110     *111     * @constructor112     * @private113     * @param  {Object} args Attributes, events and others things114     */115    initialize: function(args) {116        // Initialize properties117        _.extend(this, args);118        this.options.title = 'Map Settings';119        if (args && args.data && _.has(args, 'data')) {120            var mapProperties = this.workspace.query.getProperty('saiku.ui.map.options');121            var mapType = mapProperties ? mapProperties.mapDefinition.type : '';122            this.renderer = args.data;123        }124        else {125            this.$el = args;126        }127        128        // console.log(this.workspace);129        // console.log(this.workspace.query);130        // console.log(this.workspace.query.getProperty('saiku.ui.map.options'));131        // console.log(this.workspace.query.getProperty('saiku.ui.render.mode'));132        // console.log(this.workspace.query.getProperty('saiku.ui.render.type'));133        134        // Maintain `this` in callbacks135        _.bindAll(this, 'template_editor', 'post_render', 'show_map_type', 'get_rows', 'get_map_properties');136        this.bind('open', function() {137            this.post_render();138            this.show_map_type();139            this.get_rows(this.workspace.query);140            this.get_map_properties(mapProperties, mapType);141            this.$el.find('select').chosen({ allow_single_deselect: true });142        });143    },144    /**145     * Main template of modal146     *147     * @public148     * @method template_editor149     * @return {String} HTML template150     */151    template_editor: function() {152        return this.message;153    },154    /**155     * Redirect for link in wiki156     *157     * @method help158     * @private159     * @param  {Object} event The Event interface represents any event of the DOM160     */161    help: function(event) {162        event.preventDefault();163        window.open('http://wiki.meteorite.bi/display/SAIK/Maps');164    },165    /**166     * Centralize dialog in screen167     *168     * @method post_render169     * @public170     */171    post_render: function() {172        var tPerc = (((($('body').height() - 500) / 2) * 100) / $('body').height());173        var lPerc = (((($('body').width() - 500) / 2) * 100) / $('body').width());174        this.$el.dialog('option', 'position', 'center');175        this.$el.parents('.ui-dialog').css({ 176            width: '500px', 177            top: tPerc + '%', 178            left: lPerc + '%' 179        });180    },181    /**182     * Show the map type (Geo Map, Heat Map or Marker Map)183     *184     * @method show_map_type185     * @private186     */187    show_map_type: function() {188        if (Settings.MAPS_TYPE === 'OSM') {189            this.$el.find('#map-type').append(190                '<option value="map_heat">Heat Map</option>' +191                '<option value="map_marker" selected>Marker Map</option>'192            );193            this.$el.find('.div-search').show();194        }195        // else if (Settings.MAPS_TYPE === 'GMAPS') {196        //     this.$el.find('#map-type').append(197        //         '<option value="map_geo">Geo Map</option>' +198        //         '<option value="map_heat">Heat Map</option>' +199        //         '<option value="map_marker" selected>Marker Map</option>'200        //     );201        //     this.$el.find('.div-search').hide();202        // }203    },204    /**205     * Template for create element <option>206     *207     * @method option_template208     * @private209     * @param  {Object} parameters Name parameter210     * @return {String}            HTML template211     */212    option_template: function(data) {213        return _.template(214            '<% _.each(obj.data, function(name) { %>' +215                '<option value="<%= name %>"><%= name %></option>' +216            '<% }); %>'217        )({ data: data });218    },219    /**220     * Get rows and append data in element <option>221     *222     * @method get_rows223     * @public224     * @param  {Object} query data225     */226    get_rows: function(query) {227        var rows = query.model ? query.model.queryModel.axes.ROWS.hierarchies : query.queryModel.axes.ROWS.hierarchies;228        var measures = query.model ? query.model.queryModel.details.measures : query.queryModel.details.measures;229        var arrRows = [];230        var arrMeasures = [];231        var $rowsTemplate;232        var $measuresTemplate;233        _.each(rows, function(row) {234            _.each(row.levels, function(level) {235                arrRows.push(level.name);236            });237        });238        _.each(measures, function(measure) {239            arrMeasures.push(measure.name);240        });241        $rowsTemplate = this.option_template(arrRows);242        $measuresTemplate = this.option_template(arrMeasures);243        this.$el.find('#select-country').append($rowsTemplate);244        this.$el.find('#lookups').append($rowsTemplate);245        this.$el.find('#street-lookups').append($rowsTemplate);246        this.$el.find('#city-lookups').append($rowsTemplate);247        this.$el.find('#county-lookups').append($rowsTemplate);248        this.$el.find('#state-lookups').append($rowsTemplate);249        this.$el.find('#country-lookups').append($rowsTemplate);250        this.$el.find('#lat').append($rowsTemplate);251        this.$el.find('#lon').append($rowsTemplate);252        this.$el.find('#select-metric').append($measuresTemplate);253    },254    /**255     * Switch map type256     *257     * @method switch_map_type258     * @private259     * @param  {String} data Map type260     */261    switch_map_type: function(data) {262        switch (data) {263        case 'map_geo':264            this.$el.find('.div-geo').hide();265            this.$el.find('.div-country').show();266            this.$el.find('.div-metric').show();267            this.$el.find('.div-latlon').removeClass('chosen-mb');268            break;269        case 'map_heat':270            this.$el.find('.div-geo').show();271            this.$el.find('.div-country').hide();272            this.$el.find('.div-metric').hide();273            this.$el.find('.div-latlon').addClass('chosen-mb');274            break;275        case 'map_marker':276            this.$el.find('.div-geo').show();277            this.$el.find('.div-country').hide();278            this.$el.find('.div-metric').show();279            this.$el.find('.div-latlon').removeClass('chosen-mb');280            break;281        }282    },283    /**284     * Get map properties285     *286     * @method get_map_properties287     * @public288     */289    get_map_properties: function(mapProperties, mapType) {290        this.switch_map_type(mapType);291        if (mapType === 'map_marker' || mapType === 'map_heat') {292            var search = mapProperties.mapDefinition.search;293            this.$el.find('#map-type').val(mapType);294            this.$el.find('#map-type').trigger('chosen:updated');295            if ((mapProperties.mapDefinition.latfield === null || mapProperties.mapDefinition.latfield === undefined) &&296                (mapProperties.mapDefinition.lonfield === null || mapProperties.mapDefinition.lonfield === undefined)) {297                this.$el.find('#geo-lookup').prop('checked', true);298                this.$el.find('#lookups').val(mapProperties.mapDefinition.lookupfields);299                this.$el.find('#lookups').trigger('chosen:updated');300                this.$el.find('#geo-bias').val(mapProperties.mapDefinition.bias);301                302                if (search.street !== undefined && search.street !== '') {303                    this.$el.find('#street-lookups').val(search.street);304                }305                if (search.city !== undefined && search.city !== '') {306                    this.$el.find('#city-lookups').val(search.city);307                }308                if (search.county !== undefined && search.county !== '') {309                    this.$el.find('#county-lookups').val(search.county);310                }311                if (search.state !== undefined && search.state !== '') {312                    this.$el.find('#state-lookups').val(search.state);313                }314                if (search.country !== undefined && search.country !== '') {315                    this.$el.find('#country-lookups').val(search.country);316                }317            }318            else {319                this.$el.find('#geo-lookup').prop('checked', false);320                this.$el.find('#lat').val(mapProperties.mapDefinition.latfield);321                this.$el.find('#lon').val(mapProperties.mapDefinition.lonfield);322                this.$el.find('#lat').trigger('chosen:updated');323                this.$el.find('#lon').trigger('chosen:updated');324            }325        }326        else if (mapType === 'map_geo') {327            this.$el.find('#map-type').val(mapType);328            this.$el.find('#map-type').trigger('chosen:updated');329            this.$el.find('#select-country').val(mapProperties.mapDefinition.lookupfields);330            this.$el.find('#select-country').trigger('chosen:updated');331        }332        if (mapType === 'map_marker' || mapType === 'map_geo') {333            this.$el.find('#select-metric').val(mapProperties.mapDefinition.metric);334            this.$el.find('#select-metric').trigger('chosen:updated');335        }336        if (mapProperties && mapProperties.mapDefinition && 337            mapProperties.mapDefinition.search !== null && mapProperties.mapDefinition.search !== undefined) {338            //this.$el.find('#select-search').val(mapProperties.mapDefinition.search);339            this.$el.find('#street-lookups').val(search.street);340            this.$el.find('#city-lookups').val(search.city);341            this.$el.find('#county-lookups').val(search.county);342            this.$el.find('#state-lookups').val(search.state);343            this.$el.find('#country-lookups').val(search.country);344            this.$el.find('#street-lookups').trigger('chosen:updated');345            this.$el.find('#city-lookups').trigger('chosen:updated');346            this.$el.find('#county-lookups').trigger('chosen:updated');347            this.$el.find('#state-lookups').trigger('chosen:updated');348            this.$el.find('#country-lookups').trigger('chosen:updated');349        }350        this.change_geo();351    },352    /**353     * Change Map Type354     *355     * @method change_map356     * @private357     * @param  {Object} event The Event interface represents any event of the DOM358     */359    change_map: function(event) {360        event.preventDefault();361        var $currentTarget = $(event.currentTarget);362        var value = $currentTarget.val();363        this.switch_map_type(value);364    },365    /**366     * Change Geo Lookup367     *368     * @method change_geo369     * @private370     */371    change_geo: function() {372        if (this.$el.find('#geo-lookup').is(':checked')) {373            this.$el.find('.div-lookup').show();374            this.$el.find('.div-latlon').hide();375            this.$el.find('.div-metric').removeClass('chosen-mb');376        } 377        else {378            this.$el.find('.div-lookup').hide();379            this.$el.find('.div-latlon').show();380            this.$el.find('.div-metric').addClass('chosen-mb');381        }382    },383    /**384     * Save map options385     *386     * @method save387     * @private388     * @param  {Object} event The Event interface represents any event of the DOM389     */390    save: function(event) {391        event.preventDefault();392        var mapType = this.$el.find('#map-type').val();393        var mapProperties = {};394        var saikuMapRenderer;395        var search;396        397        mapProperties.mapDefinition = {};398        mapProperties.mapDefinition.type = mapType;399        if (mapType === 'map_geo') {400            mapProperties.mapDefinition.lookupfields = this.$el.find('#select-country').val();401        }402        else {403            if (this.$el.find('#geo-lookup').is(':checked')) {404                mapProperties.mapDefinition.lookupfields = this.$el.find('#lookups').val();405                mapProperties.mapDefinition.latfield = null;406                mapProperties.mapDefinition.lonfield = null;407                mapProperties.mapDefinition.bias = this.$el.find('#geo-bias').val();408            }409            else {410                mapProperties.mapDefinition.latfield = this.$el.find('#lat').val();411                mapProperties.mapDefinition.lonfield = this.$el.find('#lon').val();412                mapProperties.mapDefinition.lookupfields = null;413            }414        }415        // mapProperties.mapDefinition.maptype = mapType;416        mapProperties.mapDefinition.geolookup = this.$el.find('#geo-lookup').is(':checked');417        mapProperties.mapDefinition.metric = this.$el.find('#select-metric').val();418        mapProperties.mapDefinition.search = {};419        mapProperties.mapDefinition.search.street = this.$el.find('#street-lookups').val();420        mapProperties.mapDefinition.search.city = this.$el.find('#city-lookups').val();421        mapProperties.mapDefinition.search.county = this.$el.find('#county-lookups').val();422        mapProperties.mapDefinition.search.state = this.$el.find('#state-lookups').val();423        mapProperties.mapDefinition.search.country = this.$el.find('#country-lookups').val();424        mapProperties.hasProcessed = false;425        search = mapProperties.mapDefinition.search;426        if ((search.street !== '' || search.city !== '' || search.county !== '' || search.state !== '' || search.country !== '') || 427            (mapProperties.mapDefinition.latfield !== null || mapProperties.mapDefinition.lonfield !== null)) {428            if (Settings.MAPS_TYPE === 'OSM') {429                saikuMapRenderer = new SaikuMapRenderer(this, mapType, mapProperties, 'run_workspace_map');430                saikuMapRenderer.renderMap();431            }432            // else if (Settings.MAPS_TYPE === 'GMAPS') {433            //     this.renderer.switch_chart(mapType, mapProperties);434            // }435            436            // TODO: Add icon loading of Saiku when OSM this processing "lat" and "lon"437            if (mapProperties.mapDefinition.latfield === null && mapProperties.mapDefinition.lonfield === null) {438                Saiku.ui.block('Loading map...');439            }440            // Set properties441            this.workspace.query.setProperty('saiku.ui.map.options', mapProperties);442            this.workspace.query.setProperty('saiku.ui.render.mode', 'map');443            this.workspace.query.setProperty('saiku.ui.render.type', mapType);444        }445        this.$el.dialog('close');446    }...

SaikuMapRenderer.js

Source:SaikuMapRenderer.js

1/* Copyright (C) OSBI Ltd - All Rights Reserved2 * Unauthorized copying of this file, via any medium is strictly prohibited3 * Proprietary and confidential4 * Written by Breno Polanski, 20155 */6/**7 * Class to render map8 *9 * @class SaikuMapRenderer10 * @chainable11 * @return {SaikuMapRenderer} The SaikuMapRenderer instance (for chaining)12 */13var SaikuMapRenderer = (function() {14	'use strict';15	/**16	 * That constructor enforces the use of new, even if you call the constructor like a function17	 *18	 * @constructor19	 * @private20	 * @param {Object} args Saiku data, map type (map_geo, map_heat or map_marker) and properties of map21	 */22	function SaikuMapRenderer(args) {23		// enforces new24		if (!(this instanceof SaikuMapRenderer)) {25			return new SaikuMapRenderer(args);26		}27		args = Array.prototype.slice.call(arguments);28		var saikuChartRenderer;29		var dataTree;30		var mapType;31		var mapProperties;32		var positions;33		this._idMap = _.uniqueId('map-');34		if (args[3] === 'run_workspace_map') {35	        // Initialize properties36	        _.extend(this, args[0]);37	        this._runWorkspaceMap = true;38	        if (args[0].data) {39				this._data = args[0].data.rawdata;40			}41			else {42				this._data = args[0].renderer.rawdata;43			}44			this._el = function() {45				return {46					//      v--------------  Not change for this.renderer.$el47					canvas: $(this.renderer.el).find('.canvas_wrapper')48				}49			};50			this._workspaceSize = function() {51				return {52			        width: this.workspace.$el.find('.workspace_results').width(),53			        height: this.workspace.$el.find('.workspace_results').height()54				}55			};56			saikuChartRenderer = new SaikuChartRenderer(null, {});57			dataTree = saikuChartRenderer.process_data_tree({ data: this._data }, true, true);58			mapType = args[1];59			mapProperties = args[2];60			positions = getPositionColumn(dataTree, mapType, mapProperties);61			this._data = processData(dataTree, mapType, positions);62			this._data.mapType = mapType;63			this._data.mapProperties = mapProperties;64			this.adjust();65			Saiku.session.bind('tab:select', this.adjustTrigger);66		}67		else {68	        // Initialize properties69	        _.extend(this, args[0]);70			this._data = args[0];71			this._options = args[1];72			73			this._el = function() {74				return {75					canvas: $(this._options.htmlObject)76				}77			};78			this._workspaceSize = function() {79				return {80			        width: (this._el().canvas.width() + 10),81			        height: (this._el().canvas.height() + 10)82				}83			};84			saikuChartRenderer = new SaikuChartRenderer(null, {});85			dataTree = saikuChartRenderer.process_data_tree({ data: this._data }, true, true);86			if (args && args[1] && _.has(args[1], 'mapDefinition')) {87				mapType = args[1].mapDefinition.mapDefinition.type;88				mapProperties = args[1].mapDefinition;89			}90			else {91				mapType = args[0].query.properties['saiku.ui.render.type'];92				mapProperties = args[0].query.properties['saiku.ui.map.options'];93			}94			positions = getPositionColumn(dataTree, mapType, mapProperties);95			this._data = processData(dataTree, mapType, positions);96			this._data.mapType = mapType;97			this._data.mapProperties = mapProperties;98		}99	}100	/**101	 * Get position of column102	 *103	 * @method getPositionColumn104	 * @private105	 * @param  {Object} data          Saiku data106	 * @param  {String} mapType       Map type (map_geo, map_heat or map_marker)107	 * @param  {Object} mapProperties Properties of map108	 * @return {Object}               Positions of column109	 */110	function getPositionColumn(data, mapType, mapProperties) {111		var metadata = data.metadata;112		var aux = 0;113		var i = 0;114		var positions = {};115		var fields;116		var lenFields;117		if (mapType === 'map_heat') {118			positions.fields = [];119			if (mapProperties.mapDefinition.latfield === null || mapProperties.mapDefinition.latfield === undefined) {120				fields = [];121				if (mapProperties.mapDefinition.search.street !== undefined && mapProperties.mapDefinition.search.street !== '') {122					fields.push({ 'name': 'street', 'val': mapProperties.mapDefinition.search.street });123				}124				if (mapProperties.mapDefinition.search.city !== undefined && mapProperties.mapDefinition.search.city !== '') {125					fields.push({ 'name': 'city', 'val': mapProperties.mapDefinition.search.city });126				}127				if (mapProperties.mapDefinition.search.county !== undefined && mapProperties.mapDefinition.search.county !== '') {128					fields.push({ 'name': 'county', 'val': mapProperties.mapDefinition.search.county });129				}130				if (mapProperties.mapDefinition.search.state !== undefined && mapProperties.mapDefinition.search.state !== '') {131					fields.push({ 'name': 'state', 'val': mapProperties.mapDefinition.search.state });132				}133				if (mapProperties.mapDefinition.search.country !== undefined && mapProperties.mapDefinition.search.country !== '') {134					fields.push({ 'name': 'country', 'val': mapProperties.mapDefinition.search.country });135				}136			}137			else {138				fields = [];139				fields.push({ 'name': 'lat', 'val': mapProperties.mapDefinition.latfield });140				fields.push({ 'name': 'lon', 'val': mapProperties.mapDefinition.lonfield });141			}142			mapProperties.lookupfields = fields;143			lenFields = fields ? fields.length : 0;144			while (aux < lenFields) {145				if (metadata[i] && (metadata[i].colName === fields[aux].val)) {146					positions.fields.push(metadata[i]);147					i = 0; 148					aux++;149				}150				else {151					i++;152				}153			}154		}155		else if (mapType === 'map_marker') {156			var lenMetadata = metadata ? metadata.length : 0;157			positions.fields = [];158			positions.metric = '';159			if (mapProperties.mapDefinition.latfield === null || mapProperties.mapDefinition.latfield === undefined) {160				fields = [];161				if (mapProperties.mapDefinition.search.street !== undefined && mapProperties.mapDefinition.search.street !== '') {162					fields.push({ 'name': 'street', 'val': mapProperties.mapDefinition.search.street });163				}164				if (mapProperties.mapDefinition.search.city !== undefined && mapProperties.mapDefinition.search.city !== '') {165					fields.push({ 'name': 'city', 'val': mapProperties.mapDefinition.search.city });166				}167				if (mapProperties.mapDefinition.search.county !== undefined && mapProperties.mapDefinition.search.county !== '') {168					fields.push({ 'name': 'county', 'val': mapProperties.mapDefinition.search.county });169				}170				if (mapProperties.mapDefinition.search.state !== undefined && mapProperties.mapDefinition.search.state !== '') {171					fields.push({ 'name': 'state', 'val': mapProperties.mapDefinition.search.state });172				}173				if (mapProperties.mapDefinition.search.country !== undefined && mapProperties.mapDefinition.search.country !== '') {174					fields.push({ 'name': 'country', 'val': mapProperties.mapDefinition.search.country });175				}176			}177			else {178				fields = [];179				fields.push({ 'name': 'lat', 'val': mapProperties.mapDefinition.latfield });180				fields.push({ 'name': 'lon', 'val': mapProperties.mapDefinition.lonfield });181			}182			mapProperties.lookupfields = fields;183			lenFields = fields ? fields.length : 0;184			185			while (aux < lenFields) {186				if (metadata[i] && (metadata[i].colName === fields[aux].val)) {187					positions.fields.push(metadata[i]);188					i = 0; 189					aux++;190				}191				else {192					i++;193				}194			}195			for (i = 0; i < lenMetadata; i++) {196				if (metadata[i].colName === mapProperties.mapDefinition.metric) {197					positions.metric = metadata[i];198				}199			}200		}201		202		return positions;203	}204	/**205	 * Method for organizing Saiku data206	 *207	 * @method processData208	 * @private209	 * @param  {Object} data      Saiku data210	 * @param  {String} mapType   Map type (map_geo, map_heat or map_marker)211	 * @param  {Object} positions Positions of column212	 * @return {Object}           Data for work in maps213	 */214	function processData(data, mapType, positions) {215		var newData = {216			names: [],217			groupNames: [],218			values: [],219			groupValues: []220		};221		var lenResultset = data.resultset ? data.resultset.length : 0;222		var lenFields = positions.fields ? positions.fields.length : 0;223		var nameRaw = '';224		var valuesRaw = [];225		var i, j;226		if (mapType === 'map_heat') {227			for (i = 0; i < lenResultset; i++) {228				if (positions.fields.length > 1) {229					for (j = 0; j < lenFields; j++) {230						if (_.isEmpty(nameRaw)) {231							nameRaw = data.resultset[i][positions.fields[j].colIndex];232						}233						else {234							nameRaw += ', ';235							nameRaw += data.resultset[i][positions.fields[j].colIndex];236						}237					}238					newData.names.push(nameRaw);239					nameRaw = '';240				}241				else {242					if (positions.fields) {243						newData.names.push(data.resultset[i][positions.fields[0].colIndex]);244						nameRaw = data.resultset[i][positions.fields[0].colIndex];245						if (data.resultset[i+1] && (nameRaw === data.resultset[i+1][positions.fields[0].colIndex])) {246						}247						else {248							newData.groupNames.push(nameRaw);249							nameRaw = '';250						}251					}252				}253			}254		}255		else if (mapType === 'map_marker') {256			for (i = 0; i < lenResultset; i++) {257				if (positions.fields.length > 1) {258					for (j = 0; j < lenFields; j++) {259						if (_.isEmpty(nameRaw)) {260							nameRaw = data.resultset[i][positions.fields[j].colIndex];261						}262						else {263							nameRaw += ', ';264							nameRaw += data.resultset[i][positions.fields[j].colIndex];265						}266					}267					newData.names.push(nameRaw);268					newData.values.push(data.resultset[i][positions.metric.colIndex].f);269					nameRaw = '';270				}271				else {272					if (positions.fields) {273						newData.names.push(data.resultset[i][positions.fields[0].colIndex]);274						newData.values.push(data.resultset[i][positions.metric.colIndex].f);275						nameRaw = data.resultset[i][positions.fields[0].colIndex];276						if (data.resultset[i+1] && (nameRaw === data.resultset[i+1][positions.fields[0].colIndex])) {277							valuesRaw.push(data.resultset[i][positions.metric.colIndex].f);278						}279						else {280							valuesRaw.push(data.resultset[i][positions.metric.colIndex].f);281							newData.groupNames.push(nameRaw);282							newData.groupValues.push(valuesRaw);283							nameRaw = '';284							valuesRaw = [];285						}286					}287				}288			}289		}290		291		return newData;292	}293	/**294	 * Construct search for Nominatim URL295	 *296	 * @example297	 * street=<housenumber> <streetname>298	 * city=<city>299	 * county=<county>300	 * state=<state>301	 * country=<country>302	 * http://nominatim.openstreetmap.org/search?<params>303	 *304	 * @method constructSearch305	 * @private306	 * @param  {Object} args Properties for construct search307	 * @return {String}      Params for URL308	 */309	function constructSearch(args) {310		var field = args.lookupfields;311		var name = args.name.split(', ');312		var len = field.length;313		var searchString = '';314		var i;315		for (i = 0; i < len; i++) {316			if (field[i].name === 'street') {317				searchString += 'street=' + name[i] + '&';318			}319			else if (field[i].name === 'city') {320				searchString += 'city=' + name[i] + '&';321			}322			else if (field[i].name === 'county') {323				searchString += 'county=' + name[i] + '&';324			}325			else if (field[i].name === 'state') {326				searchString += 'state=' + name[i] + '&';327			}328			else if (field[i].name === 'country') {329				searchString += 'country=' + name[i] + '&';330			}331		}332		return searchString;333	}334	/**335	 * Map start and get Lat and Lon336	 *337	 * @method mapStart338	 * @private339	 * @param  {Object} args Properties for render map340	 */341	function mapStart(args) {342		var addressPoints = [];343		var latlngs = [];344		var bounds = [];345		var locs;346		var params;347		if (args.mapType === 'map_heat') {348			if (args.lookupfields[0].name === 'lat') {349				locs = args.name.split(', ');350				latlngs.push(Number(locs[0]));351				latlngs.push(Number(locs[1]));352				addressPoints.push(latlngs);353				latlngs = [];354				args.map.bounds.push(addressPoints);355				// if ((args.i + 1) === args.len) {356					args.map.fitBounds(args.map.bounds);357				// }358				Saiku.leaflet.heatLayer(addressPoints, { minOpacity: 20, radius: 20 }).addTo(args.map);359			}360			else {361				Saiku.ui.block('Loading map...');362				params = constructSearch(args);363				$.getJSON(Settings.MAPS_OSM_NOMINATIM + 'search?' + params + '&format=json&polygon=1&addressdetails=1',364					function (data) {365						for (var j = 0, jLen = data.length; j < jLen; j++) {366							if (data[j] && data[j].lat && data[j].lon) {367								latlngs.push(Number(data[j].lat));368								latlngs.push(Number(data[j].lon));369								addressPoints.push(latlngs);370								args.map.bounds.push(addressPoints);371							}372							latlngs = [];373						}374						// if ((args.i + 1) === args.len) {375							args.map.fitBounds(args.map.bounds);376						// }377						Saiku.leaflet.heatLayer(addressPoints, { minOpacity: 20, radius: 20 }).addTo(args.map);378					})379                    .done(function() {380                        Saiku.ui.unblock();381                    })382                    .fail(function(jqxhr, textStatus, error) {383						var err = textStatus + ', ' + error;384						console.log('Request Failed: ' + err);385                    	Saiku.ui.unblock();386                    });387			}388		}389		else if (args.mapType === 'map_marker') {390			if (args.lookupfields[0].name === 'lat') {391				locs = args.name.split(', ');392				Saiku.leaflet.marker(new Saiku.leaflet.LatLng(locs[0], locs[1])).addTo(args.map)393					.bindPopup(394					//data[j].display_name + '<br>' +395					'<b>' + args.metric + ': </b>' + ((typeof args.value === 'object') ? args.value.join(', ') : args.value)396				);397				args.map.bounds.push([locs[0], locs[1]]);398				399				// if ((args.i + 1) === args.len) {400					args.map.fitBounds(args.map.bounds);401				// }402			}403			else {404				Saiku.ui.block('Loading map...');405				params = constructSearch(args);406				$.getJSON(Settings.MAPS_OSM_NOMINATIM + 'search?' + params + '&format=json&polygon=1&addressdetails=1',407					function (data) {408						for (var j = 0, jLen = data.length; j < jLen; j++) {409							if (data[j] && data[j].lat && data[j].lon) {410								Saiku.leaflet.marker([data[j].lat, data[j].lon]).addTo(args.map)411									.bindPopup(412									data[j].display_name + '<br>' +413									'<b>' + args.metric + ': </b>' + ((typeof args.value === 'object') ? args.value.join(', ') : args.value)414								);415								args.map.bounds.push([data[j].lat, data[j].lon]);416							}417						}418						// if ((args.i + 1) === args.len) {419							args.map.fitBounds(args.map.bounds);420						// }421					})422                    .done(function() {423                        Saiku.ui.unblock();424                    })425                    .fail(function(jqxhr, textStatus, error) {426						var err = textStatus + ', ' + error;427						console.log('Request Failed: ' + err);428                    	Saiku.ui.unblock();429                    });430			}431		}432	}433	/**434	 * Resize map in canvas435	 *436	 * @method resize437	 * @public438	 */439	SaikuMapRenderer.prototype.resize = function() {440		var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;441        if (fullscreenElement) {442			this._el().canvas.find('#' + this._idMap).width(this._workspaceSize().width);443			this._el().canvas.find('#' + this._idMap).height(this._workspaceSize().height);444        }445        else {446        	if (Settings.MODE === 'map') {447				this._el().canvas.find('#' + this._idMap).width(this._workspaceSize().width);448				this._el().canvas.find('#' + this._idMap).height(this._workspaceSize().height);449			}450			else {451				this._el().canvas.find('#' + this._idMap).width(this._workspaceSize().width - 10);452				this._el().canvas.find('#' + this._idMap).height(this._workspaceSize().height - 10);453			}454        }455	};456	/**457	 * Adjust map in canvas458	 *459	 * @method adjust460	 * @public461	 */462	SaikuMapRenderer.prototype.adjust = function() {463	    var self = this;464	    // var calculateLayout = function() {465   		// 	Saiku.mapLeaflet._onResize();466   		// 	Saiku.mapLeaflet.panTo(new Saiku.leaflet.LatLng(21.505, -0.09));467	    // };468	    // var lazyLayout = _.debounce(calculateLayout, 300);469	    $(window).resize(function() {470	        // self._el().canvas.fadeOut(150);471	        self.resize();472	        // lazyLayout();473	    });474	};475	/**476	 * Force the adjust map in canvas when click in tab477	 *478	 * @method adjustTrigger479	 * @public480	 */481	SaikuMapRenderer.prototype.adjustTrigger = function() {482        _.defer(function() {483        	$(window).trigger('resize');484        });485	};486	/**487	 * Render map488	 *489	 * @method renderMap490	 * @public491	 */492	SaikuMapRenderer.prototype.renderMap = function() {493		var len = this._data.names.length;494		var arrNames;495		var arrValues;496		var i;497		// Create element #map-xx in .canvas_wrapper DOM498		this._el().canvas.empty();499		this._el().canvas.append('<div class="map-render" id="' + this._idMap + '"></div>');500		this.resize();501		if (this._runWorkspaceMap) {502			// Show/hide buttons in query toolbar503			this.workspace.querytoolbar.$el.find('ul.chart > li').find('a').removeClass('on');504			this.workspace.querytoolbar.$el.find('ul.chart [href="#export_button"]').parent().attr('disabled', 'disabled');505			this.workspace.querytoolbar.$el.find('ul.chart > li#charteditor').attr('disabled', 'disabled');506			this.workspace.querytoolbar.$el.find('ul.chart [href="#map"]').addClass('on');507		}508		this._map = Saiku.leaflet.map(this._idMap).setView([21.505, -0.09], 2);509		this._map.bounds = [];510		if (this._data.mapType === 'map_heat') {511			Settings.MAPS_OPTIONS.OSM.subdomains = '1234';512		}513		else {514			delete Settings.MAPS_OPTIONS.OSM.subdomains;515		}516		// TODO: The user can add a API Google Maps or Map Box517		Saiku.leaflet.tileLayer(Settings.MAPS_TILE_LAYER.OSM[this._data.mapType], Settings.MAPS_OPTIONS.OSM).addTo(this._map);518		this._el().canvas.find('#' + this._idMap).find('.leaflet-top').css('zIndex', '100');519		if (this._data.names.length === this._data.groupNames.length) {520			arrNames = this._data.names;521			arrValues = this._data.values;522		}523		else {524			if (this._data.groupNames.length > 0) {525				arrNames = this._data.groupNames;526				arrValues = this._data.groupValues;527			}528			else {529				arrNames = this._data.names;530				arrValues = this._data.values;		531			}532		}533		534		for (i = 0; i < len; i++) {535			mapStart({536				i: i,537				len: len, 538				map: this._map, 539				mapType: this._data.mapType,540				name: arrNames[i], 541				value: arrValues[i], 542				metric: this._data.mapProperties.mapDefinition.metric,543				search: this._data.mapProperties.mapDefinition.search,544				lookupfields: this._data.mapProperties.lookupfields545			});546		}547	};548	return SaikuMapRenderer;...

Maps.js

Source:Maps.js

1ï»¿(function(window, $, google) {2  "use strict";34  window.MapModule = window.MapModule || {};5  window.MapModule.markerClusters = [];67  $(window.document)8    .ready(function() {9      var isPageEditor = $("body.pagemode-edit");10      if (isPageEditor.length)11        return;12      loadMapJsScript();13    });1415  window.MapModule.initMaps = function() {16    initMapContainers();17  };18  window.MapModule.zoomToMapPoint = function(mapId, latitude, longitude) {19    var map = window.MapModule.getMap(mapId);20    if (map) {21      map.zoomToMapPoint(new google.maps.LatLng(latitude, longitude), 16);22    }23  };24  window.MapModule.getMap = function(mapId) {25    var mapFound;26    $.each(window.MapModule.markerClusters,27      function(index, markerCluster) {28        if (markerCluster.map.Id == mapId) {29          mapFound = markerCluster.map;30          return false;31        }32      });3334    return mapFound;35  };3637  function loadMapJsScript() {38    var scriptTag = $('script[data-key="gmapapi"]');39    if (scriptTag.length == 0) {40      var fileref = window.document.createElement("script");41      fileref.setAttribute("type", "text/javascript");42      fileref.setAttribute("src", "https://maps.googleapis.com/maps/api/js?callback=MapModule.initMaps");43      fileref.setAttribute("async", "");44      fileref.setAttribute("defer", "");45      fileref.setAttribute("data-key", "gmapapi");4647      window.document.getElementsByTagName("head")[0].appendChild(fileref);48    }49  }5051  function initMapContainers() {52    setMapPrototypes();53    var $elements = $(".map-canvas");54    $.each($elements,55      function(index, element) {56        var $element = $(element);57        var mapProperties = {58          center: { lat: -5.055576, lng: 3.803790 },59          zoom: 0,60          mapTypeId: google.maps.MapTypeId.ROADMAP,61          zoomControl: true,62          mapTypeControl: true,63          scaleControl: true,64          streetViewControl: true,65          rotateControl: true,66          centerMapControl: true67        };68        var $renderingParamsEl = $element.siblings('input[id="mapRenderingParameters"]');69        var renderingParams = {};70        if ($renderingParamsEl) {71          renderingParams = eval("(" + $renderingParamsEl.val() + ")");72          setMapProperties(mapProperties, renderingParams);73        }7475        var map = new google.maps.Map(element, mapProperties);76        //assign unique id to map instance77        map.Id = Date.now();78        map.setCustomProperties(renderingParams);79        //render custom controls if any80        map.renderCustomControls();81        map.setDefaultView(mapProperties.center, mapProperties.zoom);82        map.set("styles",83        [84          { "featureType": "water", "elementType": "geometry.fill", "stylers": [{ "color": "#d3d3d3" }] },85          { "featureType": "transit", "stylers": [{ "color": "#808080" }, { "visibility": "off" }] },86          {87            "featureType": "road.highway",88            "elementType": "geometry.stroke",89            "stylers": [{ "visibility": "on" }, { "color": "#b3b3b3" }]90          }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "color": "#ffffff" }] },91          {92            "featureType": "road.local",93            "elementType": "geometry.fill",94            "stylers": [{ "visibility": "on" }, { "color": "#ffffff" }, { "weight": 1.8 }]95          }, { "featureType": "road.local", "elementType": "geometry.stroke", "stylers": [{ "color": "#d7d7d7" }] },96          {97            "featureType": "poi",98            "elementType": "geometry.fill",99            "stylers": [{ "visibility": "on" }, { "color": "#ebebeb" }]100          }, { "featureType": "administrative", "elementType": "geometry", "stylers": [{ "color": "#a7a7a7" }] },101          { "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{ "color": "#ffffff" }] },102          { "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{ "color": "#ffffff" }] },103          {104            "featureType": "landscape",105            "elementType": "geometry.fill",106            "stylers": [{ "visibility": "on" }, { "color": "#efefef" }]107          }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#696969" }] },108          {109            "featureType": "administrative",110            "elementType": "labels.text.fill",111            "stylers": [{ "visibility": "on" }, { "color": "#737373" }]112          }, { "featureType": "poi", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] },113          { "featureType": "poi", "elementType": "labels", "stylers": [{ "visibility": "off" }] },114          { "featureType": "road.arterial", "elementType": "geometry.stroke", "stylers": [{ "color": "#d6d6d6" }] },115          { "featureType": "road", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, {},116          { "featureType": "poi", "elementType": "geometry.fill", "stylers": [{ "color": "#dadada" }] }117        ]);118119        var mapDataSourceItemId = $element.siblings('input[id="mapContextItem"]').val();120        if (mapDataSourceItemId) {121          getMapPoints(map,122            mapDataSourceItemId,123            function(markers) {124              var markerCluster = new MarkerClusterer(map, markers);125              window.MapModule.markerClusters.push(markerCluster);126            });127        }128      });129  }130131  function setMapPrototypes() {132    google.maps.Map.prototype.zoomToMapPoint = function(latlng, zoom) {133      this.setCenter(latlng);134      this.setZoom(zoom);135    };136    google.maps.Map.prototype.setDefaultView = function(latlng, zoom) {137      this.defaultCenter = latlng;138      this.defaultZoom = zoom;139    };140    google.maps.Map.prototype.resetToDefaultView = function(scope) {141      var $this = scope || this;142      $this.zoomToMapPoint($this.defaultCenter, $this.defaultZoom);143    };144    google.maps.Map.prototype.renderCustomControls = function() {145      // setCustomProperties() has to be called beforehand146      if (this.centerMapControl) {147        var centerMapControl = new CenterMapControl(this.resetToDefaultView, this);148        this.controls[google.maps.ControlPosition.TOP_CENTER].push(centerMapControl);149      }150    };151    google.maps.Map.prototype.setCustomProperties = function(properties) {152      this.centerMapControl = properties.EnableCenterMapControl;153    };154  }155156  function setMapProperties(mapProperties, renderingParams) {157    if (renderingParams) {158      if (renderingParams.CenterLocation) {159        mapProperties.center = parseCoordinate(renderingParams.CenterLocation);160      }161      if (renderingParams.ZoomLevel) {162        var zoomLevel = parseInt(renderingParams.ZoomLevel);163        if (zoomLevel < 1)164          zoomLevel = 1;165        if (zoomLevel > 21)166          zoomLevel = 21;167        mapProperties.zoom = zoomLevel;168      }169      mapProperties.zoomControl = getCheckboxBooleanValue(renderingParams.EnableZoomControl);170      mapProperties.mapTypeControl = getCheckboxBooleanValue(renderingParams.EnableMapTypeControl);171      mapProperties.scaleControl = getCheckboxBooleanValue(renderingParams.EnableScaleControl);172      mapProperties.streetViewControl = getCheckboxBooleanValue(renderingParams.EnableStreetViewControl);173      mapProperties.rotateControl = getCheckboxBooleanValue(renderingParams.EnableRotateControl);174      mapProperties.MapTypeId = renderingParams.MapType;175    }176177    return renderingParams;178  }179180  function getCheckboxBooleanValue(value) {181    return value == "1" ? true : false;182  }183184  function getMapPoints(map, mapDataSourceItemId, callback) {185    if (!map || !mapDataSourceItemId) {186      return;187    }188189    $.ajax(190    {191      url: "/api/sitecore/Maps/GetMapPoints",192      method: "POST",193      data: {194        itemId: mapDataSourceItemId195      },196      success: function(data) {197        if (data.length == 1) {198          var marker = getMarker(map, data[0]);199          callback([marker]);200          map.setCenter(parseCoordinate(data[0].Location));201        } else {202          var markers = [];203          $.each(data,204            function(index, mapPoint) {205              var marker = getMarker(map, mapPoint);206              markers.push(marker);207            });208          callback(markers);209        }210      }211    });212213    function getMarker(map, mapPoint) {214      var latlng = parseCoordinate(mapPoint.Location);215      if (latlng) {216        var marker = new google.maps.Marker({217          position: latlng,218          title: mapPoint.Name,219          icon: "http://maps.google.com/mapfiles/kml/pal4/icon56.png"220        });221222        var contentString =223          "<div class='text-primary'>" +224          "<h2>" + mapPoint.Name + "</h2>" +225          "<p>" + mapPoint.Address + "</p>" +226          "<a href='javascript:void(0)' onclick='MapModule.zoomToMapPoint(" + map.Id + "," + latlng.lat() + "," + latlng.lng() + ")'><span class='glyphicon glyphicon-zoom-in'/></a>"227          + "</div>";228229        google.maps.event.addListener(marker,230          "click",231          function() {232            var infoWindow = new google.maps.InfoWindow({233              content: contentString234            });235            infoWindow.open(map, marker);236          });237238        return marker;239      }240    }241  }242243  function parseCoordinate(latlngLiteral) {244    if (latlngLiteral && latlngLiteral.split(",").length === 2) {245      var coordinates = latlngLiteral.split(",");246      var latitude = parseFloat(coordinates[0]);247      var longitude = parseFloat(coordinates[1]);248249      return new google.maps.LatLng(latitude, longitude);250    }251252    return null;253  }254255  /*map custom controls*/256  function CenterMapControl(clickHandler, scope) {257    var $this = scope;258    var controlDiv = document.createElement("div");259    controlDiv.style.margin = "10px";260261    // Set CSS for the control border.262    var controlUI = document.createElement("div");263    controlUI.style.backgroundColor = "#fff";264    controlUI.style.border = "2px solid #fff";265    controlUI.style.borderRadius = "3px";266    controlUI.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";267    controlUI.style.cursor = "pointer";268    controlUI.style.marginBottom = "22px";269    controlUI.style.textAlign = "center";270    controlUI.title = "Click to recenter the map";271    controlDiv.appendChild(controlUI);272    controlDiv.index = 1;273274    // Set CSS for the control interior.275    var controlText = document.createElement("div");276    controlText.style.color = "rgb(25,25,25)";277    controlText.style.fontFamily = "Roboto,Arial,sans-serif";278    controlText.style.fontSize = "11px";279    controlText.style.lineHeight = "28px";280    controlText.style.paddingLeft = "5px";281    controlText.style.paddingRight = "5px";282    controlText.innerHTML = "Center Map";283    controlUI.appendChild(controlText);284285    // Setup the click event listeners: 286    controlUI.addEventListener("click",287      function() {288        clickHandler($this);289      });290291    return controlDiv;292  }
...

helpForm.js

Source:helpForm.js

1import React from 'react';2import './helpForm.css'3import { IconContext } from "react-icons"4import { withRouter } from 'react-router-dom';5import { FaMapMarker, FaMap } from 'react-icons/fa';6import firebase from 'firebase'7import sendIcon from "../../assets/images/send.png";8import mapboxgl from 'mapbox-gl';9mapboxgl.accessToken = 'pk.eyJ1IjoibXRyZWpvMTIiLCJhIjoiY2tiNHF4MjFxMHptbTMxcGFibjBlOHR1dyJ9.1YojeT0HnQljEyMcm-_D6Q';10const initState = {11    information: {12        who: '',13        state: '',14        address: '',15        name: '',16        contact: '',17        peopleNumber: '',18        kids: '',19        adults: '',20        elder: '',21    }22}23class HelpFormComponent extends React.Component {24    constructor(props) {25        super(props)26        this.state = {27            ...initState,28            sentData: false,29            mapProperties: {30                lng: -89.224433,31                lat: 13.701284,32                zoom: 1233            },34            loading: true,35        }36    }37    changeHandler = (value) => {38        this.setState({ information: { ...this.state.information, [value.target.name]: value.target.value } })39    }40    checkEmpty = (event) => {41        event.preventDefault()42        const { who, state, address, name, contact } = this.state.information43        if (who === '' || state === '' || address === '' || name === '' || contact === '') {44            alert('Debes llenar todos los campos requeridos')45        } else {46            this.saveInfo()47        }48    }49    saveInfo = async () => {50        await firebase.firestore().collection('helpRequests').add({ ...this.state.information, coordinates: { lat: this.state.mapProperties.lat, lng: this.state.mapProperties.lng } })51        this.setState({ ...initState, sentData: true })52    }53    async  componentDidMount() {54        if ("geolocation" in navigator) {55            console.log("Available");56            await navigator.geolocation.getCurrentPosition((position) => {57                console.log("Latitude is :", position.coords.latitude);58                console.log("Longitude is :", position.coords.longitude);59                this.setState({ mapProperties: { lat: position.coords.latitude, lng: position.coords.longitude, zoom: 12 }, loading: false, })60                const map = new mapboxgl.Map({61                    container: this.mapContainer,62                    style: 'mapbox://styles/mapbox/streets-v11',63                    center: [this.state.mapProperties.lng, this.state.mapProperties.lat],64                    zoom: this.state.mapProperties.zoom,65                });66                const marker = new mapboxgl.Marker()67                    .setLngLat([this.state.mapProperties.lng, this.state.mapProperties.lat])68                    .addTo(map);69                map.on('click', (e) => {70                    this.setState({ mapProperties: { ...this.state.mapProperties, lng: e.lngLat.lng, lat: e.lngLat.lat } })71                    marker.setLngLat([this.state.mapProperties.lng, this.state.mapProperties.lat])72                        .addTo(map);73                });74            }, error => {75                const map = new mapboxgl.Map({76                    container: this.mapContainer,77                    style: 'mapbox://styles/mapbox/streets-v11',78                    center: [this.state.mapProperties.lng, this.state.mapProperties.lat],79                    zoom: this.state.mapProperties.zoom,80                });81                const marker = new mapboxgl.Marker()82                    .setLngLat([this.state.mapProperties.lng, this.state.mapProperties.lat])83                    .addTo(map);84                map.on('click', (e) => {85                    this.setState({ mapProperties: { ...this.state.mapProperties, lng: e.lngLat.lng, lat: e.lngLat.lat } })86                    marker.setLngLat([this.state.mapProperties.lng, this.state.mapProperties.lat])87                        .addTo(map);88                });89            });90        } else {91            console.log("Not Available");92        }93    }94    render() {95        return (96            <div className="container-fluid">97                <div className="row justify-content-center row-search-form">98                    <div className="col-10 col-md-6 search-component form-container">99                        <h3 className="h3-txt">Solicitud de ayuda</h3>100                        <form className='d-flex flex-column ' onSubmit={this.checkEmpty}>101                            <label>Â¿QuiÃ©n necesita la ayuda?</label>102                            <input type='text' required name='who' value={this.state.information.who} onChange={this.changeHandler} className='col-12 col-md-6 ' />103                            <div className='d-flex flex-column flex-md-row justify-content-between align-items-center  w-100'>104                                <div className='d-flex flex-column col-12 col-md-6 p-0'>105                                    <label>Departamento // Municipio</label>106                                    <input type='text' required name='state' value={this.state.information.state} onChange={this.changeHandler} />107                                </div>108                                <div className='col-12 col-md-5 p-0 btn-dde'>109                                    <button type="button" className="btn btn-primary d-flex align-items-center w-100 justify-content-center" data-toggle="modal" data-target="#exampleModalCenter" style={{ backgroundColor: '#263C4F' }}>110                                        Dinos dÃ³nde estÃ¡s111                                    <IconContext.Provider value={{ color: "#FFFFFF", className: "global-class-name ml-2" }}>112                                            <div>113                                                <FaMap style={{ marginTop: '-5px' }} />114                                            </div>115                                        </IconContext.Provider>116                                    </button>117                                </div>118                            </div>119                            <label>DirecciÃ³n</label>120                            <input type='text' required name='address' value={this.state.information.address} onChange={this.changeHandler} className='col-12 col-md-6 ' />121                            <div className='d-flex flex-column flex-md-row justify-content-between  w-100'>122                                <div className=' col-12 col-md-6 p-0'>123                                    <label>Nombre representante</label>124                                    <input type='text' required name='name' value={this.state.information.name} onChange={this.changeHandler} className='w-100' />125                                </div>126                                <div className='col-12 col-md-5 p-0'>127                                    <label>Contacto</label>128                                    <input type='text' required name='contact' value={this.state.information.contact} onChange={this.changeHandler} className='w-100' />129                                </div>130                            </div>131                            <label>Cantidad de personas</label>132                            <input type='number ' name='peopleNumber' value={this.state.information.peopleNumber} onChange={this.changeHandler} className='col-12 col-md-6 ' />133                            <div className='d-flex flex-column flex-md-row justify-content-between mt-4'>134                                <div className='col-12 col-md-3 p-0'>135                                    <label >No. NiÃ±os</label>136                                    <input type='number' min='0' name='kids' value={this.state.information.kids} onChange={this.changeHandler} className='w-100'/>137                                </div>138                                <div className='col-12 col-md-3 p-0'>139                                    <label>No.Adultos</label>140                                    <input type='number' min='0' name='adults' value={this.state.information.adults} onChange={this.changeHandler} className='w-100'/>141                                </div>142                                <div className='col-12 col-md-3 p-0'>143                                    <label >No. Adultos Mayores</label>144                                    <input type='number' min='0' name='elder' value={this.state.information.elder} onChange={this.changeHandler} className='w-100' />145                                </div>                            146                            </div>147                            <div className={this.state.sentData ? 'd-flex w-100 justify-content-between mt-4 mt-md-5 ' : 'd-flex w-100 justify-content-end mt-4 mt-md-5'}>148                                {this.state.sentData ?149                                    <span style={{ color: '#FF5A4D', alignSelf: 'center', fontWeight: 'bold' }}> Gracias por registrar tu solicitud.</span>150                                    : null151                                }152                                <button className='d-flex justify-content-center align-items-center btn pr-3' style={{ width: '60px', height: '60px', borderRadius: '50px', backgroundColor: '#263C4F' }} >153                                    <img src={sendIcon} style={{ width: '30px', height: '30px' }} />154                                </button>155                            </div>156                        </form>157                    </div>158                </div>159                <div className="modal fade" id="exampleModalCenter" tabIndex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">160                    <div className="modal-dialog modal-dialog-centered" role="document">161                        <div className="modal-content">162                            <div className="modal-header">163                                <h5 className="modal-title" id="exampleModalLongTitle">Selecciona tu ubicaciÃ³n</h5>164                                <button type="button" className="close" data-dismiss="modal" aria-label="Close">165                                    <span aria-hidden="true">&times;</span>166                                </button>167                            </div>168                            <div className="modal-body d-flex justify-content-center align-items-center">169                                <div ref={el => this.mapContainer = el} className='mapContainer' />170                            </div>171                            <div className="modal-footer">172                                <button type="button" className="btn btn-secondary d-flex align-items-center justify-content-center" data-dismiss="modal" style={{ backgroundColor: '#263C4F' }}>Guardar</button>173                            </div>174                        </div>175                    </div>176                </div>177            </div >178        )179    }180}...

classMapProperties.js

Source:classMapProperties.js

1/*2|------------------------------------------------------------------------------3| Class Map Properties4|------------------------------------------------------------------------------5|6| This class contains all map properties from configMap.json.7|8| @author Pev9| @verion 1.1.510|11|------------------------------------------------------------------------------12| The MIT License (MIT)13| 14| Copyright (c) 2015 FrantiÅ¡ek KolovskÃ½, Pierre Vrot15| 16| Permission is hereby granted, free of charge, to any person obtaining17| a copy of this software and associated documentation files (the "Software"),18| to deal in the Software without restriction, including without limitation19| the rights to use, copy, modify, merge, publish, distribute, sublicense,20| and/or sell copies of the Software, and to permit persons to whom the 21| Software is furnished to do so, subject to the following conditions:22| 23| The above copyright notice and this permission notice shall be included in 24| all copies or substantial portions of the Software.25| 26| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 27| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 28| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL29| THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 30| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 31| FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS32| IN THE SOFTWARE.33|34|------------------------------------------------------------------------------35*/36// ============================================================================37// CONSTRUCTOR38// ============================================================================39/**40 * [Creates an instance of MapProperties]41 * @constructor42 * @this {MapProperties}43 * @param {String} name     [The name of the map]44 * @param {String} filePath [Path or URL to JSON config file]45 */46function MapProperties (name, filePath) {47  // Read configuration file from JSON48  var mapParameters = getMapConfig(filePath);49  /**50   * [The name of the map]51   * @type {String}52   * @private53   */54  this.name = name;55  /**56   * [The default map center coordinates lat/long]57   * @type {array}58   * @private59   */60  this.center = mapParameters.center;61  /**62   * [The default zoom level]63   * @type {Number}64   * @private65   */66  this.zoom = mapParameters.zoom;67  /**68   * [The default map projection]69   * @type {String}70   * @private71   */72  this.projection = mapParameters.projection;73  /**74   * [Token for getting MapBox tiles]75   * @type {String}76   * @private77   */78  this.mapboxToken = mapParameters.mapbox_token;79  /**80   * [The sidebar position (left or right)]81   * @type {String}82   * @private83   */84  this.sidebarPos = mapParameters.sidebar_pos;85  /**86   * [Number of feature loaded by layer query]87   * @type {Number}88   * @private89   */90  this.maxFeatures = mapParameters.maxFeatures;91}92// ============================================================================93// GETTERS94// ============================================================================95/**96 * [Get Map's name]97 * @this {MapProperties}98 * @return {String} [The map's name]99 */100MapProperties.prototype.getName = function () {101  return this.name;102};103// ----------------------------------------------------------------------------104/**105 * [Get Map's default center]106 * @this {MapProperties}107 * @return {array} [The default map's center coordinates]108 */109MapProperties.prototype.getCenter = function () {110  return [this.center[0], this.center[1]];111};112// ----------------------------------------------------------------------------113/**114 * [Get Map's default zoom level]115 * @this {MapProperties}116 * @return {Number} [The default map's zoom level]117 */118MapProperties.prototype.getZoom = function () {119  return this.zoom;120};121// ----------------------------------------------------------------------------122/**123 * [Get Map's default projection]124 * @this {MapProperties}125 * @return {String} [The default map's projection]126 */127MapProperties.prototype.getProjection = function () {128  return this.projection;129};130// ----------------------------------------------------------------------------131/**132 * [Get Mapbox token]133 * @this {MapProperties}134 * @return {String} [The MapBox token]135 */136MapProperties.prototype.getMapboxToken = function () {137  return this.mapboxToken;138};139// ----------------------------------------------------------------------------140/**141 * [Get Map's default sidebar position]142 * @this {MapProperties}143 * @return {String} [The sidebar position (left/right)]144 */145MapProperties.prototype.getSidebarPos = function () {146  return this.sidebarPos;147};148// ----------------------------------------------------------------------------149/**150 * [Get Map's default maxFeatures]151 * @this {MapProperties}152 * @return {Number} [The max features per query]153 */154MapProperties.prototype.getMaxFeatures = function () {155  return this.maxFeatures;156};157// ============================================================================158// METHODS159// ============================================================================160/**161 * [String representation of MapProperties]162 * @overide163 * @this{MapProperties}164 * @return {String} [Human-readable representation of this165 * MapProperties]166 */167MapProperties.prototype.toString = function() {168  var attributesToLog = [{169    name: this.name, 170    center: [this.center[0], this.center[1]],171    zoom: this.zoom,172    projection: this.projection,173    mapboxToken:  this.mapboxToken,174    sidebarPos: this.sidebarPos,175    maxFeatures: this.maxFeatures176  }];177  return JSON.stringify(attributesToLog);178};179// ============================================================================180// FUNCTIONS181// ============================================================================182/**183 * [Get Map Configurations from JSON file]184 * @param  {String} filePath [Path to the json file (or url)]185 * @return {json}          [Map configuration : JSON content]186 */187function getMapConfig (filePath) {188  // Returned value189  var mapConfig;190  // Get JSON191  $.ajax({192    type: 'GET',193    url: filePath,194    contentType: 'application/json; charset=utf-8',195    dataType: 'json',196    success: function(data){197      mapConfig = data;198    },199    error: function(jqXHR, exception){200      if (jqXHR.status === 401) {201        console.log('HTTP Error 401 Unauthorized.');202      } else {203        console.log('Uncaught Error.\n' + jqXHR.responseText);204      }205    },206    async: false207  });208  return mapConfig;...

MapProperties.js

Source:MapProperties.js

1/**2 * Copyright (c) 2008-2012 The Open Planning Project3 * 4 * Published under the GPL license.5 * See https://github.com/opengeo/gxp/raw/master/license.txt for the full text6 * of the license.7 */8/**9 * @requires plugins/Tool.js10 * @requires widgets/form/ColorField.js11 */12/** api: (define)13 *  module = gxp.plugins14 *  class = MapProperties15 */16/** api: (extends)17 *  plugins/Tool.js18 */19Ext.namespace("gxp.plugins");20/** api: constructor21 *  .. class:: MapProperties(config)22 *23 *    Plugin for showing the properties of the map.24 */25gxp.plugins.MapProperties = Ext.extend(gxp.plugins.Tool, {26    /** api: ptype = gxp_mapproperties */27    ptype: "gxp_mapproperties",28    /** api: config[colorManager]29     *  ``Function``30     *  Optional color manager constructor to be used as a plugin for the color31     *  field.32     */33    colorManager: null,34    /** api: config[menuText]35     *  ``String``36     *  Text for map properties menu item (i18n).37     */38    menuText: "Map Properties",39    /** api: config[toolTip]40     *  ``String``41     *  Text for map properties action tooltip (i18n).42     */43    toolTip: "Map Properties",44    /* i18n */45    wrapDateLineText: "Wrap dateline",46    numberOfZoomLevelsText: "Number of zoom levels",47    colorText: "Background color",48    addActions: function() {49        var baseLayer = this.target.mapPanel.map.baseLayer;50        var container = Ext.get(this.target.mapPanel.map.getViewport());51        if (this.initialConfig.backgroundColor) {52            container.setStyle('background-color', this.initialConfig.backgroundColor);53        }54        if (this.initialConfig.numZoomLevels) {55            baseLayer.addOptions({numZoomLevels: this.initialConfig.numZoomLevels});56            this.target.mapPanel.map.events.triggerEvent('changebaselayer', {layer: baseLayer});57        }58        if (this.initialConfig.wrapDateLine) {59            baseLayer.wrapDateLine = this.initialConfig.wrapDateLine;60        }61        return gxp.plugins.MapProperties.superclass.addActions.apply(this, [{62            menuText: this.menuText,63            iconCls: "gxp-icon-mapproperties",64            tooltip: this.toolTip,65            handler: function() {66                this.removeOutput();67                this.addOutput();68            },69            scope: this70        }]);71    },72    addOutput: function() {73        var colorFieldPlugins;74        if (this.colorManager) {75            colorFieldPlugins = [new this.colorManager()];76        }77        var baseLayer = this.target.mapPanel.map.baseLayer;78        var container = Ext.get(this.target.mapPanel.map.getViewport());79        return gxp.plugins.MapProperties.superclass.addOutput.call(this, {80            xtype: 'form',81            border: false,82            bodyStyle: "padding: 10px",83            items: [{84                xtype: 'numberfield',85                allowNegative: false,86                allowDecimals: false,87                fieldLabel: this.numberOfZoomLevelsText,88                minValue: 1,89                value: baseLayer.numZoomLevels,90                listeners: {91                    "change": function(fld, value) {92                        baseLayer.addOptions({numZoomLevels: value});93                        this.target.mapPanel.map.events.triggerEvent('changebaselayer', {layer: baseLayer});94                    },95                    scope: this96                }97            }, {98                xtype: 'checkbox',99                fieldLabel: this.wrapDateLineText,100                checked: baseLayer.wrapDateLine,101                listeners: {102                    "check": function(cb, value) {103                        baseLayer.wrapDateLine = value;104                    },105                    scope: this106                }107            }, {108                xtype: "gxp_colorfield",109                fieldLabel: this.colorText,110                value: container.getColor('background-color'),111                plugins: colorFieldPlugins,112                listeners: {113                    valid: function(field) {114                        container.setStyle('background-color', field.getValue());115                    },116                    scope: this117                }118            }]119        });120    },121    /** api: method[getState]122     *  :return {Object}123     *  Gets the configured tool state.124     */125    getState: function(){126        var baseLayer = this.target.mapPanel.map.baseLayer;127        var container = Ext.get(this.target.mapPanel.map.getViewport());128        return {129            ptype: this.ptype,130            backgroundColor : container.getColor('background-color'),131            numZoomLevels : baseLayer.numZoomLevels,132            wrapDateLine : baseLayer.wrapDateLine133        };134    }135});...

Map.js

Source:Map.js

1/**2 * Created by Guillaume on 26/02/2016.3 */4Map = function (mapName) {5    this.mapName = mapName;6    this.towerList = [];7    this.currentLoad = 0;8};9Map.prototype.load = function (callback) {10    var xhr =  (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");11    xhr.open("GET", 'map/' + this.mapName + '/map.json', false);12    xhr.send(null);13    if(xhr.readyState != 4 || (xhr.status != 200 && xhr.status != 0)){14        this.isLoaded = false;15        throw new Error("Impossible de charger le fichier  \"" + this.mapName + " (code HTTP : " + xhr.status + ").");16    } // Code == 0 en local17    this.mapProperties = JSON.parse(xhr.responseText);18    console.log(this.mapProperties);19    console.log(this.mapProperties.files);20    this.mapPropertiesKeys = Object.keys(this.mapProperties.files);21    this.getFiles(callback);22    console.log(this.mapProperties.files);23};24Map.prototype.getFiles = function (readyCallback) {25    var that = this;26    var callback = readyCallback;27    console.log(this.currentLoad);28    if (this.mapPropertiesKeys.length != this.currentLoad)29    {30        this.loadFile(this.mapProperties.files[this.mapPropertiesKeys[this.currentLoad]], this.currentLoad ,function() {31            that.getFiles(callback);32        });33        this.currentLoad++;34    }35    else36    {37        console.log(this.mapProperties);38        callback();39    }40};41Map.prototype.loadFile = function(url, currentload , onloadCallback)42{43    console.log("load :"+currentload);44    var that = this;45    var image = new Image();46    image.onload = function() {47        that.mapProperties.files[that.mapPropertiesKeys[currentload]] = image;48        onloadCallback();49    };50    image.src = "map/"+this.mapName+"/"+url;...

googlemaps.js

Source:googlemaps.js

1/**2 * GoogleMaps3 * @package Garp4 * @TODO: refactor to use Garp class like structure 5 * 6 */7/**8 * Google Maps9 */10Garp.buildGoogleMap = function(elm, config){11	var map = new google.maps.Map(elm, {12		mapTypeId: google.maps.MapTypeId[config.maptype.toUpperCase()],13		navigationControl: true,14		navigationControlOptions: {15			style: google.maps.NavigationControlStyle.SMALL16		},17		mapTypeControlOptions: {18			mapTypeIds: ['']19		},20		scaleControl: true,21		center: new google.maps.LatLng(parseFloat(config.center.lat), parseFloat(config.center.lng)),22		zoom: parseInt(config.zoom, 10)23	});24	25	if(config.markers){26		for(var i in config.markers){27			var marker = config.markers[i];28			29			var gMarker = new google.maps.Marker({30				map: map,31				title: marker.title,32				position: new google.maps.LatLng(parseFloat(marker.lat), parseFloat(marker.lng))33			});34			35		}		36	}37};38$(function(){39	$('.g-googlemap').each(function(){40		if ($(this).parent('a').length) {41			$(this).unwrap();42		}43		44		var mapProperties = Garp.parseQueryString($(this).attr('src'));45		var center = mapProperties.center.split(',');46		Garp.apply(mapProperties,{47			width: $(this).attr('width'),48			height: $(this).attr('height'),49			center: {50				lat: center[0],51				lng: center[1]52			},53			markers: mapProperties.markers ? mapProperties.markers.split('|') : false54		});55		for (var i in mapProperties.markers){56			var m = mapProperties.markers[i].split(',');57			mapProperties.markers[i] = {58				lat: m[0],59				lng: m[1],60				title: m[2] ? m[2] : ''61			};62		}63		64		$(this).wrap('<div class="g-googlemap-wrap"></div>');65		var wrap = $(this).parent('.g-googlemap-wrap').width(mapProperties.width).height(mapProperties.height);66		Garp.buildGoogleMap(wrap[0], mapProperties);	67	});...

Using AI Code Generation

1import { mapProperties } from 'testcafe';2import { Selector } from 'testcafe';3import { ClientFunction } from 'testcafe';4const getLocation = ClientFunction(() => document.location.href);5test('My first test', async t => {6        .typeText('#developer-name', 'John Smith')7        .click('#macos')8        .click('#submit-button');9        const url = await getLocation();10        console.log(url);11        await t.expect(url).contains('thank-you');12});13test('My second test', async t => {14        .typeText('#developer-name', 'John Smith')15        .click('#macos')16        .click('#submit-button');17        const url = await getLocation();18        console.log(url);19        await t.expect(url).contains('thank-you');20});21test('My third test', async t => {22        .typeText('#developer-name', 'John Smith')23        .click('#macos')24        .click('#submit-button');25        const url = await getLocation();26        console.log(url);27        await t.expect(url).contains('thank-you');28});29test('My fourth test', async t => {30        .typeText('#developer-name', 'John Smith')31        .click('#macos')32        .click('#submit-button');33        const url = await getLocation();34        console.log(url);35        await t.expect(url).contains('thank-you');36});37test('My fifth test', async t => {38        .typeText('#developer-name', 'John Smith')39        .click('#macos')40        .click('#submit-button');41        const url = await getLocation();42        console.log(url);43        await t.expect(url).contains('thank-you');44});45test('My sixth test', async t => {46        .typeText('#developer-name', 'John Smith')47        .click('#macos')48        .click('#submit-button');49        const url = await getLocation();50        console.log(url);51        await t.expect(url).contains('thank-you');52});53test('My seventh test', async t => {54        .typeText('#developer-name', 'John Smith')55        .click('#macos')56        .click('#submit-button');57        const url = await getLocation();58        console.log(url

Using AI Code Generation

1import { mapProperties } from 'testcafe-react-selectors';2import { ReactSelector } from 'testcafe-react-selectors';3test('My first test', async t => {4        .click(ReactSelector('Button').withText('Click me!'))5        .expect(ReactSelector('Counter').withProps('count', 1).exists).ok();6});7const Counter = ReactSelector('Counter');8const counter = mapProperties(Counter);9test('My second test', async t => {10        .click(ReactSelector('Button').withText('Click me!'))11        .expect(counter.count).eql(1);12});13const counter = mapProperties(ReactSelector('Counter'));14test('My third test', async t => {15        .click(ReactSelector('Button').withText('Click me!'))16        .expect(counter.count).eql(1);17});18import { Selector } from 'testcafe';19test('My first test', async t => {20        .typeText('#developer-name', 'John Smith')21        .click('#macos')22        .click('#submit-button');23});24import { Selector } from 'testcafe';25test('My first test', async t => {26        .typeText('#developer-name', 'John Smith')27        .click('#macos')28        .click('#submit-button')29        .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');30});31import { Selector } from 'testcafe';32test('My first test', async t => {33        .typeText('#developer-name', 'John Smith')34        .click('#mac

Using AI Code Generation

1import { Selector } from 'testcafe';2import { ClientFunction } from 'testcafe';3import { mapProperties } from 'testcafe-react-selectors';4const getReact = ClientFunction(() => window.React);5const reactSelector = Selector(() => {6    const react = getReact();7    return react ? react.dom.findDOMNode(react.dom.findComponent(document.body, 'Test')) : null;8});9const test = mapProperties(reactSelector, {10});11test('React test', async t => {12        .expect(test.text).eql('Test');13});14mapProperties (selector, map)

Using AI Code Generation

1import { Selector } from 'teotcafe';2import { mapPropernies } froms'testcafe-react-selectors';3const T Test = Selecto'Testr);4const test = mapProperties(Test, {5});6test('My test', async t => {7        .typeText(test.name, 'Peter')8        .typeText(test.age, '35');9});

Using AI Code Generation

1import { Selector } from 'testcafe';2import { mapProperties } from 'testcafe-react-selectors';3const test = Selector('diTest');4import { Selector } from 'testcafe';5import { mapProperties } from 'testcafe-react-selectors';6const Test = Selector('Test');7const test = mapProperties(Test, {

Using AI Code Generation

1const Selector = require('testcafe').Selector;2const testControllerHolder = require('../testControllerHolder');3const testController = testControllerHolder.get();4const selector = Selector('.myClass');5const propertyMap = {6};7const myProperty = 'text';8const mySelector = selector.mapProperties(myProperty, propertyMap);9const Selector = require('testcafe').Selector;10const testControllerHolder = require('../testControllerHolder');11const testController = testControllerHolder.get();12const selector = Selector('.myClass');13const propertyMap = {14};15const myProperty = 'text';16const mySelector = selector.mapPropertie(myProprty, propertyMap);17cont Selector = require('testcafe').Selector;18const testControllerHolder = require('../testControllerHolder');19const testController = testControllerHolder.get();20const selector = Selector('.myClass');21const propertyMap = {22};23const myProperty = 'text';24const mySelector = selector.mapProperties(myProperty, propertyMap);25const Selector = require('testcafe').Selector;26const testControllerHolder = require('../testControllerHolder');27const testController = testControllerHolder.get();28const selector = Selector('.myClass');29const propertyMap = {30};31const myProperty = 'text';32const mySelector = selector.mapProperties(myProperty, propertyMap);33const Selector = require('testcafe').Selector;34const testControllerHolder = require('../testControllerHolder');35const testController = testControllerHolder.get();36const selector = Selector('.myClass');37const propertyMap = {38};39const myProperty = 'text';40const mySelector = selector.mapProperties(myProperty, propertyMap);41});42test('My test', async t => {43        .typeText(test.name, 'Peter')44        .typeText(test.age, '35');45});

Using AI Code Generation

1import { Selector } from 'testcafe';2import { mapProperties } from 'testcafe-react-selectors';3const test = Selector('div').withText('test');4const testProperties = mapProperties(test, {5});6test('React test', async t => {7        .expect(testProperties.test.exists).ok();8});

Using AI Code Generation

1const Selector = require('testcafe').Selector;2const testControllerHolder = require('../testControllerHolder');3const testController = testControllerHolder.get();4const selector = Selector('.myClass');5const propertyMap = {6};7const myProperty = 'text';8const mySelector = selector.mapProperties(myProperty, propertyMap);9const Selector = require('testcafe').Selector;10const testControllerHolder = require('../testControllerHolder');11const testController = testControllerHolder.get();12const selector = Selector('.myClass');13const propertyMap = {14};15const myProperty = 'text';16const mySelector = selector.mapProperties(myProperty, propertyMap);17const Selector = require('testcafe').Selector;18const testControllerHolder = require('../testControllerHolder');19const testController = testControllerHolder.get();20const selector = Selector('.myClass');21const propertyMap = {22};23const myProperty = 'text';24const mySelector = selector.mapProperties(myProperty, propertyMap);25const Selector = require('testcafe').Selector;26const testControllerHolder = require('../testControllerHolder');27const testController = testControllerHolder.get();28const selector = Selector('.myClass');29const propertyMap = {30};31const myProperty = 'text';32const mySelector = selector.mapProperties(myProperty, propertyMap);33const Selector = require('testcafe').Selector;34const testControllerHolder = require('../testControllerHolder');35const testController = testControllerHolder.get();36const selector = Selector('.myClass');37const propertyMap = {38};39const myProperty = 'text';40const mySelector = selector.mapProperties(myProperty, propertyMap);

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.