In Edit, why aren't there handles on the points to indicate they are selected?

TracySchloss · ‎10-07-2015

For all the rest of the graphic types in this example: Editing tools | ArcGIS API for JavaScript there are handles that indicate that the element is selected. If I add a simple point to the map, when you select it, it has no handles or highlight to indicate to the user that they have selected it. This almost seems like a oversight, since generally when you select something that is editable, there is something that changes to show you which feature you've selected.

What suggestions does the forum have to create a highlight that looks good and will be tied to the graphic when you move it so you haven't left it behind when you edit?

TimWitt2 · ‎10-09-2015

Tracy,

once I remove the offset here it works:

highlightSymbol: new PictureMarkerSymbol(geoSymbol).setOffset(9, 18)

JS Bin - Collaborative JavaScript Debugging

PS: This is a great example, good work!

Tim

View solution in original post

thejuskambi · ‎10-08-2015

I agree with you. But, when it come to point all you can do is move it. If you check the example by switching off all the function except move at the top. you will find that none of the graphic/geometry types have any kind of highlight info on them while moving. I think there is no select handle for move function.

I would suggest, to change the symbol/color of the graphic on mousedown and revert it on mouse up. Hope this was helpful.

TracySchloss · ‎10-08-2015

I like the idea of it, but that's not quite the right events. On mouse-down the graphic is highlighted, but the action you get when holding down the mouse is to pan the map, not to drag the graphic.

TracySchloss · ‎10-08-2015

Here's my code:

<!DOCTYPE html>
<html>  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>
      Edit Tools
    </title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <style>
      html, body, #mainWindow {
        font-family: sans-serif; 
        height: 100%; 
        width: 100%; 
      }
      html, body {
        margin: 0; 
        padding: 0;
      }
      #mainWindow {
        visibility: hidden;
      }
