map/esriMap.js

  1. 'use strict';
  2. const basemap = require('./basemap.js');
  3. const mapPrint = require('./print.js');
  5. function esriMap(esriBundle, geoApi) {
  7.     const printModule = mapPrint(esriBundle);
  9.     class Map {
  11.         static get Extent () { return esriBundle.Extent; }
  13.         // TODO when jshint parses instance fields properly we can change this from a property to a field
  14.         get _passthroughBindings () { return [
  15.             'on', 'reorderLayer', 'addLayer', 'disableKeyboardNavigation', 'removeLayer', 'resize', 'reposition',
  16.             'centerAt', 'setZoom', 'centerAndZoom', 'toScreen', 'setExtent'
  17.         ]; }
  18.         get _passthroughProperties () { return ['graphicsLayerIds', 'layerIds', 'spatialReference', 'extent']; } // TODO when jshint parses instance fields properly we can change this from a property to a field
  20.         constructor (domNode, opts) {
  22.             this._passthroughBindings.forEach(bindingName =>
  23.                 this[bindingName] = (...args) => this._map[bindingName](...args));
  24.             this._passthroughProperties.forEach(propName => {
  25.                 const descriptor = {
  26.                     enumerable: true,
  27.                     get: () => this._map[propName]
  28.                 };
  29.                 Object.defineProperty(this, propName, descriptor);
  30.             });
  32.             this._map = new esriBundle.Map(domNode, { extent: opts.extent, lods: opts.lods });
  33.             if (opts.proxyUrl) {
  34.                 this.proxy = opts.proxyUrl;
  35.             }
  37.             if (opts.basemaps) {
  38.                 this.basemapGallery = basemap.initBasemaps(esriBundle, opts.basemaps, this._map);
  39.                 this.basemapGallery.on('selection-change', () => this.resetOverviewMap());
  40.             } else {
  41.                 throw new Error('The basemaps option is required to and at least one basemap must be defined');
  42.             }
  44.             if (opts.scalebar) {
  45.                 this.scalebar = new esriBundle.Scalebar({
  46.                     map: this._map,
  47.                     attachTo: opts.scalebar.attachTo,
  48.                     scalebarUnit: opts.scalebar.scalebarUnit
  49.                 });
  50.                 this.scalebar.show();
  51.             }
  53.             if (opts.overviewMap) {
  54.                 this.initOverviewMap();
  55.             }
  57.             this.zoomPromise = Promise.resolve();
  58.             this.zoomCounter = 0;
  60.         }
  62.         printLocal (options) { return printModule.printLocal(this._map, options); }
  63.         printServer (options) { return printModule.printServer(this._map, options); }
  65.         /**
  66.          * Create an ESRI Extent object from extent setting JSON object.
  67.          *
  68.          * @function getExtentFromJson
  69.          * @param {Object} extentJson that follows config spec
  70.          * @return {Object} an ESRI Extent object
  71.          */
  72.         static getExtentFromJson (extentJson) {
  74.             return esriBundle.Extent({ xmin: extentJson.xmin, ymin: extentJson.ymin,
  75.                 xmax: extentJson.xmax, ymax: extentJson.ymax,
  76.                 spatialReference: { wkid: extentJson.spatialReference.wkid } });
  77.         }
  79.         /**
  80.          * Take a JSON object with extent properties and convert it to an ESRI Extent.
  81.          * Reprojects to map projection if required.
  82.          *
  83.          * @param {Object} extent the extent to enhance
  84.          * @returns {Extent} extent cast in Extent prototype, and in map spatial reference
  85.          */
  86.         enhanceConfigExtent (extent) {
  87.             const realExtent = Map.getExtentFromJson(extent);
  89.             if (geoApi.proj.isSpatialRefEqual(this._map.spatialReference, extent.spatialReference)) {
  90.                 return realExtent;
  91.             } else {
  92.                 return geoApi.proj.projectEsriExtent(realExtent, this._map.spatialReference);
  93.             }
  94.         }
  96.         /**
  97.          * Finds the level of detail closest to the provided scale.
  98.          *
  99.          * @function findClosestLOD
  100.          * @param  {Array} lods     list of levels of detail objects
  101.          * @param  {Number} scale   scale value to search for in the levels of detail
  102.          * @return {Object}         the level of detail object closest to the scale
  103.          */
  104.         static findClosestLOD (lods, scale) {
  105.             const diffs = lods.map(lod => Math.abs(lod.scale - scale));
  106.             const lodIdx = diffs.indexOf(Math.min(...diffs));
  107.             return lods[lodIdx];
  108.         }
  110.         /**
  111.          * Calculate north arrow bearing. Angle returned is to to rotate north arrow image.
  112.          * http://www.movable-type.co.uk/scripts/latlong.html
  113.          * @function getNorthArrowAngle
  114.          * @returns {Number} map rotation angle (in degree)
  115.          */
  116.         getNorthArrowAngle () {
  117.             // get center point in longitude and use bottom value for latitude
  118.             const pointB = geoApi.proj.localProjectPoint(this._map.extent.spatialReference, 'EPSG:4326',
  119.                     { x: (this._map.extent.xmin + this._map.extent.xmax) / 2, y: this._map.extent.ymin });
  121.             // north value (set longitude to be half of Canada extent (141° W, 52° W))
  122.             const pointA = { x: -96, y: 90 };
  124.             // set info on longitude and latitude
  125.             const dLon = (pointB.x - pointA.x) * Math.PI / 180;
  126.             const lat1 = pointA.y * Math.PI / 180;
  127.             const lat2 = pointB.y * Math.PI / 180;
  129.             // calculate bearing
  130.             const y = Math.sin(dLon) * Math.cos(lat2);
  131.             const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
  132.             const bearing = Math.atan2(y, x) * 180 / Math.PI;
  134.             // return angle (180 is pointiong north)
  135.             return ((bearing + 360) % 360).toFixed(1);
  136.         }
  138.         /**
  139.          * Calculate distance between min and max extent to know the pixel ratio between
  140.          * screen size and earth distance.
  141.          * http://www.movable-type.co.uk/scripts/latlong.html
  142.          * @function getScaleRatio
  143.          * @param {Number} mapWidth optional the map width to use to calculate ratio
  144.          * @returns {Object} contain information about the scale
  145.          *                               - distance: distance between min and max extentId
  146.          *                               - ratio: measure for 1 pixel in earth distance
  147.          *                               - units: array of units [metric, imperial]
  148.          */
  149.         getScaleRatio (mapWidth = 0) {
  150.             const map = this._map;
  152.             // get left and right maximum value point to calculate distance from
  153.             const pointA = geoApi.proj.localProjectPoint(map.spatialReference, 'EPSG:4326',
  154.                     { x: map.extent.xmin, y: (map.extent.ymin + map.extent.ymax) / 2 });
  155.             const pointB = geoApi.proj.localProjectPoint(map.spatialReference, 'EPSG:4326',
  156.                     { x: map.extent.xmax, y: (map.extent.ymin + map.extent.ymax) / 2 });
  158.             // Haversine formula to calculate distance
  159.             const R = 6371e3; // earth radius in meters
  160.             const rad = Math.PI / 180;
  161.             const phy1 = pointA.y * rad; // radiant
  162.             const phy2 = pointB.y * rad; // radiant
  163.             const deltaPhy = (pointB.y - pointA.y) * rad; // radiant
  164.             const deltaLambda = (pointB.x - pointA.x) * rad; // radiant
  166.             const a = Math.sin(deltaPhy / 2) * Math.sin(deltaPhy / 2) +
  167.                         Math.cos(phy1) * Math.cos(phy2) *
  168.                         Math.sin(deltaLambda / 2) * Math.sin(deltaLambda / 2);
  169.             const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  170.             const d = (R * c);
  172.             // set map / image width (if mapWidth = 0, use map.width)
  173.             const width = mapWidth ? mapWidth : map.width;
  175.             // get unit from distance, set distance and ratio (earth size for 1 pixel)
  176.             const units = [(d > 1000) ? 'km' : 'm', (d > 1600) ? 'mi' : 'ft'];
  177.             const distance = (d > 1000) ? d / 1000 : d;
  178.             const ratio = distance / width;
  180.             return { distance, ratio, units };
  181.         }
  183.         /**
  184.          * Compares to sets of co-ordinates for extents (valid for both x and y). If center of input co-ordinates falls outside
  185.          * map co-ordiantes, function will adjust them so the center is inside the map co-ordinates.
  186.          *
  187.          * @function clipExtentCoords
  188.          * @private
  189.          * @param {Numeric} mid      middle of the the range to test
  190.          * @param {Numeric} max      maximum value of the range to test
  191.          * @param {Numeric} min      minimum value of the range to test
  192.          * @param {Numeric} mapMax   maximum value of the map range
  193.          * @param {Numeric} mapMin   minimum value of the map range
  194.          * @param {Numeric} len      length of the adjusted range, if adjusted
  195.          * @return {Array}           two element array of Numeric, containing result max and min values
  196.          */
  197.         static clipExtentCoords (mid, max, min, mapMax, mapMin, len) {
  199.             if (mid > mapMax) {
  200.                 [max, min] = [mapMax, mapMax - len];
  201.             } else if (mid < mapMin) {
  202.                 [max, min] = [mapMin + len, mapMin];
  203.             }
  204.             return [max, min];
  205.         }
  207.         /**
  208.          * Checks if the center of the given extent is outside of the maximum extent. If it is,
  209.          * will determine an adjusted extent with a center inside the maximum extent.  Returns both
  210.          * an indicator flag if an adjustment happened, and the adjusted extent.
  211.          *
  212.          * @function enforceBoundary
  213.          * @param {Object} extent      an ESRI extent to test
  214.          * @param {Object} maxExtent   an ESRI extent indicating the boundary of the map
  215.          * @return {Object}            an object with two properties. adjusted - boolean, true if extent was adjusted. newExtent - object, adjusted ESRI extent
  216.          */
  217.         static enforceBoundary (extent, maxExtent) {
  218.             // clone extent
  219.             const newExtent = esriBundle.Extent(extent.toJson());
  221.             // determine dimensions of adjusted extent.
  222.             // same as input, unless input is so large it consumes max.
  223.             // in that case, we shrink to the max. This avoids the "washing machine"
  224.             // bug where we over-correct past the valid range,
  225.             // and achieve infinite oscillating pans
  226.             const height = Math.min(extent.getHeight(), maxExtent.getHeight());
  227.             const width = Math.min(extent.getWidth(), maxExtent.getWidth());
  228.             const center = extent.getCenter();
  230.             [newExtent.xmax, newExtent.xmin] =
  231.                 this.clipExtentCoords(center.x, newExtent.xmax, newExtent.xmin, maxExtent.xmax, maxExtent.xmin, width);
  232.             [newExtent.ymax, newExtent.ymin] =
  233.                 this.clipExtentCoords(center.y, newExtent.ymax, newExtent.ymin, maxExtent.ymax, maxExtent.ymin, height);
  235.             return {
  236.                 newExtent,
  237.                 adjusted: !extent.contains(newExtent) // true if we adjusted the extent
  238.             };
  239.         }
  241.         initOverviewMap () {
  242.             this.overviewMap = new esriBundle.OverviewMap({ map: this._map, expandFactor: 1, visible: true });
  243.             this.overviewMap.startup();
  244.         }
  245.         resetOverviewMap () {
  246.             this.overviewMap.destroy();
  247.             this.initOverviewMap();
  248.         }
  250.         /**
  251.          * Changes the zoom level by the specified value relative to the current level; can be negative.
  252.          * To avoid multiple chained zoom animations when rapidly pressing the zoom in/out icons, we
  253.          * update the zoom level only when the one before it resolves with the net zoom change.
  254.          *
  255.          * @function shiftZoom
  256.          * @param  {number} byValue a number of zoom levels to shift by
  257.          */
  258.         shiftZoom (byValue) {
  259.             this.zoomCounter += byValue;
  260.             this.zoomPromise.then(() => {
  261.                 if (this.zoomCounter !== 0) {
  262.                     const zoomValue = this._map.getZoom() + this.zoomCounter;
  263.                     const zoomPromise = Promise.resolve(this.setZoom(zoomValue));
  264.                     this.zoomCounter = 0;
  266.                     // undefined signals we've zoomed in/out as far as we can
  267.                     if (typeof zoomPromise !== 'undefined') {
  268.                         this.zoomPromise = zoomPromise;
  269.                     }
  270.                 }
  271.             });
  272.         }
  274.         /**
  275.          * Sets or gets map default config values.
  276.          *
  277.          * @function mapDefault
  278.          * @param {String} key  name of the default property
  279.          * @param {Any} [value] optional value to set for the specified default property
  280.          */
  281.         mapDefault (key, value) {
  282.             if (typeof value === 'undefined') {
  283.                 return esriBundle.esriConfig.defaults.map[key];
  284.             } else {
  285.                 esriBundle.esriConfig.defaults.map[key] = value;
  286.             }
  287.         }
  289.         /**
  290.          * Set proxy service URL to avoid same origin issues.
  291.          */
  292.         set proxy (proxyUrl) { esriBundle.esriConfig.defaults.io.proxyUrl = proxyUrl; }
  293.         get proxy () { return esriBundle.esriConfig.defaults.io.proxyUrl; }
  295.         set basemapGallery (val) { this._basemapGallery = val; }
  296.         get basemapGallery () { return this._basemapGallery; }
  298.         set scalebar (val) { this._scalebar = val; }
  299.         get scalebar () { return this._scalebar; }
  301.         set overviewMap (val) { this._overviewMap = val; }
  302.         get overviewMap () { return this._overviewMap; }
  304.     }
  306.     return Map;
  307. }
  309. /**
  310.   * The `MapManager` module exports an object with the following properties:
  311.   * - `Extent` esri/geometry type
  312.   * - `Map` esri/map type
  313.   * - `OverviewMap` esri/dijit/OverviewMap type
  314.   * - `Scalebar` sri/dijit/Scalebar type
  315.   * - `getExtentFromSetting function to create an ESRI Extent object from extent setting JSON object.
  316.   * - `setupMap` function that interates over config settings and apply logic for any items present.
  317.   * - `setProxy` function to set proxy service URL to avoid same origin issues
  318.   */
  320. // mapManager module, provides function to setup a map
  321. module.exports = (esriBundle, geoApi) => esriMap(esriBundle, geoApi);