Created
April 19, 2018 15:45
-
-
Save jplew/869db9a0db818d212a3d98ae5ac58fd6 to your computer and use it in GitHub Desktop.
ArcGIS Inline example working
This file contains hidden or 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
/* | |
Licensed under the Apache License, Version 2.0 (the "License"); | |
you may not use this file except in compliance with the License. | |
You may obtain a copy of the License at | |
http://www.apache.org/licenses/LICENSE-2.0 | |
Unless required by applicable law or agreed to in writing, software | |
distributed under the License is distributed on an "AS IS" BASIS, | |
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
See the License for the specific language governing permissions and | |
limitations under the License. | |
*/ | |
import { | |
Component, | |
OnInit, | |
ViewChild, | |
ElementRef, | |
Input, | |
Output, | |
EventEmitter | |
} from '@angular/core' | |
import { loadModules } from 'esri-loader' | |
// import esri = __esri | |
@Component({ | |
selector: 'app-map', | |
templateUrl: './map.component.html', | |
styleUrls: ['./map.component.css'] | |
}) | |
export class MapComponent implements OnInit { | |
// Private vars with default values | |
private _zoom = 10 | |
private _center = [0.1278, 51.5074] | |
private _basemap = 'streets' | |
@Input() | |
set zoom(zoom: number) { | |
this._zoom = zoom | |
} | |
get zoom(): number { | |
return this._zoom | |
} | |
@Input() | |
set center(center: any[]) { | |
this._center = center | |
} | |
get center(): any[] { | |
return this._center | |
} | |
@Input() | |
set basemap(basemap: string) { | |
this._basemap = basemap | |
} | |
get basemap(): string { | |
return this._basemap | |
} | |
map: __esri.Map | |
view: __esri.MapView | |
@Output() mapLoaded = new EventEmitter<boolean>() | |
// this is needed to be able to create the MapView at the DOM element in this component | |
@ViewChild('mapViewNode') private mapViewEl: ElementRef | |
/************************************************** | |
* Define the renderer for symbolizing earthquakes | |
**************************************************/ | |
quakesRenderer = { | |
type: 'simple', // autocasts as new SimpleRenderer() | |
symbol: { | |
type: 'simple-marker', // autocasts as new SimpleMarkerSymbol() | |
style: 'circle', | |
size: 20, | |
color: [211, 255, 0, 0], | |
outline: { | |
width: 1, | |
color: '#FF0055', | |
style: 'solid' | |
} | |
}, | |
visualVariables: [ | |
{ | |
type: 'size', | |
field: 'mag', // earthquake magnitude | |
valueUnit: 'unknown', | |
minDataValue: 2, | |
maxDataValue: 7, | |
// Define size of mag 2 quakes based on scale | |
minSize: { | |
type: 'size', | |
expression: 'view.scale', | |
stops: [ | |
{ | |
value: 1128, | |
size: 12 | |
}, | |
{ | |
value: 36111, | |
size: 12 | |
}, | |
{ | |
value: 9244649, | |
size: 6 | |
}, | |
{ | |
value: 73957191, | |
size: 4 | |
}, | |
{ | |
value: 591657528, | |
size: 2 | |
} | |
] | |
}, | |
// Define size of mag 7 quakes based on scale | |
maxSize: { | |
type: 'size', | |
expression: 'view.scale', | |
stops: [ | |
{ | |
value: 1128, | |
size: 80 | |
}, | |
{ | |
value: 36111, | |
size: 60 | |
}, | |
{ | |
value: 9244649, | |
size: 50 | |
}, | |
{ | |
value: 73957191, | |
size: 50 | |
}, | |
{ | |
value: 591657528, | |
size: 25 | |
} | |
] | |
} | |
} | |
] | |
} | |
fields = [ | |
{ | |
name: 'ObjectID', | |
alias: 'ObjectID', | |
type: 'oid' | |
}, | |
{ | |
name: 'title', | |
alias: 'title', | |
type: 'string' | |
}, | |
{ | |
name: 'type', | |
alias: 'type', | |
type: 'string' | |
}, | |
{ | |
name: 'place', | |
alias: 'place', | |
type: 'string' | |
}, | |
{ | |
name: 'depth', | |
alias: 'depth', | |
type: 'string' | |
}, | |
{ | |
name: 'time', | |
alias: 'time', | |
type: 'date' | |
}, | |
{ | |
name: 'mag', | |
alias: 'Magnitude', | |
type: 'double' | |
}, | |
{ | |
name: 'url', | |
alias: 'url', | |
type: 'string' | |
}, | |
{ | |
name: 'mmi', | |
alias: 'intensity', | |
type: 'double' | |
}, | |
{ | |
name: 'felt', | |
alias: 'Number of felt reports', | |
type: 'double' | |
}, | |
{ | |
name: 'sig', | |
alias: 'significance', | |
type: 'double' | |
} | |
] | |
pTemplate = { | |
title: '{title}', | |
content: [ | |
{ | |
type: 'fields', | |
fieldInfos: [ | |
{ | |
fieldName: 'place', | |
label: 'Location', | |
visible: true | |
}, | |
{ | |
fieldName: 'time', | |
label: 'Date and time', | |
visible: true | |
}, | |
{ | |
fieldName: 'mag', | |
label: 'Magnitude', | |
visible: true | |
}, | |
{ | |
fieldName: 'mmi', | |
label: 'Intensity', | |
visible: true | |
}, | |
{ | |
fieldName: 'depth', | |
label: 'Depth', | |
visible: true | |
}, | |
{ | |
fieldName: 'felt', | |
label: 'Number who felt the quake', | |
visible: true, | |
format: { | |
digitSeparator: true, | |
places: 0 | |
} | |
}, | |
{ | |
fieldName: 'sig', | |
label: 'Significance', | |
visible: true | |
}, | |
{ | |
fieldName: 'url', | |
label: 'More info', | |
visible: true | |
} | |
] | |
} | |
], | |
fieldInfos: [ | |
{ | |
fieldName: 'time', | |
format: { | |
dateFormat: 'short-date-short-time' | |
} | |
} | |
] | |
} | |
constructor() {} | |
public ngOnInit() { | |
const dojoConfig = { | |
has: { | |
'esri-featurelayer-webgl': 1 | |
} | |
} | |
loadModules( | |
[ | |
'esri/views/MapView', | |
'esri/Map', | |
'esri/geometry/Point', | |
'esri/widgets/Legend', | |
'esri/request', | |
'esri/layers/FeatureLayer' | |
], | |
{ dojoConfig } | |
) | |
.then( | |
([ | |
MapView, | |
EsriMap, | |
EsriPoint, | |
EsriLegend, | |
EsriRequest, | |
EsriFeatureLayer | |
]) => { | |
// EsriConfig.request.proxyUrl = '/resource-proxy/Java/proxy.jsp' | |
/************************************************** | |
* Create the map and view | |
**************************************************/ | |
// request GeoJson data from USGS remote server | |
// const url = | |
// 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson' | |
// const url = 'assets/uae.geojson' | |
// EsriRequest(url, { | |
// responseType: 'json' | |
// }) | |
// .then(response => { | |
// // The requested data | |
// console.log('received response') | |
// const geoJson = response.data | |
// console.log(geoJson) | |
// }) | |
// .catch(err => console.error(err)) | |
this.map = new EsriMap({ | |
basemap: 'dark-gray' | |
}) | |
// Create MapView | |
this.view = new MapView({ | |
container: this.mapViewEl.nativeElement, | |
map: this.map, | |
center: [-144.492, 62.771], | |
zoom: 5, | |
// customize ui padding for legend placement | |
ui: { | |
padding: { | |
bottom: 15, | |
right: 0 | |
} | |
} | |
}) | |
this.view.when( | |
() => { | |
// All the resources in the MapView and the map have loaded. Now execute additional processes | |
console.log('it loaded') | |
EsriRequest('assets/week.json', { | |
responseType: 'json' | |
}) | |
.then(res => { | |
const geoJson = res.data | |
// Create an array of Graphics from each GeoJSON feature | |
return geoJson.features.map((feature, i) => { | |
return { | |
geometry: new EsriPoint({ | |
x: feature.geometry.coordinates[0], | |
y: feature.geometry.coordinates[1] | |
}), | |
// select only the attributes you care about | |
attributes: { | |
ObjectID: i, | |
title: feature.properties.title, | |
type: feature.properties.type, | |
place: feature.properties.place, | |
depth: feature.geometry.coordinates[2] + ' km', | |
time: feature.properties.time, | |
mag: feature.properties.mag, | |
mmi: feature.properties.mmi, | |
felt: feature.properties.felt, | |
sig: feature.properties.sig, | |
url: feature.properties.url | |
} | |
} | |
}) | |
}) // then send it to the createGraphics() method | |
.then(res => { | |
const lyr = new EsriFeatureLayer({ | |
source: res, // autocast as an array of esri/Graphic | |
// create an instance of esri/layers/support/Field for each field object | |
fields: this.fields, // This is required when creating a layer from Graphics | |
objectIdField: 'ObjectID', // This must be defined when creating a layer from Graphics | |
renderer: this.quakesRenderer, // set the visualization on the layer | |
spatialReference: { | |
wkid: 4326 | |
}, | |
geometryType: 'point', // Must be set when creating a layer from Graphics | |
popupTemplate: this.pTemplate | |
}) | |
this.map.add(lyr) | |
return lyr | |
}) // when graphics are created, create the layer | |
.catch(err => console.error(err)) | |
// .then(this.createLegend, view) // when layer is created, create the legend | |
this.mapLoaded.emit(true) | |
}, | |
err => { | |
console.error(err) | |
} | |
) | |
} | |
) | |
.catch(err => { | |
console.error(err) | |
}) | |
} // ngOnInit | |
/************************************************** | |
* Create graphics with returned geojson data | |
**************************************************/ | |
createGraphics(response) { | |
console.log('received response') | |
const myData = response.data | |
console.log(myData) | |
// raw GeoJSON data | |
const geoJson = response.data | |
// Create an array of Graphics from each GeoJSON feature | |
return geoJson.features.map((feature, i) => { | |
return { | |
geometry: new __esri.Point({ | |
x: feature.geometry.coordinates[0], | |
y: feature.geometry.coordinates[1] | |
}), | |
// select only the attributes you care about | |
attributes: { | |
ObjectID: i, | |
title: feature.properties.title, | |
type: feature.properties.type, | |
place: feature.properties.place, | |
depth: feature.geometry.coordinates[2] + ' km', | |
time: feature.properties.time, | |
mag: feature.properties.mag, | |
mmi: feature.properties.mmi, | |
felt: feature.properties.felt, | |
sig: feature.properties.sig, | |
url: feature.properties.url | |
} | |
} | |
}) | |
} | |
/************************************************** | |
* Create a FeatureLayer with the array of graphics | |
**************************************************/ | |
createLayer(graphics) { | |
const lyr = new __esri.FeatureLayer({ | |
source: graphics, // autocast as an array of esri/Graphic | |
// create an instance of esri/layers/support/Field for each field object | |
fields: this.fields, // This is required when creating a layer from Graphics | |
objectIdField: 'ObjectID', // This must be defined when creating a layer from Graphics | |
renderer: new __esri.SimpleRenderer(this.quakesRenderer), // set the visualization on the layer | |
spatialReference: { | |
wkid: 4326 | |
}, | |
geometryType: 'point', // Must be set when creating a layer from Graphics | |
popupTemplate: this.pTemplate | |
}) | |
this.map.add(lyr) | |
return lyr | |
} | |
/****************************************************************** | |
* Add layer to layerInfos in the legend | |
******************************************************************/ | |
createLegend(layer, view) { | |
// if the legend already exists, then update it with the new layer | |
// if (legend) { | |
// legend.layerInfos = [ | |
// { | |
// layer, | |
// title: 'Magnitude' | |
// } | |
// ] | |
// } else { | |
const legend = new __esri.Legend({ | |
view, | |
layerInfos: [ | |
{ | |
layer, | |
title: 'Earthquake' | |
} | |
] | |
}) | |
// } | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment