Is it possible to create two parallel lines using single polyline geometry?
var polyline = new Polyline([ [33, 71, 0], [32, 70, 1000], [30, 66, 0], [31, 73, 1000] ]);
This creates a single connected line. How can I draw a 2 lines one from
[33, 71, 0], [32, 70, 1000]
and other from
[30, 66, 0], [31, 73, 1000]
using same graphic and polyline geometry.
Any help would be highly appreciated.
Solved! Go to Solution.
Abdul,
Sure here is a sample:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } #controls { background: #fff; box-shadow: 0 6px 6px -6px #999; color: #444; font-family: sans-serif; height: auto; left: 1em; padding: 1em; position: absolute; top: 1em; width: auto; z-index: 40; } </style> <script src="http://js.arcgis.com/3.15/"></script> <script> var map; require([ "esri/map", "esri/geometry/Polyline", "esri/symbols/SimpleLineSymbol", "esri/graphic", "esri/layers/GraphicsLayer", "dojo/dom", "dojo/dom-attr", "dojo/domReady!" ], function( Map, Polyline, SimpleLineSymbol, Graphic, GraphicsLayer, dom, domAttr ) { map = new Map("map", { basemap: "streets", center: [-120.741, 56.39], slider: false, zoom: 2 }); var symbol = new SimpleLineSymbol().setColor("blue"); var gl = new GraphicsLayer({ id: "Polylines" }); map.addLayer(gl); map.on("click", function(e) { var line = new Polyline([[[-50, 0], [-120, -20], [-130, 0]],[[-50, -2], [-120, -22], [-130, -2]]]); var graphic = new Graphic(line, symbol); gl.add(graphic); }); }); </script> </head> <body> <div id="map"></div> </body> </html>
Abdul,
Sure here is a sample:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } #controls { background: #fff; box-shadow: 0 6px 6px -6px #999; color: #444; font-family: sans-serif; height: auto; left: 1em; padding: 1em; position: absolute; top: 1em; width: auto; z-index: 40; } </style> <script src="http://js.arcgis.com/3.15/"></script> <script> var map; require([ "esri/map", "esri/geometry/Polyline", "esri/symbols/SimpleLineSymbol", "esri/graphic", "esri/layers/GraphicsLayer", "dojo/dom", "dojo/dom-attr", "dojo/domReady!" ], function( Map, Polyline, SimpleLineSymbol, Graphic, GraphicsLayer, dom, domAttr ) { map = new Map("map", { basemap: "streets", center: [-120.741, 56.39], slider: false, zoom: 2 }); var symbol = new SimpleLineSymbol().setColor("blue"); var gl = new GraphicsLayer({ id: "Polylines" }); map.addLayer(gl); map.on("click", function(e) { var line = new Polyline([[[-50, 0], [-120, -20], [-130, 0]],[[-50, -2], [-120, -22], [-130, -2]]]); var graphic = new Graphic(line, symbol); gl.add(graphic); }); }); </script> </head> <body> <div id="map"></div> </body> </html>
Thanks Robert.
You nailed it like always.