Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added esri-loader and map/scene routes
install esri-loader create map/scene routes
- Loading branch information
0 parents
commit 97c602d
Showing
12 changed files
with
330 additions
and
0 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"presets": [ | ||
["env", { "modules": false }], | ||
"stage-3" | ||
] | ||
} |
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,9 @@ | ||
root = true | ||
|
||
[*] | ||
charset = utf-8 | ||
indent_style = space | ||
indent_size = 2 | ||
end_of_line = lf | ||
insert_final_newline = true | ||
trim_trailing_whitespace = true |
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,12 @@ | ||
.DS_Store | ||
node_modules/ | ||
dist/ | ||
npm-debug.log | ||
yarn-error.log | ||
|
||
# Editor directories and files | ||
.idea | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln |
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,18 @@ | ||
# esri-vue-cli-example | ||
|
||
An example of how to use [esri-loader](https://github.com/Esri/esri-loader) in an application built with [vue-cli](https://github.com/vuejs/vue-cli) | ||
|
||
## Build Setup | ||
|
||
``` bash | ||
# install dependencies | ||
npm install | ||
|
||
# serve with hot reload at localhost:8080 | ||
npm run dev | ||
|
||
# build for production with minification | ||
npm run build | ||
``` | ||
|
||
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). |
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,11 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>esri-vue-cli-example</title> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script src="/dist/build.js"></script> | ||
</body> | ||
</html> |
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,35 @@ | ||
{ | ||
"name": "esri-vue-cli-example", | ||
"description": "An example of how to use esri-loader in an application built with vue-cli", | ||
"version": "1.0.0", | ||
"author": "Tom Wayson <tom@tomwayson.com>", | ||
"license": "Apache-2.0", | ||
"private": true, | ||
"scripts": { | ||
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", | ||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules" | ||
}, | ||
"dependencies": { | ||
"esri-loader": "^1.6.2", | ||
"vue": "^2.5.11", | ||
"vue-router": "^3.0.1" | ||
}, | ||
"browserslist": [ | ||
"> 1%", | ||
"last 2 versions", | ||
"not ie <= 8" | ||
], | ||
"devDependencies": { | ||
"babel-core": "^6.26.0", | ||
"babel-loader": "^7.1.2", | ||
"babel-preset-env": "^1.6.0", | ||
"babel-preset-stage-3": "^6.24.1", | ||
"cross-env": "^5.0.5", | ||
"css-loader": "^0.28.7", | ||
"file-loader": "^1.1.4", | ||
"vue-loader": "^13.0.5", | ||
"vue-template-compiler": "^2.4.4", | ||
"webpack": "^3.6.0", | ||
"webpack-dev-server": "^2.9.1" | ||
} | ||
} |
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,54 @@ | ||
<template> | ||
<div id="app"> | ||
<img src="./assets/logo.png"> | ||
<h1>{{ msg }}</h1> | ||
<ul> | ||
<li><router-link to="/map">2D Map</router-link></li> | ||
<li><router-link to="/scene">3D Scene</router-link></li> | ||
</ul> | ||
<router-view></router-view> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
name: 'app', | ||
data () { | ||
return { | ||
msg: 'Welcome to Your Vue.js App' | ||
} | ||
} | ||
} | ||
</script> | ||
|
||
<style> | ||
/* esri styles */ | ||
@import url('https://js.arcgis.com/4.6/esri/css/main.css'); | ||
#app { | ||
font-family: 'Avenir', Helvetica, Arial, sans-serif; | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
text-align: center; | ||
color: #2c3e50; | ||
margin-top: 60px; | ||
} | ||
h1, h2 { | ||
font-weight: normal; | ||
} | ||
ul { | ||
list-style-type: none; | ||
padding: 0; | ||
} | ||
li { | ||
display: inline-block; | ||
margin: 0 10px; | ||
} | ||
a { | ||
color: #42b983; | ||
} | ||
</style> |
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,37 @@ | ||
<template> | ||
<div ref="map" class="map"></div> | ||
</template> | ||
|
||
<script> | ||
import { loadModules } from 'esri-loader'; | ||
export default { | ||
name: 'map', | ||
mounted: function () { | ||
loadModules(['esri/views/MapView', 'esri/WebMap']) | ||
.then(([MapView, WebMap]) => { | ||
// then we load a web map from an id | ||
var webmap = new WebMap({ | ||
portalItem: { // autocasts as new PortalItem() | ||
id: 'f2e9b762544945f390ca4ac3671cfa72' | ||
} | ||
}); | ||
// and we show that map in a container w/ id #viewDiv | ||
var view = new MapView({ | ||
map: webmap, | ||
container: this.$refs.map | ||
}); | ||
}) | ||
.catch(err => { | ||
// handle any errors | ||
console.error(err); | ||
}); | ||
} | ||
} | ||
</script> | ||
|
||
<style> | ||
.map { | ||
height: 500px; | ||
} | ||
</style> |
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,39 @@ | ||
<template> | ||
<div ref="scene" class="scene"></div> | ||
</template> | ||
|
||
<script> | ||
import { loadModules } from 'esri-loader'; | ||
export default { | ||
name: 'map', | ||
mounted: function () { | ||
loadModules(['esri/views/SceneView', 'esri/Map']) | ||
.then(([SceneView, Map]) => { | ||
// show that scene in a container | ||
var view = new SceneView({ | ||
// An instance of Map or WebScene | ||
map: new Map({ | ||
basemap: 'hybrid', | ||
ground: 'world-elevation', | ||
}), | ||
container: this.$refs.scene, | ||
camera: { | ||
position: [7.654, 45.919, 5184], | ||
tilt: 80 | ||
} | ||
}); | ||
}) | ||
.catch(err => { | ||
// handle any errors | ||
console.error(err); | ||
}); | ||
} | ||
} | ||
</script> | ||
|
||
<style> | ||
.scene { | ||
height: 500px; | ||
} | ||
</style> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,31 @@ | ||
import Vue from 'vue' | ||
import VueRouter from 'vue-router' | ||
import App from './App.vue' | ||
import Map from './Map.vue' | ||
import Scene from './Scene.vue' | ||
|
||
Vue.use(VueRouter) | ||
|
||
// 2. Define some routes | ||
// Each route should map to a component. The "component" can | ||
// either be an actual component constructor created via | ||
// `Vue.extend()`, or just a component options object. | ||
// We'll talk about nested routes later. | ||
const routes = [ | ||
{ path: '/map', component: Map }, | ||
{ path: '/scene', component: Scene } | ||
] | ||
|
||
// 3. Create the router instance and pass the `routes` option | ||
// You can pass in additional options here, but let's | ||
// keep it simple for now. | ||
const router = new VueRouter({ | ||
routes // short for `routes: routes` | ||
}) | ||
|
||
|
||
new Vue({ | ||
el: '#app', | ||
router, | ||
render: h => h(App) | ||
}) |
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,78 @@ | ||
var path = require('path') | ||
var webpack = require('webpack') | ||
|
||
module.exports = { | ||
entry: './src/main.js', | ||
output: { | ||
path: path.resolve(__dirname, './dist'), | ||
publicPath: '/dist/', | ||
filename: 'build.js' | ||
}, | ||
module: { | ||
rules: [ | ||
{ | ||
test: /\.css$/, | ||
use: [ | ||
'vue-style-loader', | ||
'css-loader' | ||
], | ||
}, { | ||
test: /\.vue$/, | ||
loader: 'vue-loader', | ||
options: { | ||
loaders: { | ||
} | ||
// other vue-loader options go here | ||
} | ||
}, | ||
{ | ||
test: /\.js$/, | ||
loader: 'babel-loader', | ||
exclude: /node_modules/ | ||
}, | ||
{ | ||
test: /\.(png|jpg|gif|svg)$/, | ||
loader: 'file-loader', | ||
options: { | ||
name: '[name].[ext]?[hash]' | ||
} | ||
} | ||
] | ||
}, | ||
resolve: { | ||
alias: { | ||
'vue$': 'vue/dist/vue.esm.js' | ||
}, | ||
extensions: ['*', '.js', '.vue', '.json'] | ||
}, | ||
devServer: { | ||
historyApiFallback: true, | ||
noInfo: true, | ||
overlay: true | ||
}, | ||
performance: { | ||
hints: false | ||
}, | ||
devtool: '#eval-source-map' | ||
} | ||
|
||
if (process.env.NODE_ENV === 'production') { | ||
module.exports.devtool = '#source-map' | ||
// http://vue-loader.vuejs.org/en/workflow/production.html | ||
module.exports.plugins = (module.exports.plugins || []).concat([ | ||
new webpack.DefinePlugin({ | ||
'process.env': { | ||
NODE_ENV: '"production"' | ||
} | ||
}), | ||
new webpack.optimize.UglifyJsPlugin({ | ||
sourceMap: true, | ||
compress: { | ||
warnings: false | ||
} | ||
}), | ||
new webpack.LoaderOptionsPlugin({ | ||
minimize: true | ||
}) | ||
]) | ||
} |