Skip to content

Commit ea58c20

Browse files
daveegrantdaveegrant
authored
#7 - Updated detail map directive to accept GeoJSON formatted geometry data. (#8)
1 parent b6292a0 commit ea58c20

File tree

3 files changed

+309
-51
lines changed

3 files changed

+309
-51
lines changed

‎dist/ml-esri-maps-ng.js‎

Lines changed: 154 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
restrict: 'E',
1818
scope: {
1919
geometry: '=',
20+
geometries: '=',
2021
baseMap: '=',
2122
zoom: '=',
2223
mapId: '='
@@ -39,27 +40,12 @@
3940
ctrl.mapZoom = $scope.zoom ? $scope.zoom : 6;
4041
ctrl.mapGeometry = null;
4142

42-
// Generate objects based on the provided geometry
43-
if ($scope.geometry && angular.isArray($scope.geometry)) {
44-
// Use multi-point when an array-of-arrays.
45-
if (angular.isArray($scope.geometry[0])) {
46-
for (i=0; i < $scope.geometry.length; i++) {
47-
if (!isNaN($scope.geometry[i][0]) && $scope.geometry[i].length === 2) {
48-
geometryData.push({
49-
'type': 'point',
50-
'latitude': $scope.geometry[i][0],
51-
'longitude': $scope.geometry[i][1]
52-
});
53-
}
54-
}
55-
} else if (!isNaN($scope.geometry[0]) && $scope.geometry.length === 2) {
56-
geometryData.push({
57-
'type': 'point',
58-
'latitude': $scope.geometry[0],
59-
'longitude': $scope.geometry[1]
60-
});
43+
if ($scope.geometry) {
44+
geometryData = processGeometry($scope.geometry);
45+
}
6146

62-
}
47+
if ($scope.geometries) {
48+
geometryData = processGeoJSON($scope.geometries);
6349
}
6450

6551
// Have to wait for scope value of <mapId> to be updated in view
@@ -70,19 +56,148 @@
7056
}, 300);
7157
});
7258

