How to put Infowindow and Tooltip

[EvelynHernandez]

Hello,

Im making an app which i have added some dynamic layers to the map, but for some reason i cannot put the :

infowindow (in onclick) and a tooltip (in mouseover).

Can anyone tells me what im doing wrong or provide any example of how to do this? (I already try using the examples in the Samples | ArcGIS API for JavaScript  for infowindows)

It will be very usefull.

Thanks a lot

Im developing with reactjs (es6) , webpack srv and i put the arcgis_js_api in my working webpack server.

I separate the map in another javascript file

function mymap(){
  var map;
  return {
    createMap(div){
      map = new esri.Map(div, {
            basemap: "topo",
            center:[-71.2905, -33.1009],
            zoom:9,
            logo: false


          });
      return map;
    },
    getMap(){
      return map;
    },
    onClick(){
      map.on("click",(mouseEvent)=>{
        return console.log("thinking on map onClick for infowindow");
      });
    }


  };
}

export default mymap();

The code for my component where i set up the map is:

import React from 'react';
import ReactDOM from 'react-dom';
import token from '../services/token-service';
import layers from '../services/layers-service';
import StatisticsToolbar from '../bundles/statistics-toolbar';
import mymap from '../services/map-service';
import MyGrid from '../bundles/myGrid';
class Interruptions extends React.Component {


  constructor(){
    super();
    this.onClick = this.onClick.bind(this);
    this.onClickToggle = this.onClickToggle.bind(this);
    this.onClickStatistics = this.onClickStatistics.bind(this);
    this.searchMassive = this.searchMassive.bind(this);
}
  componentDidMount(){


    var map = mymap.createMap("myMapDiv");
        map.disableKeyboardNavigation();


    var myDynamicSedLayer = new esri.layers.ArcGISDynamicMapServiceLayer(layers.read_dyn_layer_PO());
    var myDynamicBTLayer2 = new esri.layers.ArcGISDynamicMapServiceLayer(layers.read_layer_BT());
    var visibleLayers = [1];
      myDynamicBTLayer2.setVisibleLayers(visibleLayers);
      map.on("click",(evt)=>{
        //TEMPLATE PARA MOSTRAR INFOWINDOW SUBESTACION DE DISTRIBUCION (0)
        var chqSubestacionDistribucionTemplate = new esri.InfoTemplate();
         chqSubestacionDistribucionTemplate.setTitle("<b>SSEE: ${ARCGIS.DBO.SED_006.codigo}</b>");


         var chqSubestacionInfoContent =
        "<div style=padding-top: 10px;>Nombre: ${ARCGIS.DBO.SED_006.nombre}<br></div>" +
        "<div style=display:inline-block;width:8px;></div>"+
        "<div style=padding-top: 10px;>Alimentador: ${ARCGIS.DBO.SED_006.alimentador}<br></div>"+
        "<div style=display:inline-block;width:8px;></div>"+
        "<div style=padding-top: 10px;>Comuna: ${ARCGIS.DBO.SED_006.comuna}<br></div>"+
        "<div style=display:inline-block;width:8px;></div>"+
        "<div style=padding-top: 10px;>ID Orden: ${ARCGIS.DBO.POWERON_ORDENES.id_orden}<br></div>"+
        "<div style=display:inline-block;width:8px;></div>";


      chqSubestacionDistribucionTemplate.setContent(chqSubestacionInfoContent);
        // show info window
        myDynamicSedLayer.setInfoTemplates({
          0:{InfoTemplate: chqSubestacionDistribucionTemplate}
        });


        
      });
      map.addLayer(myDynamicSedLayer,2);
      map.addLayer(myDynamicBTLayer2,1);

....

NOTE: My directoryFile is in the attachment.

[EvelynHernandez · Accepted solution]

I fix this problem (but just for infowindow):

var myDynamicSedLayer = new esri.layers.FeatureLayer(layers.read_layer_interr_sed(),{

       mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,

       infoTemplate: myinfotemplate.getSubFailure(),

       outFields: ["*"]

    });

Where myinfotemplate.getSubFailure() is a infotemplate-service where i get the infotemplates customized by me.

Example:

...

function getInfoTemplate(){

  return {

    getSubFailure(){

      let chqSubInfoTemp= new esri.InfoTemplate();

      chqSubInfoTemp.setTitle("<b>Codigo Subestación: ${ARCGIS.DBO.SED_006.codigo}</b>");

      let chqSubInfoContent =

      "<div style=padding-top: 10px;>ID Orden: ${ARCGIS.DBO.POWERON_ORDENES.id_orden}<br></div>"+

      "<div style=display:inline-block;width:8px;></div>"+

      "<div style=padding-top: 10px;>Alimentador: ${ARCGIS.DBO.SED_006.alimentador}<br></div>"+

      "<div style=display:inline-block;width:8px;></div>"+

      "<div style=padding-top: 10px;>Causa: ${  ARCGIS.DBO.POWERON_ORDENES.causa}<br></div>"+

      "<div style=display:inline-block;width:8px;></div>"+

      "<div style=padding-top: 10px;>Comentario: ${ARCGIS.DBO.POWERON_ORDENES.comentario}<br></div>";

      chqSubInfoTemp.setContent(chqSubInfoContent);

      return chqSubInfoTemp;

    }

}

....