Skip to content
This repository has been archived by the owner on Dec 1, 2020. It is now read-only.

Commit

Permalink
map load event called when using a web map
Browse files Browse the repository at this point in the history 
check if map is loaded (i.e. created from a web map) and call load handler
updated the web map test and example pages as follows:
1) use the map load event to get a handle to the map (instead of
esriRegistry)
2) load the Extent module up front
3) added comments

I also removed the whole hiding/showing the item snippet from the example
to get rid of some of the noise.

fixes #75
  • Loading branch information
@tomwayson
tomwayson committed Sep 2, 2015
1 parent e2ef39d commit 97626ab
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 62 deletions.
19 changes: 10 additions & 9 deletions dist/angular-esri-map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,6 @@
} else {
// create a new map object
var map = new Map($attrs.id, mapOptions);
// TODO: only resolve map deferred after map is loaded?
mapDeferred.resolve(map);
}

Expand All @@ -298,15 +297,17 @@

// make a reference to the map object available
// to the controller once it is loaded.
// TODO: will load event even fire if using a web map?
map.on('load', function() {
if (!$attrs.load) {
return;
}
$scope.$apply(function() {
if ($attrs.load) {
if (map.loaded) {
$scope.load()(map);
});
});
} else {
map.on('load', function() {
$scope.$apply(function() {
$scope.load()(map);
});
});
}
}

// listen for changes to $scope.basemap and update map
$scope.$watch('basemap', function(newBasemap, oldBasemap) {
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-esri-map.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 3 additions & 8 deletions docs/app/examples/web-map.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
<h2>Webmap Example: {{itemInfo.item.title}}</h2>
<!-- add map to page and bind to scope map parameters -->
<esri-map id="map" register-as="myMap" webmap-id="8e42e164d4174da09f61fe0d3f206641" center="map.center" zoom="map.zoom" item-info="itemInfo">
<esri-map id="map" register-as="myMap" webmap-id="8e42e164d4174da09f61fe0d3f206641" center="map.center" zoom="map.zoom" item-info="itemInfo" load="mapLoaded">
</esri-map>
<p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}
<a ng-init="isCollapsed=true" ng-click="isCollapsed = !isCollapsed">
<span ng-show="isCollapsed">+info</span>
<span ng-hide="isCollapsed">hide</span>
</a>
</p>
<div style="margin-bottom: 10px;" ng-hide="isCollapsed" ng-bind-html="itemInfo.item.snippet"></div>
<p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
<p ng-bind-html="itemInfo.item.snippet"></p>
<p>
<button ng-repeat="bookmark in itemInfo.itemData.bookmarks" ng-click="goToBookmark(bookmark)">{{bookmark.name}}</button>
</p>
Expand Down
43 changes: 27 additions & 16 deletions docs/app/examples/web-map.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,31 @@
'use strict';

angular.module('esri-map-docs')
.controller('WebMapCtrl', function($scope, esriLoader, esriRegistry) {
$scope.map = {
center: {
lng: -122.6819,
lat: 45.5200
},
zoom: 13
};
$scope.goToBookmark = function(bookmark) {
esriRegistry.get('myMap').then(function(map) {
esriLoader.require('esri/geometry/Extent').then(function(Extent) {
var extent = new Extent(bookmark.extent);
map.setExtent(extent);
});
});
};
.controller('WebMapCtrl', function($scope, esriLoader) {
// get a reference to the controller
// for use within the callback
var self = this;
// this example requires the extent module
// so let's go ahead and load that now
esriLoader.require('esri/geometry/Extent').then(function(Extent) {
$scope.map = {
center: {
lng: -122.6819,
lat: 45.5200
},
zoom: 13
};
// get a reference to the map object once it's loaded
$scope.mapLoaded = function(map) {
self.mapObj = map;
};
// click handler for bookmark buttons
$scope.goToBookmark = function(bookmark) {
if (!self.mapObj) {
return;
}
var extent = new Extent(bookmark.extent);
self.mapObj.setExtent(extent);
};
});
});
19 changes: 10 additions & 9 deletions src/directives/esriMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@
} else {
// create a new map object
var map = new Map($attrs.id, mapOptions);
// TODO: only resolve map deferred after map is loaded?
mapDeferred.resolve(map);
}

Expand All @@ -137,15 +136,17 @@

// make a reference to the map object available
// to the controller once it is loaded.
// TODO: will load event even fire if using a web map?
map.on('load', function() {
if (!$attrs.load) {
return;
}
$scope.$apply(function() {
if ($attrs.load) {
if (map.loaded) {
$scope.load()(map);
});
});
} else {
map.on('load', function() {
$scope.$apply(function() {
$scope.load()(map);
});
});
}
}

// listen for changes to $scope.basemap and update map
$scope.$watch('basemap', function(newBasemap, oldBasemap) {
Expand Down
49 changes: 30 additions & 19 deletions test/web-map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ <h2>Webmap Example: {{itemInfo.item.title}}
</h2>
<div ng-hide="isCollapsed" ng-bind-html="itemInfo.item.snippet"></div>
<!-- add map to page and bind to scope map parameters -->
<esri-map id="map" register-as="myMap" webmap-id="4778fee6371d4e83a22786029f30c7e1" center="map.center" zoom="map.zoom" item-info="itemInfo">
<esri-map id="map" register-as="myMap" webmap-id="4778fee6371d4e83a22786029f30c7e1" center="map.center" zoom="map.zoom" item-info="itemInfo" load="mapLoaded">
</esri-map>
<p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
<div>
Expand All @@ -43,25 +43,36 @@ <h2>Webmap Example: {{itemInfo.item.title}}
<script src="lib/angular-esri-map.js"></script>
<!-- run example app controller -->
<script type="text/javascript">
'use strict';
angular.module('esri-webmap-example', ['esri.map', 'ngSanitize'])
.controller('MapController', function ($scope, esriRegistry, esriLoader) {
$scope.map = {
center: {
lng: -122.45,
lat: 37.75
},
zoom: 13
};
$scope.goToBookmark = function(bookmark)
{
esriRegistry.get('myMap').then(function(map){
esriLoader.require('esri/geometry/Extent').then(function(Extent)
{
var extent = new Extent(bookmark.extent);
map.setExtent(extent);
});
});
};
.controller('MapController', function ($scope, esriLoader) {
// we're about to enter callback purgatory,
// so let's bring along a reference to the controller
var self = this;
// this example requires the extent module
// so let's go ahead and load that now
esriLoader.require('esri/geometry/Extent').then(function(Extent) {
$scope.map = {
center: {
lng: -122.45,
lat: 37.75
},
zoom: 13
};
// get a reference to the map object once it's loaded
$scope.mapLoaded = function(map) {
self.mapObj = map;
};
// click handler for bookmark buttons
$scope.goToBookmark = function(bookmark)
{
if (!self.mapObj) {
return;
}
var extent = new Extent(bookmark.extent);
self.mapObj.setExtent(extent);
};
});
});
</script>
</body>
Expand Down

0 comments on commit 97626ab

Please sign in to comment.