I building building a basic application with the ESRI javascript API 3.24, accepting that I don't have ArcGIS Server or AGO, is there any approach to add nearby geojson record to the guide, this inquiry had been asked commonly.
I don't have to utilize Terraformer. I am attaching my geojson document and the code I have up until now, there is no error, yet geojson isn't appearing in the map.
In the event that there is an answer for this would i be able to apply it on WAB, or is there any out of box widget to add local geojson file to the map (on map load ).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.24/esri/css/esri.css">
<script src="http://js.arcgis.com/3.24/"></script>
<!--<script src="travel6.json" type="text/javascript"></script> -->
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/map",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/FeatureSet",
"esri/layers/FeatureLayer",
"esri/request",
"esri/geometry/Polygon",
"esri/graphic",
"dojo/on",
"dojo/_base/array",
"dojo/domReady!"
], function(
Map, SimpleMarkerSymbol, Color, SimpleRenderer, SimpleFillSymbol,SimpleLineSymbol,
FeatureSet, FeatureLayer , esritRequest, Polygon, Graphic, on, array
) {
var map = new Map("map", {
basemap : "streets",
center : [-96.68338, 33.02529],
zoom : 18
});
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255,0,0]), 2),new Color([255,255,0,0.25])
);
// First we create an empty feature collection:
var featureCollection = {
"layerDefinition": null,
"featureSet": {
"features": [],
"geometryType": "esriGeometryPolygon"
}
};
//give the feature collection a layer definition:
featureCollection.layerDefinition = {
"geometryType": "esriGeometryPolygon",
"objectIdField": "ObjectID",
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol": {
"type" : "esriSFS",
"style" : "esriSFSSolid",
"color": [
31,
121,
180,
255],
"outline": {
"type": "esriSLS",
"style": "esriSLSSolid",
"color": [ 110,110, 110, 255],
width: 0.4}
}
}
},
"fields": [{
"name" : "OBJECTID",
"type" : "esriFieldTypeOID",
"alias" : "OBJECTID"
},
{
"name" : "RectangleID",
"type" : "esriFieldTypeString",
"alias" : "RectangleID",
"length" : 10
},
{
"name" : "section",
"type" : "esriFieldTypeString",
"alias" : "section",
"length" : 2
},
{
"name" : "lot",
"type" : "esriFieldTypeString",
"alias" : "lot",
"length" : 3
},
{
"name" : "space",
"type" : "esriFieldTypeString",
"alias" : "space",
"length" : 4
},
{
"name" : "spaceid",
"type" : "esriFieldTypeString",
"alias" : "spaceid",
"length" : 10
},
{
"name" : "Shape_Length",
"type" : "esriFieldTypeDouble",
"alias" : "Shape_Length"
},
{
"name" : "Shape_Area",
"type" : "esriFieldTypeDouble",
"alias" : "Shape_Area"
}
]
};
//featureCollection object is in the correct format to be passed in to a FeatureLayer:
featureLayer = new FeatureLayer(featureCollection, {
id: 'myFeatureLayer',
// fields: fields, // This is required when creating a layer from Graphics
ObjectIdField: "OBJECTID", // This must be defined when creating a layer from Graphics
spatialReference: {
wkid: 4326
},
mode: FeatureLayer.MODE_ONDEMAND
});
function requestData() {
var requestHandle = esriRequest({
url: "ab_py_wms.json",
callbackParamName: "jsoncallback"
});
requestHandle.then(requestSucceeded, requestFailed);
}
function requestSucceeded(response, io) {
//loop through the items and add to the feature layer
var features = [];
array.forEach(response.features, function(item) {
var attr = {};
//pull in any additional attributes if required
attr["section"] = item.properties.section;
var geometry = new polygon(
{rings: item.geometry.coordinates});
var graphic = new Graphic(geometry);
graphic.setAttributes(attr);
features.push(graphic);
});
featureLayer.applyEdits(features, null, null);
}
function requestFailed(error) {
console.log('failed');
}
map.addLayers([featureLayer]);
console.log(featureLayer);
});
</script>
</head>
<body class='claro'>
<div id="map" style="width:900px; height:600px;" ></div>
</body>
</html>
Solved! Go to Solution.
Husham,
Here is your code fixed and working now.
Your issues:
You will need to start a new question in the WAB space for your WAB related portion of this question.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.24/esri/css/esri.css">
<script src="http://js.arcgis.com/3.24/"></script>
<!--<script src="travel6.json" type="text/javascript"></script> -->
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/map",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/FeatureSet",
"esri/layers/FeatureLayer",
"esri/request",
"esri/geometry/Polygon",
"esri/graphic",
"dojo/on",
"dojo/_base/array",
"dojo/domReady!"
], function(
Map, SimpleMarkerSymbol, Color, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol,
FeatureSet, FeatureLayer, esriRequest, Polygon, Graphic, on, array
) {
var map = new Map("map", {
basemap: "streets",
center: [-96.68338, 33.02529],
zoom: 18
});
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])
);
// First we create an empty feature collection:
var featureCollection = {
"layerDefinition": null,
"featureSet": {
"features": [],
"geometryType": "esriGeometryPolygon"
}
};
//give the feature collection a layer definition:
featureCollection.layerDefinition = {
"geometryType": "esriGeometryPolygon",
"objectIdField": "ObjectID",
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol": {
"type": "esriSFS",
"style": "esriSFSSolid",
"color": [
31,
121,
180,
255
],
"outline": {
"type": "esriSLS",
"style": "esriSLSSolid",
"color": [110, 110, 110, 255],
width: 0.4
}
}
}
},
"fields": [{
"name": "OBJECTID",
"type": "esriFieldTypeOID",
"alias": "OBJECTID"
},
{
"name": "RectangleID",
"type": "esriFieldTypeString",
"alias": "RectangleID",
"length": 10
},
{
"name": "section",
"type": "esriFieldTypeString",
"alias": "section",
"length": 2
},
{
"name": "lot",
"type": "esriFieldTypeString",
"alias": "lot",
"length": 3
},
{
"name": "space",
"type": "esriFieldTypeString",
"alias": "space",
"length": 4
},
{
"name": "spaceid",
"type": "esriFieldTypeString",
"alias": "spaceid",
"length": 10
},
{
"name": "Shape_Length",
"type": "esriFieldTypeDouble",
"alias": "Shape_Length"
},
{
"name": "Shape_Area",
"type": "esriFieldTypeDouble",
"alias": "Shape_Area"
}
]
};
//featureCollection object is in the correct format to be passed in to a FeatureLayer:
featureLayer = new FeatureLayer(featureCollection, {
id: 'myFeatureLayer',
// fields: fields, // This is required when creating a layer from Graphics
ObjectIdField: "OBJECTID", // This must be defined when creating a layer from Graphics
spatialReference: {
wkid: 4326
},
mode: FeatureLayer.MODE_ONDEMAND
});
function requestData() {
var requestHandle = esriRequest({
url: "ab_py_wms.json",
callbackParamName: "jsoncallback"
});
requestHandle.then(requestSucceeded, requestFailed);
}
function requestSucceeded(response, io) {
//loop through the items and add to the feature layer
var features = [];
array.forEach(response.features, function(item) {
var attr = {};
//pull in any additional attributes if required
attr["section"] = item.properties.section;
var geometry = new Polygon({
rings: item.geometry.coordinates
});
var graphic = new Graphic(geometry);
graphic.setAttributes(attr);
features.push(graphic);
});
featureLayer.applyEdits(features, null, null);
}
function requestFailed(error) {
console.log('failed');
}
map.addLayers([featureLayer]);
map.on('layer-add-result', requestData);
console.log(featureLayer);
});
</script>
</head>
<body class='claro'>
<div id="map" style="width:900px; height:600px;"></div>
</body>
</html>
Husham,
Here is your code fixed and working now.
Your issues:
You will need to start a new question in the WAB space for your WAB related portion of this question.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.24/esri/css/esri.css">
<script src="http://js.arcgis.com/3.24/"></script>
<!--<script src="travel6.json" type="text/javascript"></script> -->
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/map",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/FeatureSet",
"esri/layers/FeatureLayer",
"esri/request",
"esri/geometry/Polygon",
"esri/graphic",
"dojo/on",
"dojo/_base/array",
"dojo/domReady!"
], function(
Map, SimpleMarkerSymbol, Color, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol,
FeatureSet, FeatureLayer, esriRequest, Polygon, Graphic, on, array
) {
var map = new Map("map", {
basemap: "streets",
center: [-96.68338, 33.02529],
zoom: 18
});
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])
);
// First we create an empty feature collection:
var featureCollection = {
"layerDefinition": null,
"featureSet": {
"features": [],
"geometryType": "esriGeometryPolygon"
}
};
//give the feature collection a layer definition:
featureCollection.layerDefinition = {
"geometryType": "esriGeometryPolygon",
"objectIdField": "ObjectID",
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol": {
"type": "esriSFS",
"style": "esriSFSSolid",
"color": [
31,
121,
180,
255
],
"outline": {
"type": "esriSLS",
"style": "esriSLSSolid",
"color": [110, 110, 110, 255],
width: 0.4
}
}
}
},
"fields": [{
"name": "OBJECTID",
"type": "esriFieldTypeOID",
"alias": "OBJECTID"
},
{
"name": "RectangleID",
"type": "esriFieldTypeString",
"alias": "RectangleID",
"length": 10
},
{
"name": "section",
"type": "esriFieldTypeString",
"alias": "section",
"length": 2
},
{
"name": "lot",
"type": "esriFieldTypeString",
"alias": "lot",
"length": 3
},
{
"name": "space",
"type": "esriFieldTypeString",
"alias": "space",
"length": 4
},
{
"name": "spaceid",
"type": "esriFieldTypeString",
"alias": "spaceid",
"length": 10
},
{
"name": "Shape_Length",
"type": "esriFieldTypeDouble",
"alias": "Shape_Length"
},
{
"name": "Shape_Area",
"type": "esriFieldTypeDouble",
"alias": "Shape_Area"
}
]
};
//featureCollection object is in the correct format to be passed in to a FeatureLayer:
featureLayer = new FeatureLayer(featureCollection, {
id: 'myFeatureLayer',
// fields: fields, // This is required when creating a layer from Graphics
ObjectIdField: "OBJECTID", // This must be defined when creating a layer from Graphics
spatialReference: {
wkid: 4326
},
mode: FeatureLayer.MODE_ONDEMAND
});
function requestData() {
var requestHandle = esriRequest({
url: "ab_py_wms.json",
callbackParamName: "jsoncallback"
});
requestHandle.then(requestSucceeded, requestFailed);
}
function requestSucceeded(response, io) {
//loop through the items and add to the feature layer
var features = [];
array.forEach(response.features, function(item) {
var attr = {};
//pull in any additional attributes if required
attr["section"] = item.properties.section;
var geometry = new Polygon({
rings: item.geometry.coordinates
});
var graphic = new Graphic(geometry);
graphic.setAttributes(attr);
features.push(graphic);
});
featureLayer.applyEdits(features, null, null);
}
function requestFailed(error) {
console.log('failed');
}
map.addLayers([featureLayer]);
map.on('layer-add-result', requestData);
console.log(featureLayer);
});
</script>
</head>
<body class='claro'>
<div id="map" style="width:900px; height:600px;"></div>
</body>
</html>
Thank you for your response.
fantastic, and more than I need