Rene,
I still dont understand too much how to incorporate some modules that the arcgis js api has.
For example, i want to use the Search that this example shows: ArcGIS API for JavaScript Sandbox
How i said, im developing a webapp using the following setup:
React JS as framework.
Webpack as server, my config file is the following:
var path = require('path');
module.exports = {
entry: {
login: './static/js/bundles/login.js',
dashboard: './static/js/bundles/dashboard.js'
},
output: {
path: path.join(path.join(__dirname, 'dist'), 'js'),
filename: '[name].js'
},
devServer: {
inline: true,
port: 443,
host: "127.0.0.1"
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-2']
}
}
]
}
};
gulp as task manager that doest this:
var gulp = require('gulp');
var sass = require('gulp-sass');
var swig = require('gulp-swig');
var notify = require("gulp-notify");
function defaultError(type){
return function(err){
console.log(type + ' error : ' + err);
};
}
function dist(path){
return './dist/' + path;
}
function realPath(xs){
return './static/' + xs;
}
var reportError = function (error) {
notify({
title: 'Gulp Task Error',
message: 'Check the console.'
}).write(error);
console.log(error.toString());
this.emit('end');
}
gulp.task('sass', function(){
return gulp.src('./static/css*.png')
.on('error', reportError)
.pipe(gulp.dest(dist('css/images')))
});
gulp.task('html', function(){
return gulp.src('*.html')
.on('error', reportError)
.pipe(gulp.dest(dist('')))
});
gulp.task('js', function(){
return gulp.src('./static/js/vendor*.js')
.on('error', reportError)
.pipe(gulp.dest(dist('')))
});
gulp.task('watch', function(){
gulp.watch(['css*.scss'].map(realPath), ['sass']);
gulp.watch(['*.html'], ['templates']);
});
gulp.task('default', ['sass', 'templates', 'libs','fonts','images','watch', 'css','html']);
And my package.json file contains this.
{
"name": "myprojectname",
"version": "1.0.0",
"description": "For next project.",
"main": "server.js",
"scripts": {
"start": "start npm run dev:server & start npm run gulp",
"dev:server": "webpack-dev-server",
"dev:build": "webpack --progress --colors",
"prod:build": "webpack --optimize-minimize --progress --colors",
"gulp": "gulp",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "..."
},
"author": "",
"license": "ISC",
"bugs": {
"url": "..."
},
"homepage": "...#readme",
"dependencies": {
"highcharts": "~4.2.4",
"lodash": "~4.15.0",
"react": "^0.14.7",
"react-data-grid": "~0.14.18",
"react-dom": "^0.14.7",
"griddle-react": "~0.4.1",
"react-native": "~0.24.1",
"jspdf": "~1.2.61",
"jspdf-autotable": "~2.0.25",
"cookie-handler": "~1.0.1",
"redux": "~3.5.2",
"react-select": "~1.0.0-beta13",
"rutjs": "~0.1.1",
"react-image-gallery": "~0.6.4",
"babel-plugin-transform-decorators-legacy": "~1.3.4",
"validator": "~5.5.0",
"react-bootstrap-modal": "~2.1.0",
"react-modal": "~1.4.0"
},
"devDependencies": {
"babel-core": "^6.6.5",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-notify": "~2.2.0",
"gulp-sass": "^2.2.0",
"gulp-swig": "^0.8.0",
"node-sass": "^3.4.2",
"react-tabs": "^0.5.3",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"react-bootstrap": "~0.30.0"
}
}
In the module that im working i want to load the arcgis api features like search, map like this:
import Search from 'esri/dijit/Search'
The way im doing it now is using the legacy code for all of the developing im working.
For example when i implement Dynamic layers i need to write in this way (and it works).
var layerD = new esri.layers.ArcGISDynamicMapServiceLayer(layers.read_direccionesDyn(),{id:"factigis_d"});
layerD .setImageFormat("png32");
layerD .setVisibleLayers([0]);
mapp.addLayer(layerD );
But for example when i want to write the legacy code for the Search showed in the example,
var search = new esri.dijit.Search({map: mapp}, "search");
search.startup();
it gives me an error saying "Uncaught TypeError: esri.dijit.Search is not a constructor".
If i put: dojo.require(esri.dijit.Search) is says "multiple define".
Im pretty new on developing in this way , and I have been reading all the guides u guys gave me but im still very confused on how to fix my problem loading the esri modules with the setup that i have.
My html is this one: and there i show where i put the arcgis js api
<html lang="es">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
<link rel="shortcut icon" href="">
<title>GISRED - FactiGIS FRONTOFFICE</title>
<link rel="stylesheet" type="text/css" href="arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="arcgis_js_api/library/3.16/3.16/esri/css/esri.css" />
<link rel="stylesheet" href="static/js/vendor/bootstrap.min.css" />
<link rel="stylesheet" href="static/js/vendor/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="dist/css/factigis.css" />
<script src="static/js/vendor/jspdf/jspdf.min.js"></script>
<script src="static/js/vendor/jspdf/jspdf.plugin.autotable.js"></script>
<script src="static/js/vendor/jspdf/faker.min.js"></script>
<link rel="stylesheet" href="dist/css/react-select.css">
</head>
<body class="bodyfactigis">
<div id="myFactigis_FrontOffice" class="myFactigis_FrontOffice"></div>
<script type="text/javascript" src="arcgis_js_api/library/3.16/3.16/init.js"></script>
<script src="static/js/vendor/jquery.min.js"></script>
<script src="static/js/vendor/lodash.core.js"></script>
<script src="static/js/vendor/jQueryRotate.js"></script>
<script src="factigisFrontoffice.js"></script>
</body>
</html>
I hope u guys that understand more than me about this could guide me, i really want to use the complete arcgis js api in my app without changing the way im working too much.
Thanks in advice! 😞
!
