Community

Get InfoTemplate to show on first click?

346
3
Jump to solution
02-06-2019 08:48 AM
KevinHanley2
by
New Contributor II
‎02-06-2019 08:48 AM

I'm very new at both JavaScript and GIS related stuff in general, so I apologize for this very basic question. I can't seem to get my parcel to both highlight and show the InfoTemplate when clicked on. Right now, the parcels are highlighting perfectly as I click around on various parcels, but the InfoTemplate will only pop up if I click a second time on a parcel I've previously clicked on. Any help would be appreciated.

I'm including all of my code, just in case it's something stupid that I've done/haven't done. Thank you!

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Parcel Application 2.0</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.27/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
    <style>
      html, body, #map {
        padding:0;
        margin:0;
        height:100%;
      }

       #layerListPane{
        position: absolute;
        top: 90px;
        left: 20px;
        max-height: 780px;
       }

       .esriLayer{
        background-color: #fff;
       }
        .esriLayerList .esriList{
        border-top:none;
       }
        .esriLayerList .esriTitle {
        background-color: #fff;
        border-bottom:none;
       }
        .esriLayerList .esriList ul{
        background-color: #fff;
       }
       
    </style>
    <script src="https://js.arcgis.com/3.27/"></script>
    <script>
		require([
		"esri/map", 
		"esri/InfoTemplate",
		"esri/layers/FeatureLayer",
		"dojo/parser",
		"dojo/dom",
		"dojo/on",
		"esri/tasks/query",
		"esri/tasks/QueryTask",
		"esri/layers/ArcGISDynamicMapServiceLayer",
		"esri/dijit/LayerList",
		"esri/symbols/SimpleFillSymbol",
		"esri/symbols/SimpleLineSymbol",
		"esri/Color",
		"dijit/layout/BorderContainer",
		"dijit/layout/ContentPane",
		"dojo/domReady!",
		], 
		
		function(
		Map, 
		InfoTemplate,
		FeatureLayer,
		parser,
		dom,
		on,
		Query,
		QueryTask,
		ArcGISDynamicMapServiceLayer,
		LayerList,
		SimpleFillSymbol,
		SimpleLineSymbol,
		Color
		){
		
		parser.parse();
		
		var map = new Map("map", {
		center: [-86.54, 30.71],
		zoom: 10,
		basemap: "streets",
		});

		var infoTemplate = new InfoTemplate("${PIN_DSP}","<b>${OWNER_NAME}</b>");
		
		var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 
			new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 
			new Color([255,0,0]), 2), new Color([255,255,0,0.5]));

		var parcelsLayer = new ArcGISDynamicMapServiceLayer("http://172.27.8.54/okaloosagis/rest/services/PropertyApp/ParcelService/MapServer", {
			"id": "Parcels",
			"visible": true,
			disableClientCaching: true,
			useMapImage: true
		});

		map.addLayers([parcelsLayer
			]);

		var layerList = new LayerList({
		map: map,
		layers: [{
		layer: parcelsLayer,
			id: "Parcels",
			subLayers: true
		}],
		showLegend: true,
		showOpacitySlider: true
		}, "layerList");
			
		layerList.startup();

		map.on("click", execute);

		var queryTask = new QueryTask("http://172.27.8.54/okaloosagis/rest/services/PropertyApp/ParcelService/MapServer/14");
		
		var query = new Query();
		query.returnGeometry = true;
		query.outFields = [
		"PIN_DSP", "OWNER_NAME"
		];

		function execute (evt) {
		query.geometry = evt.mapPoint;
		queryTask.execute(query, function (fset){
			showResults(fset.features[0],evt);
		});
		}

		function showResults (feature, evt) {
		map.graphics.clear();
		feature.setSymbol(symbol);
		map.graphics.add(feature);
		feature.setInfoTemplate(infoTemplate);
		}

	});
    </script>
  </head>
  <body>
    	<div id="map"></div>
	<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
		<div id="layerList"></div>
	</div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎02-06-2019 09:01 AM

