Hello,
I am under the impression that the symbol displayed while sketching a point cannot be overwritten.
I believe it should be as it is a property of the SketchViewModel:
Am I doing something wrong or is it a bug ?
https://codepen.io/anon/pen/MMgpVb
Thanks
Solved! Go to Solution.
Nicolas,
Sorry I didn't think about updating, I was focused on graphic creation. So I think this is what you are wanting then (still a little rough but.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Intro to MapView - Create a 2D map - 4.11</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require(["esri/Graphic", "esri/layers/GraphicsLayer", "esri/Map", "esri/views/MapView", "esri/widgets/Sketch/SketchViewModel"], function(Graphic, GraphicsLayer, Map, MapView, SketchViewModel) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
});
var editLayer = new GraphicsLayer();
var point = {
type: "point",
x: 1669792,
y: 9608371,
spatialReference: {
wkid: 102100
}
};
var markerSymbol = {
type: "simple-marker",
color: [226, 119, 40],
outline: {
color: [255, 255, 255],
width: 2
}
};
var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
var sketchVM = new SketchViewModel({
layer: editLayer,
pointSymbol: {
type: "simple-marker",
style: "diamond",
outline: { color: [169, 0, 230, 1] },
angle: 81,
color: [230, 0, 0, 0.74]
},
view: view
});
sketchVM.watch('updateGraphics', function(evt){
console.info(evt);
});
sketchVM.on("update", function(event){
if(event.state === 'start'){
const graphic = event.graphics[0];
graphic.symbol = {
type: "simple-marker",
style: "diamond",
outline: { color: [169, 0, 230, 1] },
angle: 81,
color: [230, 0, 0, 0.74]
}
}
if(event.state === 'complete'){
const graphic = event.graphics[0];
graphic.symbol = markerSymbol;
}
});
editLayer.add(pointGraphic);
view.map.add(editLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
You are doing something wrong. In your code you do create a SketchViewModel but you never do anything with it. In your code you are adding a graphic to a layer and specifying the graphic symbol.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Intro to MapView - Create a 2D map - 4.11</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require(["esri/Graphic", "esri/layers/GraphicsLayer", "esri/Map", "esri/views/MapView", "esri/widgets/Sketch/SketchViewModel"], function(Graphic, GraphicsLayer, Map, MapView, SketchViewModel) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
});
var editLayer = new GraphicsLayer();
var point = {
type: "point",
x: 1669792,
y: 9608371,
spatialReference: {
wkid: 102100
}
};
var markerSymbol = {
type: "simple-marker",
color: [226, 119, 40],
outline: {
color: [255, 255, 255],
width: 2
}
};
var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
var sketchVM = new SketchViewModel({
layer: editLayer,
view: view,
pointSymbol: {
type: "simple-marker",
style: "circle",
size: 10,
color: [255, 255, 255, 0.8],
outline: {
color: [211, 132, 80, 0.7],
size: 10
}
}
});
sketchVM.create("point");
sketchVM.on("create", function(event) {
console.info(event);
});
//editLayer.add(pointGraphic);
view.map.add(editLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Thanks for the reply ! I think you forget to wait for the view to be ready because on my side your sample was not working:
view.when( () => {
sketchVM.create("point");
})
Also, you are saying that I am not doing anything with the sketchViewModel but I am : I allow user to drag and move points that are in "editLayer" which is basically what I want to do. I do not want to allow user to add new point just like you suggested.
But thanks to your example, I now understand that this property is used for the symbology of new points. I thought it was used to customize the style of the point while it was being edited (the blue filled circle point). So does it mean that is not possible ?!
I am currently migrating a 3.28 application and it used to be possible to move a point without changing its symoblogy using the edit toolbar class:
var editToolbar = new esri.toolbars.Edit(map);
editToolbar.activate(esri.toolbars.Edit.MOVE, graphic);
The use case is the following: I want user to move a "pegman" on the map in the spirit of Google Maps. Do you think it can be done in 4.X ? According the 3.x to 4.x functionality matrix, it is the proper class to use.
Thanks !
Nicolas,
Sorry I didn't think about updating, I was focused on graphic creation. So I think this is what you are wanting then (still a little rough but.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Intro to MapView - Create a 2D map - 4.11</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require(["esri/Graphic", "esri/layers/GraphicsLayer", "esri/Map", "esri/views/MapView", "esri/widgets/Sketch/SketchViewModel"], function(Graphic, GraphicsLayer, Map, MapView, SketchViewModel) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
});
var editLayer = new GraphicsLayer();
var point = {
type: "point",
x: 1669792,
y: 9608371,
spatialReference: {
wkid: 102100
}
};
var markerSymbol = {
type: "simple-marker",
color: [226, 119, 40],
outline: {
color: [255, 255, 255],
width: 2
}
};
var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
var sketchVM = new SketchViewModel({
layer: editLayer,
pointSymbol: {
type: "simple-marker",
style: "diamond",
outline: { color: [169, 0, 230, 1] },
angle: 81,
color: [230, 0, 0, 0.74]
},
view: view
});
sketchVM.watch('updateGraphics', function(evt){
console.info(evt);
});
sketchVM.on("update", function(event){
if(event.state === 'start'){
const graphic = event.graphics[0];
graphic.symbol = {
type: "simple-marker",
style: "diamond",
outline: { color: [169, 0, 230, 1] },
angle: 81,
color: [230, 0, 0, 0.74]
}
}
if(event.state === 'complete'){
const graphic = event.graphics[0];
graphic.symbol = markerSymbol;
}
});
editLayer.add(pointGraphic);
view.map.add(editLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Thanks Robert ! It does solve my issue. There is still a very small flickering the first time but it is a nice workaround.
Many thanks !
I think you need to use the class esri/symbols/SimpleMarkerSymbol
Yes, it is what I am using thanks !