How to use createLayer method in Cypress

Best JavaScript code snippet using cypress

Run Cypress automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

leafletLayerHelpers.js

Source: leafletLayerHelpers.js Github

copy
1angular.module('leaflet-directive')
2.factory('leafletLayerHelpers', function($rootScope, $log, $q, leafletHelpers, leafletIterators) {
3  var Helpers = leafletHelpers;
4  var isString = leafletHelpers.isString;
5  var isObject = leafletHelpers.isObject;
6  var isArray = leafletHelpers.isArray;
7  var isDefined = leafletHelpers.isDefined;
8  var errorHeader = leafletHelpers.errorHeader;
9  var $it = leafletIterators;
10
11  var utfGridCreateLayer = function(params) {
12    if (!Helpers.UTFGridPlugin.isLoaded()) {
13      $log.error('[AngularJS - Leaflet] The UTFGrid plugin is not loaded.');
14      return;
15    }
16
17    var utfgrid = new L.UtfGrid(params.url, params.pluginOptions);
18
19    utfgrid.on('mouseover', function(e) {
20      $rootScope.$broadcast('leafletDirectiveMap.utfgridMouseover', e);
21    });
22
23    utfgrid.on('mouseout', function(e) {
24      $rootScope.$broadcast('leafletDirectiveMap.utfgridMouseout', e);
25    });
26
27    utfgrid.on('click', function(e) {
28      $rootScope.$broadcast('leafletDirectiveMap.utfgridClick', e);
29    });
30
31    utfgrid.on('mousemove', function(e) {
32      $rootScope.$broadcast('leafletDirectiveMap.utfgridMousemove', e);
33    });
34
35    return utfgrid;
36  };
37
38  var layerTypes = {
39    xyz: {
40      mustHaveUrl: true,
41      createLayer: function(params) {
42        return L.tileLayer(params.url, params.options);
43      },
44    },
45    mapbox: {
46      mustHaveKey: true,
47      createLayer: function(params) {
48        var version = 3;
49        if (isDefined(params.options.version) && params.options.version === 4) {
50          version = params.options.version;
51        }
52
53        var url = version === 3 ?
54            '//{s}.tiles.mapbox.com/v3/' + params.key + '/{z}/{x}/{y}.png' :
55            '//api.tiles.mapbox.com/v4/' + params.key + '/{z}/{x}/{y}.png?access_token=' + params.apiKey;
56        return L.tileLayer(url, params.options);
57      },
58    },
59    geoJSON: {
60      mustHaveUrl: true,
61      createLayer: function(params) {
62        if (!Helpers.GeoJSONPlugin.isLoaded()) {
63          return;
64        }
65
66        return new L.TileLayer.GeoJSON(params.url, params.pluginOptions, params.options);
67      },
68    },
69    geoJSONShape: {
70      mustHaveUrl: false,
71      createLayer: function(params) {
72        return new L.GeoJSON(params.data,
73            params.options);
74      },
75    },
76    geoJSONAwesomeMarker: {
77      mustHaveUrl: false,
78      createLayer: function(params) {
79        return new L.geoJson(params.data, {
80          pointToLayer: function(feature, latlng) {
81            return L.marker(latlng, {icon: L.AwesomeMarkers.icon(params.icon)});
82          },
83        });
84      },
85    },
86    geoJSONVectorMarker: {
87      mustHaveUrl: false,
88      createLayer: function(params) {
89        return new L.geoJson(params.data, {
90          pointToLayer: function(feature, latlng) {
91            return L.marker(latlng, {icon: L.VectorMarkers.icon(params.icon)});
92          },
93        });
94      },
95    },
96    utfGrid: {
97      mustHaveUrl: true,
98      createLayer: utfGridCreateLayer,
99    },
100    cartodbTiles: {
101      mustHaveKey: true,
102      createLayer: function(params) {
103        var url = '//' + params.user + '.cartodb.com/api/v1/map/' + params.key + '/{z}/{x}/{y}.png';
104        return L.tileLayer(url, params.options);
105      },
106    },
107    cartodbUTFGrid: {
108      mustHaveKey: true,
109      mustHaveLayer: true,
110      createLayer: function(params) {
111        params.url = '//' + params.user + '.cartodb.com/api/v1/map/' + params.key + '/' + params.layer + '/{z}/{x}/{y}.grid.json';
112        return utfGridCreateLayer(params);
113      },
114    },
115    cartodbInteractive: {
116      mustHaveKey: true,
117      mustHaveLayer: true,
118      createLayer: function(params) {
119        var tilesURL = '//' + params.user + '.cartodb.com/api/v1/map/' + params.key + '/{z}/{x}/{y}.png';
120        var tileLayer = L.tileLayer(tilesURL, params.options);
121        params.url = '//' + params.user + '.cartodb.com/api/v1/map/' + params.key + '/' + params.layer + '/{z}/{x}/{y}.grid.json';
122        var utfLayer = utfGridCreateLayer(params);
123        return L.layerGroup([tileLayer, utfLayer]);
124      },
125    },
126    wms: {
127      mustHaveUrl: true,
128      createLayer: function(params) {
129        return L.tileLayer.wms(params.url, params.options);
130      },
131    },
132    wmts: {
133      mustHaveUrl: true,
134      createLayer: function(params) {
135        return L.tileLayer.wmts(params.url, params.options);
136      },
137    },
138    wfs: {
139      mustHaveUrl: true,
140      mustHaveLayer: true,
141      createLayer: function(params) {
142        if (!Helpers.WFSLayerPlugin.isLoaded()) {
143          return;
144        }
145
146        var options = angular.copy(params.options);
147        if (options.crs && typeof options.crs === 'string') {
148          /*jshint -W061 */
149          options.crs = eval(options.crs);
150        }
151
152        return new L.GeoJSON.WFS(params.url, params.layer, options);
153      },
154    },
155    group: {
156      mustHaveUrl: false,
157      createLayer: function(params) {
158        var lyrs = [];
159        $it.each(params.options.layers, function(l) {
160                  lyrs.push(createLayer(l));
161                });
162
163        params.options.loadedDefer = function() {
164          var defers = [];
165          if (isDefined(params.options.layers)) {
166            for (var i = 0; i < params.options.layers.length; i++) {
167              var d = params.options.layers[i].layerOptions.loadedDefer;
168              if (isDefined(d)) {
169                defers.push(d);
170              }
171            }
172          }
173
174          return defers;
175        };
176
177        return L.layerGroup(lyrs);
178      },
179    },
180    featureGroup: {
181      mustHaveUrl: false,
182      createLayer: function() {
183        return L.featureGroup();
184      },
185    },
186    google: {
187      mustHaveUrl: false,
188      createLayer: function(params) {
189        var type = params.type || 'SATELLITE';
190        if (!Helpers.GoogleLayerPlugin.isLoaded()) {
191          return;
192        }
193
194        return new L.Google(type, params.options);
195      },
196    },
197    here: {
198      mustHaveUrl: false,
199      createLayer: function(params) {
200        var provider = params.provider || 'HERE.terrainDay';
201        if (!Helpers.LeafletProviderPlugin.isLoaded()) {
202          return;
203        }
204
205        return new L.TileLayer.Provider(provider, params.options);
206      },
207    },
208    china:{
209      mustHaveUrl:false,
210      createLayer:function(params) {
211        var type = params.type || '';
212        if (!Helpers.ChinaLayerPlugin.isLoaded()) {
213          return;
214        }
215
216        return L.tileLayer.chinaProvider(type, params.options);
217      },
218    },
219    agsBase: {
220      mustHaveLayer: true,
221      createLayer: function(params) {
222        if (!Helpers.AGSBaseLayerPlugin.isLoaded()) {
223          return;
224        }
225
226        return L.esri.basemapLayer(params.layer, params.options);
227      },
228    },
229    ags: {
230      mustHaveUrl: true,
231      createLayer: function(params) {
232        if (!Helpers.AGSLayerPlugin.isLoaded()) {
233          return;
234        }
235
236        var options = angular.copy(params.options);
237        angular.extend(options, {
238          url: params.url,
239        });
240        var layer = new lvector.AGS(options);
241        layer.onAdd = function(map) {
242          this.setMap(map);
243        };
244
245        layer.onRemove = function() {
246          this.setMap(null);
247        };
248
249        return layer;
250      },
251    },
252    agsFeature: {
253      mustHaveUrl: true,
254      createLayer: function(params) {
255        if (!Helpers.AGSFeatureLayerPlugin.isLoaded()) {
256          $log.warn(errorHeader + ' The esri plugin is not loaded.');
257          return;
258        }
259
260        params.options.url = params.url;
261
262        var layer = L.esri.featureLayer(params.options);
263        var load = function() {
264          if (isDefined(params.options.loadedDefer)) {
265            params.options.loadedDefer.resolve();
266          }
267        };
268
269        layer.on('loading', function() {
270          params.options.loadedDefer = $q.defer();
271          layer.off('load', load);
272          layer.on('load', load);
273        });
274
275        return layer;
276      },
277    },
278    agsTiled: {
279      mustHaveUrl: true,
280      createLayer: function(params) {
281        if (!Helpers.AGSTiledMapLayerPlugin.isLoaded()) {
282          $log.warn(errorHeader + ' The esri plugin is not loaded.');
283          return;
284        }
285
286        params.options.url = params.url;
287
288        return L.esri.tiledMapLayer(params.options);
289      },
290    },
291    agsDynamic: {
292      mustHaveUrl: true,
293      createLayer: function(params) {
294        if (!Helpers.AGSDynamicMapLayerPlugin.isLoaded()) {
295          $log.warn(errorHeader + ' The esri plugin is not loaded.');
296          return;
297        }
298
299        params.options.url = params.url;
300
301        return L.esri.dynamicMapLayer(params.options);
302      },
303    },
304    agsImage: {
305      mustHaveUrl: true,
306      createLayer: function(params) {
307        if (!Helpers.AGSImageMapLayerPlugin.isLoaded()) {
308          $log.warn(errorHeader + ' The esri plugin is not loaded.');
309          return;
310        }
311
312        params.options.url = params.url;
313
314        return L.esri.imageMapLayer(params.options);
315      },
316    },
317    agsClustered: {
318      mustHaveUrl: true,
319      createLayer: function(params) {
320        if (!Helpers.AGSClusteredLayerPlugin.isLoaded()) {
321          $log.warn(errorHeader + ' The esri clustered layer plugin is not loaded.');
322          return;
323        }
324
325        if (!Helpers.MarkerClusterPlugin.isLoaded()) {
326          $log.warn(errorHeader + ' The markercluster plugin is not loaded.');
327          return;
328        }
329
330        return L.esri.clusteredFeatureLayer(params.url, params.options);
331      },
332    },
333    agsHeatmap: {
334      mustHaveUrl: true,
335      createLayer: function(params) {
336        if (!Helpers.AGSHeatmapLayerPlugin.isLoaded()) {
337          $log.warn(errorHeader + ' The esri heatmap layer plugin is not loaded.');
338          return;
339        }
340
341        if (!Helpers.HeatLayerPlugin.isLoaded()) {
342          $log.warn(errorHeader + ' The heatlayer plugin is not loaded.');
343          return;
344        }
345
346        return L.esri.heatmapFeatureLayer(params.url, params.options);
347      },
348    },
349    markercluster: {
350      mustHaveUrl: false,
351      createLayer: function(params) {
352        if (!Helpers.MarkerClusterPlugin.isLoaded()) {
353          $log.warn(errorHeader + ' The markercluster plugin is not loaded.');
354          return;
355        }
356
357        return new L.MarkerClusterGroup(params.options);
358      },
359    },
360    bing: {
361      mustHaveUrl: false,
362      createLayer: function(params) {
363        if (!Helpers.BingLayerPlugin.isLoaded()) {
364          return;
365        }
366
367        return new L.BingLayer(params.key, params.options);
368      },
369    },
370    webGLHeatmap: {
371      mustHaveUrl: false,
372      mustHaveData: true,
373      createLayer: function(params) {
374        if (!Helpers.WebGLHeatMapLayerPlugin.isLoaded()) {
375          return;
376        }
377
378        var layer = new L.TileLayer.WebGLHeatMap(params.options);
379        if (isDefined(params.data)) {
380          layer.setData(params.data);
381        }
382
383        return layer;
384      },
385    },
386    heat: {
387      mustHaveUrl: false,
388      mustHaveData: true,
389      createLayer: function(params) {
390        if (!Helpers.HeatLayerPlugin.isLoaded()) {
391          return;
392        }
393
394        var layer = new L.heatLayer();
395
396        if (isArray(params.data)) {
397          layer.setLatLngs(params.data);
398        }
399
400        if (isObject(params.options)) {
401          layer.setOptions(params.options);
402        }
403
404        return layer;
405      },
406    },
407    yandex: {
408      mustHaveUrl: false,
409      createLayer: function(params) {
410        var type = params.type || 'map';
411        if (!Helpers.YandexLayerPlugin.isLoaded()) {
412          return;
413        }
414
415        return new L.Yandex(type, params.options);
416      },
417    },
418    imageOverlay: {
419      mustHaveUrl: true,
420      mustHaveBounds: true,
421      createLayer: function(params) {
422        return L.imageOverlay(params.url, params.bounds, params.options);
423      },
424    },
425    iip: {
426      mustHaveUrl: true,
427      createLayer: function(params) {
428        return L.tileLayer.iip(params.url, params.options);
429      },
430    },
431
432    // This "custom" type is used to accept every layer that user want to define himself.
433    // We can wrap these custom layers like heatmap or yandex, but it means a lot of work/code to wrap the world,
434    // so we let user to define their own layer outside the directive,
435    // and pass it on "createLayer" result for next processes
436    custom: {
437      createLayer: function(params) {
438        if (params.layer instanceof L.Class) {
439          return angular.copy(params.layer);
440        }        else {
441          $log.error('[AngularJS - Leaflet] A custom layer must be a leaflet Class');
442        }
443      },
444    },
445    cartodb: {
446      mustHaveUrl: true,
447      createLayer: function(params) {
448        return cartodb.createLayer(params.map, params.url);
449      },
450    },
451  };
452
453  function isValidLayerType(layerDefinition) {
454    // Check if the baselayer has a valid type
455    if (!isString(layerDefinition.type)) {
456      $log.error('[AngularJS - Leaflet] A layer must have a valid type defined.');
457      return false;
458    }
459
460    if (Object.keys(layerTypes).indexOf(layerDefinition.type) === -1) {
461      $log.error('[AngularJS - Leaflet] A layer must have a valid type: ' + Object.keys(layerTypes));
462      return false;
463    }
464
465    // Check if the layer must have an URL
466    if (layerTypes[layerDefinition.type].mustHaveUrl && !isString(layerDefinition.url)) {
467      $log.error('[AngularJS - Leaflet] A base layer must have an url');
468      return false;
469    }
470
471    if (layerTypes[layerDefinition.type].mustHaveData && !isDefined(layerDefinition.data)) {
472      $log.error('[AngularJS - Leaflet] The base layer must have a "data" array attribute');
473      return false;
474    }
475
476    if (layerTypes[layerDefinition.type].mustHaveLayer && !isDefined(layerDefinition.layer)) {
477      $log.error('[AngularJS - Leaflet] The type of layer ' + layerDefinition.type + ' must have an layer defined');
478      return false;
479    }
480
481    if (layerTypes[layerDefinition.type].mustHaveBounds && !isDefined(layerDefinition.bounds)) {
482      $log.error('[AngularJS - Leaflet] The type of layer ' + layerDefinition.type + ' must have bounds defined');
483      return false;
484    }
485
486    if (layerTypes[layerDefinition.type].mustHaveKey && !isDefined(layerDefinition.key)) {
487      $log.error('[AngularJS - Leaflet] The type of layer ' + layerDefinition.type + ' must have key defined');
488      return false;
489    }
490
491    return true;
492  }
493
494  function createLayer(layerDefinition) {
495    if (!isValidLayerType(layerDefinition)) {
496      return;
497    }
498
499    if (!isString(layerDefinition.name)) {
500      $log.error('[AngularJS - Leaflet] A base layer must have a name');
501      return;
502    }
503
504    if (!isObject(layerDefinition.layerParams)) {
505      layerDefinition.layerParams = {};
506    }
507
508    if (!isObject(layerDefinition.layerOptions)) {
509      layerDefinition.layerOptions = {};
510    }
511
512    // Mix the layer specific parameters with the general Leaflet options. Although this is an overhead
513    // the definition of a base layers is more 'clean' if the two types of parameters are differentiated
514    for (var attrname in layerDefinition.layerParams) {
515      layerDefinition.layerOptions[attrname] = layerDefinition.layerParams[attrname];
516    }
517
518    var params = {
519      url: layerDefinition.url,
520      data: layerDefinition.data,
521      options: layerDefinition.layerOptions,
522      layer: layerDefinition.layer,
523      icon: layerDefinition.icon,
524      type: layerDefinition.layerType,
525      bounds: layerDefinition.bounds,
526      key: layerDefinition.key,
527      apiKey: layerDefinition.apiKey,
528      pluginOptions: layerDefinition.pluginOptions,
529      user: layerDefinition.user,
530    };
531
532    //TODO Add $watch to the layer properties
533    return layerTypes[layerDefinition.type].createLayer(params);
534  }
535
536  function safeAddLayer(map, layer) {
537    if (layer && typeof layer.addTo === 'function') {
538      layer.addTo(map);
539    } else {
540      map.addLayer(layer);
541    }
542  }
543
544  function safeRemoveLayer(map, layer, layerOptions) {
545    if (isDefined(layerOptions) && isDefined(layerOptions.loadedDefer)) {
546      if (angular.isFunction(layerOptions.loadedDefer)) {
547        var defers = layerOptions.loadedDefer();
548        $log.debug('Loaded Deferred', defers);
549        var count = defers.length;
550        if (count > 0) {
551          var resolve = function() {
552            count--;
553            if (count === 0) {
554              map.removeLayer(layer);
555            }
556          };
557
558          for (var i = 0; i < defers.length; i++) {
559            defers[i].promise.then(resolve);
560          }
561        } else {
562          map.removeLayer(layer);
563        }
564      } else {
565        layerOptions.loadedDefer.promise.then(function() {
566          map.removeLayer(layer);
567        });
568      }
569    } else {
570      map.removeLayer(layer);
571    }
572  }
573
574  return {
575    createLayer: createLayer,
576    safeAddLayer: safeAddLayer,
577    safeRemoveLayer: safeRemoveLayer,
578  };
579});
580
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Cypress on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)