Kevin,

   This is how you set an infoTemplate for a layer in a MapService:

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Parcel Application 2.0</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.27/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    #layerListPane {
      position: absolute;
      top: 90px;
      left: 20px;
      max-height: 780px;
    }

    .esriLayer {
      background-color: #fff;
    }

    .esriLayerList .esriList {
      border-top: none;
    }

    .esriLayerList .esriTitle {
      background-color: #fff;
      border-bottom: none;
    }

    .esriLayerList .esriList ul {
      background-color: #fff;
    }
  </style>
  <script src="https://js.arcgis.com/3.27/"></script>
  <script>
    require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "dojo/parser",
        "dojo/dom",
        "dojo/on",
        "esri/tasks/query",
        "esri/tasks/QueryTask",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/dijit/LayerList",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/Color",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!",
      ],

      function(
        Map,
        InfoTemplate,
        FeatureLayer,
        parser,
        dom,
        on,
        Query,
        QueryTask,
        ArcGISDynamicMapServiceLayer,
        LayerList,
        SimpleFillSymbol,
        SimpleLineSymbol,
        Color
      ) {

        parser.parse();

        var map = new Map("map", {
          center: [-86.54, 30.71],
          zoom: 10,
          basemap: "streets",
        });

        var infoTemplate = new InfoTemplate("${PIN_DSP}", "<b>${OWNER_NAME}</b>");

        var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));

        var parcelsLayer = new ArcGISDynamicMapServiceLayer("http://172.27.8.54/okaloosagis/rest/services/PropertyApp/ParcelService/MapServer", {
          "id": "Parcels",
          "visible": true,
          "disableClientCaching": true,
          "useMapImage": true
        });

        parcelsLayer.setInfoTemplates({
          14: {infoTemplate: infoTemplate}
        })

        map.addLayer(parcelsLayer);

        var layerList = new LayerList({
          map: map,
          layers: [{
            layer: parcelsLayer,
            id: "Parcels",
            subLayers: true
          }],
          showLegend: true,
          showOpacitySlider: true
        }, "layerList");

        layerList.startup();

      });
  </script>
</head>

<body>
  <div id="map"></div>
  <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
    <div id="layerList"></div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

3 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎02-06-2019 09:01 AM

Kevin,

   This is how you set an infoTemplate for a layer in a MapService:

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Parcel Application 2.0</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.27/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    #layerListPane {
      position: absolute;
      top: 90px;
      left: 20px;
      max-height: 780px;
    }

    .esriLayer {
      background-color: #fff;
    }

    .esriLayerList .esriList {
      border-top: none;
    }

    .esriLayerList .esriTitle {
      background-color: #fff;
      border-bottom: none;
    }

    .esriLayerList .esriList ul {
      background-color: #fff;
    }
  </style>
  <script src="https://js.arcgis.com/3.27/"></script>
  <script>
    require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "dojo/parser",
        "dojo/dom",
        "dojo/on",
        "esri/tasks/query",
        "esri/tasks/QueryTask",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/dijit/LayerList",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/Color",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!",
      ],

      function(
        Map,
        InfoTemplate,
        FeatureLayer,
        parser,
        dom,
        on,
        Query,
        QueryTask,
        ArcGISDynamicMapServiceLayer,
        LayerList,
        SimpleFillSymbol,
        SimpleLineSymbol,
        Color
      ) {

        parser.parse();

        var map = new Map("map", {
          center: [-86.54, 30.71],
          zoom: 10,
          basemap: "streets",
        });

        var infoTemplate = new InfoTemplate("${PIN_DSP}", "<b>${OWNER_NAME}</b>");

        var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));

        var parcelsLayer = new ArcGISDynamicMapServiceLayer("http://172.27.8.54/okaloosagis/rest/services/PropertyApp/ParcelService/MapServer", {
          "id": "Parcels",
          "visible": true,
          "disableClientCaching": true,
          "useMapImage": true
        });

        parcelsLayer.setInfoTemplates({
          14: {infoTemplate: infoTemplate}
        })

        map.addLayer(parcelsLayer);

        var layerList = new LayerList({
          map: map,
          layers: [{
            layer: parcelsLayer,
            id: "Parcels",
            subLayers: true
          }],
          showLegend: true,
          showOpacitySlider: true
        }, "layerList");

        layerList.startup();

      });
  </script>
</head>

<body>
  <div id="map"></div>
  <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
    <div id="layerList"></div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
KevinHanley2
by
New Contributor II
‎02-06-2019 09:17 AM

That is incredibly easier. Thank you so much!

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎02-06-2019 09:27 AM

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

0 Kudos