Last active
April 26, 2019 21:15
-
-
Save nommuna2/6d2ebfd88aff681da21a7474089b6db2 to your computer and use it in GitHub Desktop.
(ArcGIS API for JavaScript) Sample of rendering polylines from a csv
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
require([ | |
"esri/Map", | |
"esri/views/MapView", | |
"esri/layers/CSVLayer", | |
"esri/config", | |
"esri/geometry/Polyline", | |
"esri/Graphic", | |
"esri/layers/GraphicsLayer", | |
"esri/layers/FeatureLayer", | |
"esri/layers/support/Field", | |
"dojo/domReady!" | |
], | |
function (Map, MapView, CSVLayer, esriConfig,Polyline,Graphic,GraphicsLayer, FeatureLayer, Field) { | |
var url = "url to hosted csv"; | |
esriConfig.request.corsEnabledServers.push(url); | |
//Create a csvLayer | |
var csvLayer = new CSVLayer({ | |
url: url, | |
renderer: { | |
type: "simple", | |
symbol: { | |
type: "simple-marker", | |
size: 6, | |
color: "black", | |
outline: { | |
width: 0.5, | |
color: "white" | |
} | |
} | |
} | |
}); | |
//Create a simpleLineSymbol for the polyline | |
var sls = { | |
type: "simple-line", | |
color: "lightblue", | |
width: "2", | |
style: "short-dot" | |
}; | |
var sls2 = { | |
type: "simple-line", | |
color: "red", | |
width: "2", | |
style: "short-dot" | |
}; | |
//Create a new map and set the basemap to Dark gray | |
var map = new Map({ | |
basemap: "dark-gray", | |
layers: [csvLayer] | |
}); | |
//set a new view and set the properties of the view | |
var view = new MapView({ | |
container: "viewDiv", | |
map: map, | |
center: [-86.049, 38.485], | |
zoom: 3 | |
}); | |
//Query the csvLayer for geometry | |
csvLayer.queryFeatures({where: "first_name = 'Sly'", returnGeometry: true, outFields: ["*"]}).then(function(results) { | |
//pass the features to the makeFeatureLayer function | |
//Instantiate a new Polyline and array | |
var polyline = new Polyline(); | |
var newGraphicArr = []; | |
//For each geometry element, push a new array of x,y pairs | |
results.features.forEach(function(element) { | |
newGraphicArr.push(new Array(element.geometry.x,element.geometry.y)); | |
}); | |
//Use addPath method to add the new array of x,y paris | |
polyline.addPath(newGraphicArr); | |
//Create a new graphic | |
var polylineGraphic = new Graphic({ | |
geometry: polyline, | |
symbol: sls, | |
}); | |
//Add the graphic to the graphic layer | |
var layer = new GraphicsLayer({ | |
graphics: [polylineGraphic] | |
}); | |
//Add the graphic layer to the map | |
//map.add(layer); | |
makeFeatureLayer(results); | |
}); | |
//Make a feature layer from a feature collection gained from the query. | |
function makeFeatureLayer(featureObject) { | |
//Renderer for the feature layer | |
var flRenderer = { | |
type: "simple", // autocasts as new SimpleRenderer() | |
symbol: { | |
type: "simple-marker", // autocasts as new SimpleMarkerSymbol() | |
size: 6, | |
color: "blue", | |
outline: { // autocasts as new SimpleLineSymbol() | |
width: 0.5, | |
color: "white" | |
} | |
} | |
}; | |
//Create a new feature layer making sure you include [fields, source, objectIdField, geometryType, SpatialReference, and renderer] | |
var featureLayer = new FeatureLayer({ | |
fields: [ | |
{ | |
name: "first_name", | |
alias: "first_name", | |
type: "string" | |
}, | |
{ | |
name: "last_name", | |
alias: "last_name", | |
type: "string" | |
}, | |
{ | |
name: "latitude", | |
alias: "latitude", | |
type: "double" | |
}, | |
{ | |
name: "longitude", | |
alias: "longitude", | |
type: "double" | |
} | |
], | |
objectIdField: "OBJECTID", | |
geometryType: featureObject.geometryType, | |
spatialReference:{ wkid: 102100 }, | |
source: featureObject.features, | |
renderer: flRenderer | |
}); | |
//Add feature layer to the map. | |
map.add(featureLayer); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sample of rendering polylines from point data
Here is a picture of what it looks like
Here is a new picture of making a feature layer from a feature collection object.