AnsweredAssumed Answered

How to put Infowindow and Tooltip

Question asked by endlessdsire on Mar 17, 2016
Latest reply on Mar 23, 2016 by endlessdsire

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.

Attachments

Outcomes