#geocoder {
  display: block;
  position: absolute;
  z-index: 30;
  top: 10px;
  right: 30px;
}
    </style>


    <script src="http://js.arcgis.com/3.14compact/"></script>
    <script>
      var map, editToolbar;


      require([
        "esri/map", 
        "esri/dijit/Search",
        "esri/tasks/locator",
        "esri/toolbars/edit",
        "esri/graphic",
        "esri/geometry/Extent",
        "esri/SpatialReference",
        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/geometry/Polygon",
        
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/PictureMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/TextSymbol",
        
        "esri/layers/GraphicsLayer",


         "dojo/on",
        "dojo/_base/event",
        "dojo/parser",
        "dojo/dom", 
        "dojo/dom-style", 
        "dijit/registry", 
        "dijit/Menu",


        "dijit/form/ToggleButton",
        "dijit/form/DropDownButton",
        "dijit/CheckedMenuItem",
        "dijit/layout/BorderContainer", 
        "dijit/layout/ContentPane", 
        "dojo/domReady!"
      ], function(
        Map, Search,Locator, Edit, Graphic,Extent,SpatialReference,
        Point, Polyline, Polygon,SimpleMarkerSymbol,PictureMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, TextSymbol,GraphicsLayer,on,
        event, parser, dom, domStyle, registry, Menu
      ) {
        parser.parse();


        domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");
    var spatialReference = new SpatialReference({wkid: 102100 });
    var startExtent = new Extent(-10723197,4186914,-9829190,4992866, spatialReference);
        
        map = new Map("map", {
          basemap: "streets",
           center: [-92.593, 38.5],
        zoom: 7
        });
        
        map.on("load", createToolbar);
    var geoSymbol = new PictureMarkerSymbol('//static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png', 32, 32);
    
  var  highlightMarkerSymbol = new SimpleMarkerSymbol(  {
    "type" : "esriSMS",
    "style" : "esriSMSCircle",
    "color" : [255,255,0,100],
    "size" : 22,
    "outline" : { //if outline has been specified
      "color" : [255,255,0,0.5],
      "width" : 1
    }
  }
)
/*
    var  highlightMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22,
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
    new Color([255,255,0]), 2),new Color([255,255,0,0.5]));
*/
    var graphicsLayer = new GraphicsLayer();
    
    var searchTool = new Search ({
         map:map,
              minCharacters: 8, 
              countryCode: "US", 
              searchExtent:startExtent,
              autoNavigate:false,
              showInfoWindowOnSelect:false,
              enableInfoWindow:false,
              graphicsLayer:graphicsLayer
              }, dom.byId('geocoder'));
       
       map.addLayer(graphicsLayer);
       var sources = [];
       sources.push({
        locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
        singleLineFieldName: "SingleLine",
        outFields: ["Addr_type"],
        name: "World Geocode Service",
        localSearchOptions: {
          minScale: 300000,
          distance: 50000
        },
        placeholder: "Enter Address",
        highlightSymbol: new PictureMarkerSymbol(geoSymbol).setOffset(9, 18)


      });
    
       searchTool.set("sources", sources);
       searchTool.startup();
       


       searchTool.on("select-result", function (evt){   
          map.centerAndZoom(evt.result.feature.geometry, 14);  
       });
          
        function createToolbar() {
      //    addGraphics();
          editToolbar = new Edit(map);


          //Activate the toolbar when you click on a graphic
        //  map.graphics.on("click", function(evt) {
          graphicsLayer.on("click", function(evt) {
            event.stop(evt);
            activateToolbar(evt.graphic);
          });
          
          //deactivate the toolbar when you click outside a graphic
          map.on("click", function(evt){
            editToolbar.deactivate();
          });
        }


        function activateToolbar(graphic) {
          var tool = 0;
          tool = tool | Edit.MOVE; 
          editToolbar.activate(tool, graphic);
          on(graphic, 'graphic-move-stop', function (evt){
            
          });
          
        }
/*
        on(graphicsLayer,'mouse-down', function (evt){
           console.log('graphic, mouse-down');
           evt.graphic.setSymbol(highlightMarkerSymbol);
        });
                on(graphicsLayer,'mouse-up', function (evt){
           console.log('graphic, mouse-up');
           evt.graphic.setSymbol(geoSymbol);
        });
*/
      });
    </script>
  </head>
  
  <body class="nihilo">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:'false'">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div id="geocoder"></div>
    </div>
    </div>
  </body>


</html>

TimWitt2 · ‎10-08-2015

Once the editor is active you could change the graphic of the selected point and when the editor deactivates you could change it back to its original graphic?

TracySchloss · ‎10-08-2015

The complete workflow is that the user will enter an address, view the geocoded location and have the opportunity to move the point to refine the location, rather than just accept the placement as-is. There will also be some sort of form to enter attributes. Then there will be a Submit button to add this to a FeatureLayer.

I thought the event to listen on might be mouse-over, but when I try that, it's the same issue I have with mouse-down, the graphic highlights, but instead of have the graphic move when I attempt to drag it, instead I'm panning the map. I think I need to look at other listeners. The cursor changes when the user does a mouse-over on the graphic. Maybe there's a listener on it that will work.

TracySchloss · ‎10-08-2015

This is working, except the first time I select the graphic, it appear to 'jump' to a new position. I think it might either have an offset or need an offset added to the initial symbol, although I didn't specify one in the symbol constructor. It starts with a red marker and changes to orange when I select it (just as a test, I'll use a different symbol later).

JS Bin - Collaborative JavaScript Debugging

A sample Missouri address: is 301 W High St, Jefferson City, MO

TimWitt2 · ‎10-09-2015

Tracy,

once I remove the offset here it works:

highlightSymbol: new PictureMarkerSymbol(geoSymbol).setOffset(9, 18)

JS Bin - Collaborative JavaScript Debugging

PS: This is a great example, good work!

Tim

TracySchloss · ‎10-09-2015

Good eye! I must have copied that line from another example. I don't typically add offsets to my symbols.