1

I have created a postcode search that that highlights a polygon and zooms in. but I would like it to display a infoTemplate box with having to click in it. I want it to show when the function runs.

My function

function updateExtent(){

require([
  "esri/geometry/Multipoint"
], function(Multipoint) {


        if (document.getElementById('optionsRadios2').checked) {

            document.getElementById("mysearchGrid").style.visibility = "visible";
            document.getElementById('mysearchGrid').style.height = '450px';

        var points;

         $.ajax({
            url: 'http://api.uk/api/street?street=' + document.getElementById('txtAddSearch').value   ,
            type: 'GET',
            dataType: 'json',   
            beforeSend: function(){$('#txtAddSearch').addClass('loadinggif');},
            complete: function(){$('#txtAddSearch').removeClass('loadinggif');},            
            success: function (data) {
                    street_callback(data);
                },

            });


        } else {

        var postcode = document.getElementById('txtAddSearch').value;

                jQuery.support.cors = true;



        $.ajax({
            url: 'http://webapi.uk/api/coordinates?postcode=' + postcode,
            type: 'GET',
            dataType: 'json',            
            success: function (data) {

             try {

                if (data.length === 0) {
                    throw new NoSearchResException("Postcode cannot be found. Please ensure you have a space in your postcode eg. HU17 9BA");
                } else {

                myMap.graphics.clear();

                var points = data.map(function(x){
                    return [x.MapEast, x.MapNorth];
                });

                for (i=0; i<points.length;i++){



                var myPoint = {"geometry":{"x":points[i][0],"y":points[i][1], "spatialReference":{"wkid":27700}},"attributes":{"XCoord":points[i][0], "YCoord":points[i][1],"Plant":"Mesa Mint"},"symbol":{"url":"red-marker-black-border-hi.png", "height":16, "width":10, "type":"esriPMS", "angle": 0, "xoffset":0, "yoffset":0}, "infoTemplate":{"title":"Vernal Pool Locations","content":"Latitude: ${YCoord} <br/>  Longitude: ${XCoord} <br/> Plant Name:${Plant}"}};

                var gra = new esri.Graphic(myPoint);

                myMap.graphics.add(gra);


                }


               var point = esri.graphicsExtent(myMap.graphics.graphics).getCenter(); 


                var myPoint = {"geometry":{"x":point.x,"y":point.y, "spatialReference":{"wkid":27700}},"attributes":{"XCoord":point.x, "YCoord":point.y,"Plant":"Mesa Mint"},"symbol":{"url":"red-marker-black-border-hi.png", "height":0, "width":0, "type":"esriPMS", "angle": 0, "xoffset":0, "yoffset":0}, "infoTemplate":{"title":"Vernal Pool Locations","content":"Latitude: ${YCoord} <br/>  Longitude: ${XCoord} <br/> Plant Name:${Plant}"}};

                var gra = new esri.Graphic(myPoint);

                myMap.graphics.add(gra);

          //build query task
        queryTask1 = new esri.tasks.QueryTask("http://t????????????????/MapServer/0");

                //build query filter
        query1 = new esri.tasks.Query();
        query1.returnGeometry = true;
        query1.outFields = ["POSTCODE", "code"];
        query1.where = "1=1"; 

        infoTemplate1 = new esri.InfoTemplate("${POSTCODE}", "THIS IS TEST DATA <br/>Phase: ${code} <br/>URL: <a href='http://www.google.co.uk/'>URL</a>");
                symbol1 = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
        //onClick event returns the evt point where the user clicked on the map.
        //This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).
        //set query geometry = to evt.mapPoint Geometry
        query1.geometry = point;

        //Execute task and call showResults on completion
        queryTask1.execute(query1, showResults);


        function showResults(featureSet) {
        //remove all graphics on the maps graphics layer
        myMap.graphics.clear();

        //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.

        dojo.forEach(featureSet.features,function(feature){
          var graphic1 = feature;
          graphic1.setSymbol(symbol1);

          //Set the infoTemplate.
          graphic1.setInfoTemplate(infoTemplate1);
          graphic1.setInfoTemplate;

          //Add graphic to the map graphics layer.
          myMap.graphics.add(graphic1);

        });
      }

I have taken the code from esri website and just taken the on click event. This does highlight the poloygon but you still havr to click shape to get the infoTemplate to appear.

1
myMap.graphics.add(graphic1);
myMap.infoWindow.setFeatures([graphic1])
myMap.infoWindow.show(myMap.toScreen(feature.geometry.getExtent().getCenter()));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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