nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

TracySchloss

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?

Finde mehr Beiträge mit dem Tag

Accepted answers

TimWitt2

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

All comments

thejuskambi

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

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

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

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

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

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

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

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

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.