This repository has been archived by the owner on Dec 1, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 107
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #256 from Esri/v2-registry-#255
esriRegistry for v2
- Loading branch information
Showing
17 changed files
with
473 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <style type="text/css"> | ||
| .esri-view { | ||
| max-height: 250px; | ||
| } | ||
| </style> | ||
|
|
||
| <h2>Registry Pattern</h2> | ||
|
|
||
| <esri-map-view | ||
| map="vm.map" | ||
| register-as="myMapView" | ||
| view-options="vm.mapViewOptions" | ||
| on-create="vm.onMapViewCreated"> | ||
| </esri-map-view> | ||
|
|
||
| <hr> | ||
|
|
||
| <div class="web-gl-warning" ng-show="vm.showSceneViewError">WebGL is not supported on your platform/browser.</div> | ||
| <esri-scene-view | ||
| map="vm.map" | ||
| register-as="mySceneView" | ||
| view-options="vm.sceneViewOptions" | ||
| on-create="vm.onSceneViewCreated" | ||
| on-error="vm.onSceneViewError" | ||
| ng-hide="vm.showSceneViewError"> | ||
| </esri-scene-view> | ||
|
|
||
| <div ng-controller="AnotherController as anotherCtrl"> | ||
| <p ng-show="!anotherCtrl.mapViewPoint"> | ||
| Click the map view to see point X / Y. | ||
| </p> | ||
| <p id="mapViewClickInfo" ng-show="anotherCtrl.mapViewPoint"> | ||
| Clicked map view point X: {{ anotherCtrl.mapViewPoint.x }}, Y: {{ anotherCtrl.mapViewPoint.y }} | ||
| </p> | ||
|
|
||
| <p ng-show="!anotherCtrl.sceneViewPoint"> | ||
| Click the scene view to see point X / Y. | ||
| </p> | ||
| <p id="sceneViewClickInfo" ng-show="anotherCtrl.sceneViewPoint"> | ||
| Clicked scene view point X: {{ anotherCtrl.sceneViewPoint.x }}, Y: {{ anotherCtrl.sceneViewPoint.y }} | ||
| </p> | ||
| </div> | ||
|
|
||
| <p>Learn more about the <a href="/#/patterns/references-to-views">registry pattern</a>.</p> | ||
| <p>Based on <a href="https://developers.arcgis.com/javascript/beta/sample-code/get-started-mapview/index.html">this sample</a>.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| angular.module('esri-map-docs') | ||
| .controller('RegistryPatternCtrl', function(esriLoader, browserDetectionService) { | ||
| var self = this; | ||
|
|
||
| self.mapViewOptions = { | ||
| zoom: 4, | ||
| center: [15, 65] | ||
| }; | ||
|
|
||
| self.sceneViewOptions = { | ||
| zoom: 4, | ||
| center: [15, 65] | ||
| }; | ||
|
|
||
| // load esri modules | ||
| esriLoader.require([ | ||
| 'esri/Map' | ||
| ], function(Map) { | ||
| // create the map | ||
| self.map = new Map({ | ||
| basemap: 'streets' | ||
| }); | ||
|
|
||
| // NOTE: This is one way to get a reference to the map or scene view within | ||
| // the SAME parent controller, by binding to the on-create callback. | ||
| self.onMapViewCreated = function(view) { | ||
| self.mapView = view; | ||
| // do something with the map view | ||
| }; | ||
| self.onSceneViewCreated = function(view) { | ||
| self.sceneView = view; | ||
| // do something with the scene view | ||
| }; | ||
|
|
||
| // check that the device/browser can support WebGL | ||
| // by inspecting the userAgent and | ||
| // by handling the scene view directive's on-error | ||
| self.showSceneViewError = browserDetectionService.isMobile(); | ||
| self.onSceneViewError = function() { | ||
| self.showSceneViewError = true; | ||
| }; | ||
| }); | ||
| }) | ||
| .controller('AnotherController', function(esriRegistry, $scope) { | ||
| // NOTE: This is a way to get a reference to a view in | ||
| // a DIFFERENT controller, by setting the register-as attribute | ||
| // on the view directive and then using esriRegistry to get the view by name. | ||
| var self = this; | ||
|
|
||
| esriRegistry.get('myMapView').then(function(res) { | ||
| // establish a click listener on the view in the response | ||
| res.view.on('click', function(e) { | ||
| // set or update the point property that is used in the html template | ||
| self.mapViewPoint = e.mapPoint; | ||
|
|
||
| // NOTE: $scope.$apply() is needed b/c the view's click event | ||
| // happens outside of Angular's digest cycle | ||
| $scope.$apply(); | ||
| }); | ||
| }); | ||
|
|
||
| esriRegistry.get('mySceneView').then(function(res) { | ||
| res.view.on('click', function(e) { | ||
| self.sceneViewPoint = e.mapPoint; | ||
| $scope.$apply(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| (function(angular) { | ||
| 'use strict'; | ||
|
|
||
| /** | ||
| * @ngdoc service | ||
| * @name esri.core.factory:esriRegistry | ||
| * | ||
| * @description | ||
| * Use `esriRegistry` to store and retrieve MapView or SceneView instances for use in different controllers. | ||
| * | ||
| * ## Examples | ||
| * - {@link ../#/examples/registry-pattern Registry Pattern} | ||
| */ | ||
| angular.module('esri.core').service('esriRegistry', function($q) { | ||
| var registry = {}; | ||
|
|
||
| return { | ||
| _register: function(name, promise) { | ||
| // if there isn't a promise in the registry yet make one... | ||
| // this is the case where a directive is nested higher then the controller | ||
| // needing the instance | ||
| if (!registry[name]) { | ||
| registry[name] = $q.defer(); | ||
| } | ||
|
|
||
| var instance = registry[name]; | ||
|
|
||
| // when the promise from the directive is rejected/resolved | ||
| // reject/resolve the promise in the registry with the appropriate value | ||
| promise.then(function(arg) { | ||
| instance.resolve(arg); | ||
| return arg; | ||
| }, function(arg) { | ||
| instance.reject(arg); | ||
| return arg; | ||
| }); | ||
|
|
||
| // return a function to "deregister" the promise | ||
| // by deleting it from the registry | ||
| return function() { | ||
| delete registry[name]; | ||
| }; | ||
| }, | ||
|
|
||
| /** | ||
| * @ngdoc function | ||
| * @name get | ||
| * @methodOf esri.core.factory:esriRegistry | ||
| * | ||
| * @description | ||
| * Get the MapView or SceneView instance registered with the given name. | ||
| * See {@link esri.map.directive:esriMapView esriMapView} or | ||
| * {@link esri.map.directive:esriSceneView esriSceneView} | ||
| * for info on how to register a map using the `register-as` attribute. | ||
| * | ||
| * @param {String} name Name that the view was registered with. | ||
| * | ||
| * @return {Promise} Returns a $q style promise which is resolved with the view once it has been loaded. | ||
| */ | ||
| get: function(name) { | ||
| // If something is already in the registry return its promise ASAP. | ||
| // This is the case where you might want to get a registry item in an event handler. | ||
| if (registry[name]) { | ||
| return registry[name].promise; | ||
| } | ||
|
|
||
| // If we dont already have a registry item create one. This covers the | ||
| // case where the directive is nested inside the controller. The parent | ||
| // controller will be executed and gets a promise that will be resolved | ||
| // later when the item is registered | ||
| var deferred = $q.defer(); | ||
|
|
||
| registry[name] = deferred; | ||
|
|
||
| return deferred.promise; | ||
| } | ||
| }; | ||
| }); | ||
|
|
||
| })(angular); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.