Skip to content

Instantly share code, notes, and snippets.

@nommuna2
Last active April 26, 2019 21:15
Show Gist options
  • Save nommuna2/6d2ebfd88aff681da21a7474089b6db2 to your computer and use it in GitHub Desktop.
Save nommuna2/6d2ebfd88aff681da21a7474089b6db2 to your computer and use it in GitHub Desktop.
(ArcGIS API for JavaScript) Sample of rendering polylines from a csv
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);
}
});
@nommuna2
Copy link
Author

nommuna2 commented Jun 22, 2018

Sample of rendering polylines from point data

Here is a picture of what it looks like

image

Here is a new picture of making a feature layer from a feature collection object.

Polylines are not there because I have commented it out.

image

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