It will be a great point to start, though what I need is the ability to save the graphics to a external file that can be shared among users. would you share the code?:)
OK - here goes - I have this function that is mainly copied from elsewhere
function addToMap(geometry) {
//drawToolbar.deactivate();
a = dijit.byId("tslider").value;
c = hexToRgb(graphicColour, a);
fullcolour = new dojo.Color(c);
// fillStyle = dijit.byId('fillSelect').attr('value');
var psize = dijit.byId("font.size").value;
psize = psize.replace("pt", "");
switch (geometry.type) {
case "point":
var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, psize, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color(graphicColour));
if (drawtype == 'Text') {
fullcolour = new dojo.Color([0, 0, 0, 255]);
var font = new esri.symbol.Font(dijit.byId("font.size").value, esri.symbol.Font.STYLE_NORMAL, esri.symbol.Font.VARIANT_NORMAL, esri.symbol.Font.WEIGHT_NORMAL, "verdana");
var symbol = new esri.symbol.TextSymbol(dijit.byId("usertext").value, font, fullcolour).setAngle(0).setOffset(0, 0).setAlign(esri.symbol.TextSymbol.ALIGN_START).setDecoration(esri.symbol.TextSymbol.DECORATION_NONE).setRotated(false).setKerning(true);
}
break;
case "polyline":
var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, fullcolour, dijit.byId("line.size").value);
break;
case "polygon":
var symbol = new esri.symbol.SimpleFillSymbol(dijit.byId('fillSelect').attr('value'), new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0]), dijit.byId("line.size").value), fullcolour);
break;
}
console.debug(symbol)
var graphic = new esri.Graphic(geometry, symbol);
// store to local storage graphic added
var now = new Date();
var n = now.getTime();
GraphicName = "storedGraphic" + n;
window.localStorage.setItem(GraphicName, dojo.toJson(graphic.toJson()));
graphic.setAttributes({
newID: GraphicName
});
userGraphics.add(graphic);
//enableID();
}
The important bits are to the end - I generate a unique name for this stored graphic, based on the time. Then save it to local storage.Initially I also deactivated the draw tools and reactivated the ID tool - but as you see I've changed my mind on this - these only get changed when the user closes the floating pane I have the tools in.I then have this, that re-loads it all next session
//graphics stored in local srtorage and display it.
for (var i = 0; i < localStorage.length; i++) {
var n = "SavedGraphic" + i;
var key = localStorage.key(i);
//we use local storage for other things, so only read in storedgraphics
if (Left(key, 8) == 'storedGr') {
saved = dojo.fromJson(localStorage.getItem(localStorage.key(i)));
var graphic = new esri.Graphic(saved);
graphic.setAttributes({
"ID": n,
"LSNo": i
});
userGraphics.add(graphic);
}
}
userGraphics is a graphics layer just for the, well, user graphics! - this means other stuff the system adds, like markers, and highlights, don't get mixed up.Finally the delete from local storage, when a user deletes the graphics. This needs this added to the create toolbar event thingy
function createToolbarAndContextMenu(map) {
map.enableSnapping({
snapKey: dojo.keys.copyKey
});
// Create and setup editing tools
editToolbar = new esri.toolbars.Edit(map);
dojo.connect(editToolbar, "onDeactivate", function(tool, graphic, info) {
//we need to remove the version in local storage as we will be saving a new version
//if Graphics has newID it has been added this session
//If not it has been loaded from localstorage
//if from LS the attribute LSNo will equal the index no in localstorage
if (graphic.attributes.newID) {
localStorage.removeItem(graphic.attributes.newID);
} else {
localStorage.removeItem(localStorage.key(graphic.attributes.LSNo));
}
//save a new version with name time stamped so it can be referred to in future edits/deletes this session
var now = new Date();
var n = now.getTime();
GraphicName = "storedGraphic" + n;
window.localStorage.setItem(GraphicName, dojo.toJson(graphic.toJson()));
});
dojo.connect(map, "onClick", function(evt) {
editToolbar.deactivate();
});
createMapMenu();
createGraphicsMenu();
}
I think the comments say enough - basically we need a common naming system for the graphics so they can be deleted.Finally, as I use the right click context menu form an example, I alter the delete part of that.
function createGraphicsMenu() {
// Creates right-click context menu for GRAPHICS
ctxMenuForGraphics = new dijit.Menu({});
ctxMenuForGraphics.addChild(new dijit.MenuItem({
label: "Edit",
onClick: function() {
if (selected.geometry.type !== "point") {
editToolbar.activate(esri.toolbars.Edit.EDIT_VERTICES, selected);
} else {
alert("Not implemented");
}
}
}));
ctxMenuForGraphics.addChild(new dijit.MenuItem({
label: "Move",
onClick: function() {
editToolbar.activate(esri.toolbars.Edit.MOVE, selected);
}
}));
ctxMenuForGraphics.addChild(new dijit.MenuItem({
label: "Rotate/Scale",
onClick: function() {
if (selected.geometry.type !== "point") {
editToolbar.activate(esri.toolbars.Edit.ROTATE | esri.toolbars.Edit.SCALE, selected);
} else {
alert("Not implemented");
}
}
}));
ctxMenuForGraphics.addChild(new dijit.MenuSeparator());
ctxMenuForGraphics.addChild(new dijit.MenuItem({
label: "Delete",
onClick: function() {
userGraphics.remove(selected);
if (selected.attributes.newID) {
localStorage.removeItem(selected.attributes.newID);
} else {
localStorage.removeItem(localStorage.key(selected.attributes.LSNo));
}
}
}));
ctxMenuForGraphics.startup();
dojo.connect(userGraphics, "onMouseOver", function(evt) {
// We'll use this "selected" graphic to enable editing tools
// on this graphic when the user click on one of the tools
// listed in the menu.
selected = evt.graphic;
// Let's bind to the graphic underneath the mouse cursor
ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode());
});
dojo.connect(userGraphics, "onMouseOut", function(evt) {
ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode());
});
}
Looking at it now, I am not too sure how it all works!! It was a few months ago I did it and my memory isn't as good as it used to be.So please take it as it is.CheersACM
