I want to stack two different geometry draw toolbars with the ArcGIS API for JavaScript namely a point and a polyline.
The goal is to create a point with the first click and simultaneously start the polyline draw mode so that the polyline start and the point overlie each other.
I created a sample which partially works but the last part of the polyline is not recognized and won't be drawn to the map:
Is this a bug because of not intended use in the ArcGIS API or is there a way to fix this?
Code:
map.on("load", createToolbar);
function createToolbar(themap) {
pointToolbar = new Draw(map);
pointToolbar.on("draw-end", addToMap);
polylineToolbar = new Draw(map);
polylineToolbar.on("draw-end", addToMap);
}
on(dojo.byId('draw'), 'click', activateTool);
function activateTool() {
pointToolbar.activate(Draw["POINT"]);
polylineToolbar.activate(Draw["POLYLINE"]);
}
function addToMap(evt) {
var symbol;
if (evt.geometry.type == "point") {
pointToolbar.deactivate();
} else if (evt.geometry.type == "polyline") {
polylineToolbar.deactivate();
}
switch (evt.geometry.type) {
case "point":
case "multipoint":
symbol = new SimpleMarkerSymbol();
break;
case "polyline":
symbol = new SimpleLineSymbol();
break;
default:
symbol = new SimpleFillSymbol();
break;
}
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
Alexander,
I would absolutely be a issue with unintended use. Here is how it should be done:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Maps Toolbar</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<style>
html,
body,
#mainWindow {
font-family: sans-serif;
height: 100%;
width: 100%;
}
html,
body {
margin: 0;
padding: 0;
}
#header {
height: 80px;
overflow: auto;
padding: 0.5em;
}
</style>
<script src="https://js.arcgis.com/3.22/"></script>
<script>
var map, symbol, mapClickEvt;
require([
"esri/map",
"esri/toolbars/draw",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/parser", "dijit/registry",
"dojo/on",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
], function(
Map, Draw, Graphic,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
parser, registry, on
) {
parser.parse();
map = new Map("map", {
basemap: "streets",
center: [-15.469, 36.428],
zoom: 3
});
map.on("load", createToolbar);
function createToolbar(themap) {
polylineToolbar = new Draw(map);
polylineToolbar.on("draw-end", addToMap);
}
on(dojo.byId('draw'), 'click', activateTool);
function activateTool() {
mapClickEvt = map.on("click", function(evt){
symbol = new SimpleMarkerSymbol();
var graphic = new Graphic(evt.mapPoint, symbol);
map.graphics.add(graphic);
});
polylineToolbar.activate(Draw["POLYLINE"]);
}
function addToMap(evt) {
if(mapClickEvt){
mapClickEvt.remove();
}
var symbol;
polylineToolbar.deactivate();
switch (evt.geometry.type) {
case "point":
case "multipoint":
symbol = new SimpleMarkerSymbol();
break;
case "polyline":
symbol = new SimpleLineSymbol();
break;
default:
symbol = new SimpleFillSymbol();
break;
}
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
}
});
</script>
</head>
<body class="nihilo">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<span>Draw:<br /></span>
<button data-dojo-type="dijit/form/Button" id="draw">Point and Polyline</button>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
Thank you. Seems the most viable solution.
Alexander,
Glad to help. Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.