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.
Solved! Go to 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;
}
}
....
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;
}
}
....