59+
/**
60+
* Processes the <geometry> scope variable which can contain point data.
61+
*/
62+
function processGeometry(geometry) {
63+
var geometryData = [];
64+
65+
// Generate objects based on the provided geometry
66+
if (geometry && angular.isArray(geometry)) {
67+
// Use multi-point when an array-of-arrays.
68+
if (angular.isArray(geometry[0])) {
69+
for (i=0; i < geometry.length; i++) {
70+
if (!isNaN(geometry[i][0]) && geometry[i].length === 2) {
71+
geometryData.push({
72+
'type': 'point',
73+
'latitude': geometry[i][0],
74+
'longitude': geometry[i][1]
75+
});
76+
}
77+
}
78+
}
79+
else if (!isNaN(geometry[0]) && geometry.length === 2) {
80+
geometryData.push({
81+
'type': 'point',
82+
'latitude': geometry[0],
83+
'longitude': geometry[1]
84+
});
85+
86+
}
87+
}
88+
89+
return geometryData;
90+
}
91+
92+
/**
93+
* Processes the <geometry> scope variable which can contain point data.
94+
*/
95+
function processGeoJSON(geoJsonData) {
96+
var geometryData = [];
97+
var convertedData = null;
98+
99+
// Generate objects based on the provided geometry
100+
if (geoJsonData) {
101+
if (angular.isArray(geoJsonData)) {
102+
for (var i=0; i < geoJsonData.length; i++) {
103+
convertedData = convertSingleGeoJSON(geoJsonData[i]);
104+
if (convertedData) {
105+
if (angular.isArray(convertedData)) {
106+
geometryData = geometryData.concat(convertedData);
107+
}
108+
else {
109+
geometryData.push(convertedData);
110+
}
111+
}
112+
}
113+
}
114+
else {
115+
convertedData = convertSingleGeoJSON(geoJsonData);
116+
if (convertedData) {
117+
if (angular.isArray(convertedData)) {
118+
geometryData = geometryData.concat(convertedData);
119+
}
120+
else {
121+
geometryData.push(convertedData);
122+
}
123+
}
124+
}
125+
}
126+
127+
return geometryData;
128+
}
129+
130+
function convertSingleGeoJSON(geoJsonData) {
131+
var geometryData = null;
132+
133+
if (geoJsonData && geoJsonData.type) {
134+
if (geoJsonData.type === 'Point') {
135+
geometryData = {
136+
'type': 'point',
137+
'latitude': geoJsonData.coordinates[1],
138+
'longitude': geoJsonData.coordinates[0]
139+
};
140+
}
141+
else if (geoJsonData.type === 'MultiPoint') {
142+
geometryData = {
143+
'type': 'multipoint',
144+
'points': geoJsonData.coordinates
145+
};
146+
}
147+
else if (geoJsonData.type === 'LineString') {
148+
geometryData = {
149+
'type': 'polyline',
150+
'paths': [ geoJsonData.coordinates ]
151+
};
152+
}
153+
else if (geoJsonData.type === 'MultiLineString') {
154+
geometryData = {
155+
'type': 'polyline',
156+
'paths': geoJsonData.coordinates
157+
};
158+
}
159+
else if (geoJsonData.type === 'Polygon') {
160+
geometryData = {
161+
'type': 'polygon',
162+
'rings': geoJsonData.coordinates
163+
};
164+
}
165+
else if (geoJsonData.type === 'MultiPolygon') {
166+
geometryData = [];
167+
for (var i=0; i < geoJsonData.coordinates.length; i++) {
168+
geometryData.push(
169+
{
170+
'type': 'polygon',
171+
'rings': geoJsonData.coordinates[i]
172+
}
173+
);
174+
}
175+
}
176+
else {
177+
console.log('Unknown GeoJSON geometry type: ', geoJsonData.type);
178+
}
179+
}
180+
181+
return geometryData;
182+
}
183+
73184
/**
74185
* Initializes the map with a single feature layer for locations.
75186
*/
76187
function initMap(geoData) {
77188
require([
78189
'esri/map', 'esri/graphic', 'esri/symbols/SimpleFillSymbol',
79-
'esri/symbols/SimpleMarkerSymbol', 'esri/layers/GraphicsLayer',
190+
'esri/symbols/SimpleMarkerSymbol', 'esri/symbols/SimpleLineSymbol',
191+
'esri/layers/GraphicsLayer',
80192
'esri/geometry/Point', 'esri/geometry/Polygon',
193+
'esri/geometry/Multipoint', 'esri/geometry/Polyline',
81194
'esri/graphicsUtils', 'esri/Color'
82195
], function(
83196
Map, Graphic, SimpleFillSymbol,
84-
SimpleMarkerSymbol, GraphicsLayer,
197+
SimpleMarkerSymbol, SimpleLineSymbol,
198+
GraphicsLayer,
85199
Point, Polygon,
200+
Multipoint, Polyline,
86201
graphicsUtils, Color
87202
)
88203
{
@@ -115,9 +230,16 @@
115230
for (var i=0; i < geoData.length; i++) {
116231
if (geoData[i].type === 'point') {
117232
ctrl.mapGeometry.push( new Point(geoData[i]) );
118-
} else if (geoData[i].type === 'polygon') {
233+
}
234+
else if (geoData[i].type === 'multipoint') {
235+
ctrl.mapGeometry.push( new Multipoint(geoData[i]) );
236+
}
237+
else if (geoData[i].type === 'polygon') {
119238
ctrl.mapGeometry.push( new Polygon(geoData[i]) );
120239
}
240+
else if (geoData[i].type === 'polyline') {
241+
ctrl.mapGeometry.push( new Polyline(geoData[i]) );
242+
}
121243
}
122244
}
123245
}
@@ -129,11 +251,18 @@
129251
if (geometry && geometry.length > 0) {
130252
for (var i=0; i < geometry.length; i++) {
131253
var symbol = null;
132-
if (geometry[i] instanceof Point) {
254+
if (geometry[i].type === 'point') {
255+
symbol = new SimpleMarkerSymbol().setColor(new Color([0, 0, 0, 0.60]));
256+
}
257+
else if (geometry[i].type === 'multipoint') {
133258
symbol = new SimpleMarkerSymbol().setColor(new Color([0, 0, 0, 0.60]));
134-
} else if (geometry[i] instanceof Polygon) {
259+
}
260+
else if (geometry[i].type === 'polygon') {
135261
symbol = new SimpleFillSymbol().setColor( new Color([0, 0, 0, 0.60]) );
136262
}
263+
else if (geometry[i].type === 'polyline') {
264+
symbol = new SimpleLineSymbol().setColor( new Color([0, 0, 0, 0.60]) );
265+
}
137266

138267
if (symbol) {
139268
var graphic = new Graphic(geometry[i], symbol);

0 commit comments

Comments
 (0)