JAVASCRIPT   72

geojson-feature-collection.js

Guest on 31st August 2021 05:16:53 PM

  1. define([
  2.     'jquery',
  3.     'arches',
  4.     'knockout',
  5.     'underscore',
  6.     'bindings/color-picker',
  7.     'bindings/mapbox-gl',
  8.     'bindings/codemirror',
  9.     'codemirror/mode/javascript/javascript',
  10.     'bindings/ckeditor'
  11. ], function($, arches, ko, _) {
  12.     var name = 'geojson-feature-collection-datatype-config';
  13.     ko.components.register(name, {
  14.         viewModel: function(params) {
  15.             var self = this;
  16.             this.node = params;
  17.             this.config = params.config;
  18.             this.graph = params.graph;
  19.             this.layer = params.layer;
  20.             if (this.layer) {
  21.                 this.permissions = params.permissions;
  22.                 this.iconFilter = ko.observable('');
  23.                 this.icons = ko.computed(function() {
  24.                     return _.filter(params.icons, function(icon) {
  25.                         return icon.name.indexOf(self.iconFilter()) >= 0;
  26.                     });
  27.                 });
  28.                 this.count = params.mapSource.count;
  29.                 this.loading = params.loading || ko.observable(false);
  30.                 var overlays = JSON.parse(this.layer.layer_definitions);
  31.                 var getDisplayLayers = function() {
  32.                     var displayLayers = overlays;
  33.                     if (self.config.advancedStyling()) {
  34.                         var advancedStyle = self.config.advancedStyle();
  35.                         try {
  36.                             displayLayers = JSON.parse(advancedStyle);
  37.                         }
  38.                         catch (e) {
  39.                             displayLayers = [];
  40.                         }
  41.                     }
  42.                     if (params.mapSource.count > 0) {
  43.                         _.each(displayLayers, function(layer){
  44.                             layer["source-layer"] = params.nodeid;
  45.                         });
  46.                     }
  47.                     return displayLayers;
  48.                 };
  49.                 if (params.mapSource.count === 0) {
  50.                     _.each(overlays, function(overlay){
  51.                         delete overlay["source-layer"];
  52.                     });
  53.                 }
  54.                 this.selectedBasemapName = ko.observable('');
  55.                 var mapLayers = $.extend(true, {}, arches.mapLayers);
  56.                 this.basemaps = _.filter(mapLayers, function(layer) {
  57.                     return !layer.isoverlay;
  58.                 });
  59.                 this.basemaps.forEach(function(basemap) {
  60.                     basemap.select = function(){
  61.                         self.selectedBasemapName(basemap.name);
  62.                     };
  63.                 });
  64.                 var defaultBasemap = _.find(this.basemaps, function(basemap) {
  65.                     return basemap.addtomap;
  66.                 });
  67.                 if (!defaultBasemap) {
  68.                     defaultBasemap = this.basemaps[0];
  69.                 }
  70.                 if (defaultBasemap) {
  71.                     this.selectedBasemapName(defaultBasemap.name);
  72.                 }
  73.                 var getBasemapLayers = function() {
  74.                     return _.filter(self.basemaps, function(layer) {
  75.                         return layer.name === self.selectedBasemapName();
  76.                     }).reduce(function(layers, layer) {
  77.                         return layers.concat(layer.layer_definitions);
  78.                     }, []);
  79.                 };
  80.                 var sources = $.extend(true, {}, arches.mapSources);
  81.                 sources[params.mapSource.name] = JSON.parse(params.mapSource.source);
  82.                 _.each(sources, function(sourceConfig, name) {
  83.                     if (sourceConfig.tiles) {
  84.                         sourceConfig.tiles.forEach(function(url, i) {
  85.                             if (url.startsWith('/')) {
  86.                                 sourceConfig.tiles[i] = window.location.origin + url;
  87.                             }
  88.                         });
  89.                     }
  90.                 });
  91.  
  92.                 var displayLayers = getDisplayLayers();
  93.                 var basemapLayers = getBasemapLayers();
  94.                 this.mapStyle = {
  95.                     "version": 8,
  96.                     "name": "Basic",
  97.                     "metadata": {
  98.                         "mapbox:autocomposite": true,
  99.                         "mapbox:type": "template"
  100.                     },
  101.                     "sources": sources,
  102.                     "sprite": "mapbox://sprites/mapbox/basic-v9",
  103.                     "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  104.                     "layers": basemapLayers.concat(displayLayers)
  105.                 };
  106.                 this.zoom = ko.observable(arches.mapDefaultZoom);
  107.                 this.minZoom = ko.observable(arches.mapDefaultMinZoom);
  108.                 this.maxZoom = ko.observable(arches.mapDefaultMaxZoom);
  109.                 this.centerX = ko.observable(arches.mapDefaultX);
  110.                 this.centerY = ko.observable(arches.mapDefaultY);
  111.                 this.pitch = ko.observable(0);
  112.                 this.bearing = ko.observable(0);
  113.  
  114.                 this.serviceURL = window.location.origin +
  115.                     arches.urls.mvt(params.nodeid);
  116.  
  117.                 this.map = null;
  118.                 this.setupMap = function(map) {
  119.                     this.map = map;
  120.                     if (this.node.layer.bounds) {
  121.                         var bounds = [
  122.                             [
  123.                                 this.node.layer.bounds.top_left.lon,
  124.                                 this.node.layer.bounds.bottom_right.lat
  125.                             ],
  126.                             [
  127.                                 this.node.layer.bounds.bottom_right.lon,
  128.                                 this.node.layer.bounds.top_left.lat
  129.                             ]
  130.                         ];
  131.                         _.defer(function() {
  132.                             map.fitBounds(bounds, {
  133.                                 padding: 20
  134.                             });
  135.                         }, 1);
  136.                     }
  137.                 };
  138.  
  139.                 var updateMapStyle = function() {
  140.                     _.each(overlays, function(layer) {
  141.                         switch (layer.id) {
  142.                         case "resources-fill-" + params.nodeid:
  143.                             layer.paint["fill-color"] = self.config.fillColor();
  144.                             break;
  145.                         case "resources-line-halo-" + params.nodeid:
  146.                             layer.paint["line-width"] = parseInt(self.config.haloWeight());
  147.                             if (!(self.config.haloWeight() > 0)) { layer.paint["line-width"] = 1; }
  148.                             self.config.haloWeight(layer.paint["line-width"]);
  149.                             layer.paint["line-color"] = self.config.lineHaloColor();
  150.                             break;
  151.                         case "resources-line-" + params.nodeid:
  152.                             layer.paint["line-width"] = parseInt(self.config.weight());
  153.                             if (!(self.config.weight() > 0)) { layer.paint["line-width"] = 1; }
  154.                             self.config.weight(layer.paint["line-width"]);
  155.                             layer.paint["line-color"] = self.config.lineColor();
  156.                             break;
  157.                         case "resources-poly-outline-" + params.nodeid:
  158.                             layer.paint["line-width"] = parseInt(self.config.outlineWeight());
  159.                             if (!(self.config.outlineWeight() > 0)) { layer.paint["line-width"] = 1; }
  160.                             self.config.outlineWeight(layer.paint["line-width"]);
  161.                             layer.paint["line-color"] = self.config.outlineColor();
  162.                             break;
  163.                         case "resources-point-halo-" + params.nodeid:
  164.                             layer.paint["circle-radius"] = parseInt(self.config.haloRadius());
  165.                             if (!(self.config.haloRadius() > 0)) { layer.paint["circle-radius"] = 1; }
  166.                             self.config.haloRadius(layer.paint["circle-radius"]);
  167.                         case "resources-cluster-point-halo-" + params.nodeid:
  168.                             layer.paint["circle-color"] = self.config.pointHaloColor();
  169.                             break;
  170.                         case "resources-point-" + params.nodeid:
  171.                             layer.paint["circle-radius"] = parseInt(self.config.radius());
  172.                             if (!(self.config.radius() > 0)) { layer.paint["circle-radius"] = 1; }
  173.                             self.config.radius(layer.paint["circle-radius"]);
  174.                         case "resources-cluster-point-" + params.nodeid:
  175.                             layer.paint["circle-color"] = self.config.pointColor();
  176.                             break;
  177.                         default:
  178.  
  179.                         }
  180.                     });
  181.                     var displayLayers = getDisplayLayers();
  182.                     var basemapLayers = getBasemapLayers();
  183.                     self.mapStyle.layers = basemapLayers.concat(displayLayers);
  184.                     self.map.setStyle(self.mapStyle);
  185.                 };
  186.  
  187.                 this.node.json.subscribe(updateMapStyle);
  188.                 this.selectedBasemapName.subscribe(updateMapStyle);
  189.  
  190.                 this.config.advancedStyling.subscribe(function(value) {
  191.                     if (value && !self.config.advancedStyle()) {
  192.                         self.config.advancedStyle(JSON.stringify(overlays, null, '\t'));
  193.                     }
  194.                 });
  195.  
  196.                 this.saveNode = function() {
  197.                     self.loading(true);
  198.                     self.node.save(function() {
  199.                         self.loading(false);
  200.                     });
  201.                 };
  202.             }
  203.         },
  204.         template: { require: 'text!datatype-config-templates/geojson-feature-collection' }
  205.     });
  206.     return name;
  207. });

Raw Paste


Login or Register to edit or fork this paste. It's free.