2

I have a pretty simple map showing a feature layer of polygons with labels. The features can be clicked to display a popup with some formatted info. I am adding a highlighted rollover symbology to the graphic layer and changing the cursor to the pointer upon mouseover event. However, the feature labels are not clickable, and they cause a blind spot in the clickable area of the polygon.

I'd like the labels to be included in the clickable area, is this possible?

var map;

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");

require(["esri/map", "esri/layers/FeatureLayer", 
  "esri/dijit/BasemapToggle", "esri/dijit/Scalebar",
  "esri/InfoTemplate",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/TextSymbol",
  "esri/renderers/SimpleRenderer",
  "esri/graphic",
  "esri/layers/LabelClass",
  "dojo/_base/Color","dojo/domReady!"],
  function(Map, FeatureLayer, BasemapToggle, Scalebar,
    InfoTemplate, SimpleLineSymbol, SimpleFillSymbol,
    TextSymbol, SimpleRenderer, Graphic, LabelClass, Color) {

    //initiate the map
    map = new Map("map", {
      basemap: "gray-vector",
      center: [-120.2, 37.4],
      zoom: 5,
      minZoom: 4,
      maxZoom: 12,
      showLabels: true
    });
    var labelField = "Name";

    //create the basemap toggle
    var toggle = new BasemapToggle({
        map: map,
        basemap: "terrain"
    }, "BasemapToggle");
    toggle.startup();

    //create scale bar
    var scalebar = new Scalebar({
        map: map,
        scalebarUnit: "dual"
    });

    // create renderer for the Forest layer to override default symbology
    var forestOutlineColor = new Color([0,51,0,0.4]);
    var forestFillColor = new Color([102,153,102,0.3]);
    var forestLine = new SimpleLineSymbol("solid", forestOutlineColor, 1);
    var forestSymbol = new SimpleFillSymbol("solid", forestLine, forestFillColor);
    var forestRenderer = new SimpleRenderer(forestSymbol);

    // create renderer for the fvm layer to override default symbology
    var fvmOutlineColor = new Color([0,0,0,0.2]);
    var fvmFillColor = new Color([204,255,102,0.2]);
    var fvmLine = new SimpleLineSymbol("solid", fvmOutlineColor, 1.5);
    var fvmSymbol = new SimpleFillSymbol("solid", fvmLine, fvmFillColor);
    var fvmRenderer = new SimpleRenderer(fvmSymbol);

    // create a text symbol to define the style of labels
    var fvmLabelColor = new Color([51,51,0,0.9]);
    var fvmLabel = new TextSymbol().setColor(fvmLabelColor);
    fvmLabel.font.setSize("9pt");
    fvmLabel.font.setFamily("arial");
    fvmLabel.font.setVariant(esri.symbol.Font.VARIANT_SMALLCAPS);

    // create objects containing labeling properties
    var fvmLabelProperties = {
        "labelExpressionInfo" : {"value" : "{Name}"}
    };
    var forestLabelProperties = {
        "labelExpressionInfo" : {"value" : ""} //no labeling for forest layer
    };

    //create instances of LabelClass
    var fvmLabelClass = new LabelClass(fvmLabelProperties);
    fvmLabelClass.symbol = fvmLabel;

    var forestLabelClass = new LabelClass(forestLabelProperties);


    //create popup
    var popup = new InfoTemplate();
    popup.setTitle("<div style='max-width: 200px;'><b>${FVM_name}</b></div>");
    popup.setContent(
    "<table id='popup'><tr><td>${FVM_name}</td><td><a href=${print_url} target='_blank'>Buy Paper Map</a></td></tr>" + 
    "<tr><td>${Name}</td><td><a href=${Digital_url} target='_blank'>Buy Digital Map</a></td></tr></table>" +
    "<img id='fvmImage' src=${image_url} alt='Map Cover' height='200'>"
    );

    //create FVM layer
    var fvmLayer = new FeatureLayer("https://services1.arcgis.com/gGHDlz6USftL5Pau/arcgis/rest/services/Forest_Visitor_Map_footprints/FeatureServer/0", {
      infoTemplate: popup,
      outFields : ["*"]
    });     
    fvmLayer.setRenderer(fvmRenderer);
    fvmLayer.setLabelingInfo([ fvmLabelClass ]);

    //create Forest layer
    var forestLayer = new FeatureLayer("https://apps.fs.usda.gov/arcx/rest/services/EDW_FEATURE/EDW_ForestSystemBoundaries_01/FeatureServer/0", {
      outFields : ["*"]
    }); 
    forestLayer.setDefinitionExpression("REGION = '05'");
    forestLayer.setMaxScale('126720');
    forestLayer.setRenderer(forestRenderer);
    forestLayer.setLabelingInfo([ forestLabelClass ]);

    //add the layers to the map
    map.addLayer(forestLayer);
    map.addLayer(fvmLayer);

    //rollover style for graphic
    var highlightSymbol = new SimpleFillSymbol(
      SimpleFillSymbol.STYLE_SOLID,
      new SimpleLineSymbol(
        SimpleLineSymbol.STYLE_SOLID,
        new Color([0,80,47]), 2
      ),
      new Color([125,125,125,0.35])
    );



    //listen for mouseover event and create new graphic from
    //the geometry from the event.graphic and add to graphic layer
    fvmLayer.on("mouse-over", function(evt){
        var highlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol);
        map.setMapCursor("pointer");
        map.graphics.add(highlightGraphic);

    }); 

    //turn off graphic highlight on "mouse-out"
    map.on("load", function(){
        map.graphics.enableMouseEvents();
        map.graphics.on("mouse-out", closeHighlight);
    });

    function closeHighlight(){
        map.setMapCursor("default");
        map.graphics.clear();
    }

});
2
  • Have you resolved the issue , i am having same issue?
    – Haider
    Mar 2, 2017 at 12:27
  • I never found a solution unfortunately.
    – bcm
    Mar 2, 2017 at 16:48

1 Answer 1

1

You'll need to make the label text "unclickable" within the DOM, in order to prevent it from "intercepting" the mouse events to the underlying polygons. Assuming a modern brownser, you can accomplish that with a bit of CSS styling on the label text, for example:

SVG G TEXT { pointer-events: none; }

If needed, you could use the debug facilities of most modern browsers to better identify the document structure above those text objects, then create a more discriminating selector, but the above selector will do an acceptable job of matching the LabelClass's text objects (at least, as of the current release of the javascript API, ie unless/until Esri "rearranges" the DOM structure).

1
  • Welcome to GIS SE, please take the tour and edit to improve the understood of your answer
    – aldo_tapia
    Aug 30, 2017 at 20:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.