Skip to content

Instantly share code, notes, and snippets.

@warlord0

warlord0/esriFunctions.js

Last active Apr 8, 2019
Embed
What would you like to do?
ESRI ArcGIS Vue Mixin
import {
loadScript,
loadModules
} from 'esri-loader'
// preload the ArcGIS API
const options = {
url: '//js.arcgis.com/3.27/',
}
loadScript(options)
export default {
data () {
return {
esri: {},
// esriModules are called by the parent component to be included
// at the time of mixin use within a component
esriModules: []
}
},
created () {
// These are the base modules required to use an ESRI map with this mixin
let modules = [
'esri/map',
'esri/symbols/SimpleMarkerSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/Color',
'esri/graphic'
]
// Iterate the loaded modules to create them as sublcasses of this.esri
// using the last part of their prototype declared class name
let declaredClass
loadedModules.forEach((loadedModule, i) => {
if (loadedModule.prototype) {
declaredClass = loadedModule.prototype.declaredClass
this.esri[declaredClass.substring(declaredClass.lastIndexOf('.') + 1)] =
loadedModule
} else {
this.esri[modules[i].substring(modules[i].lastIndexOf('/') + 1)] = loadedModule
}
})
loadModules(modules)
.then(loadedModules => {
// Iterate the loaded modules to create them as sublcasses of this.esri
// using the last part of their prototype declared class name
let declaredClass
loadedModules.forEach(loadedModule => {
declaredClass = loadedModule.prototype.declaredClass
this.esri[declaredClass.substring(declaredClass.lastIndexOf('.') + 1)] =
loadedModule
})
// Create the map
this.map = new this.esri.Map(this.$refs.map, {
basemap: 'topo',
zoom: 17
})
this.map.on('load', () => {
console.log('Map loaded') // eslint-disable-line no-console
this.onMapLoaded()
})
this.map.on('click', (e) => {
this.map.graphics.clear() // Remove any user clicked graphics
// Now add a symbol to show where we clicked
let pointSymbol = new this.esri.SimpleMarkerSymbol(
this.esri.SimpleMarkerSymbol.STYLE_CROSS, 22,
new this.esri.SimpleLineSymbol(this.esri.SimpleLineSymbol.STYLE_SOLID,
new this.esri.Color([0, 0, 0]), 4)
)
let clickPointGraphic = new this.esri.Graphic(e.mapPoint, pointSymbol)
this.map.graphics.add(clickPointGraphic)
this.onMapClicked(e)
})
}).then(() => {
this.onModulesLoaded()
})
.catch(err => {
console.error(err) // eslint-disable-line no-console
})
},
methods: {
/**
* onMapClicked fired when the map is clicked
* @param event e Map click event
* @return void
*/
onMapClicked (e) {
// Mixin function that can be overridden in the parent component
},
/**
* onMapLoaded fired when the map is loaded
* @return void
*/
onMapLoaded () {
// Mixin function that can be overridden in the parent component
},
/**
* onModulesLoaded fire when all ESRI modules have been loaded
* @return void
*/
onModulesLoaded () {
// Mixin function that can be overridden in the parent component
}
}
}
@LockonZero

This comment has been minimized.

Copy link

@LockonZero LockonZero commented Apr 4, 2019

Quick question about the module loading, the part in lines 31-42 is almost the same(the if clause is missing) as in 46-53. What purpose does it serve?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment