2

I want to append result of a custom search in a Geocoder text box in ArcGIS JavaScript API by overriding the default result.

I have written the below code for this, but I am not getting a satisfactory result.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<style>
    html, body, #map
    {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #search
    {
        display: block;
        position: absolute;
        z-index: 3;
        top: 20px;
        left: 75px;
    }

    .spotlight
    {
        z-index: -1;
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        opacity: 0;
        box-shadow: inset rgba(0,0,0,0.25) 0px 0px 20px 20px, rgba(0,0,0,0.25) 0px 0px 0px 1000px;
        transition: all 1000ms;
        -moz-transition: all 1000ms;
        -webkit-transition: all 1000ms;
    }

    .spotlight-active
    {
        z-index: 2;
        opacity: 1;
    }
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script type="text/javascript">
    require([
    "esri/map",
    "esri/dijit/Geocoder",

    "esri/graphic",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/geometry/screenUtils",

    "dojo/dom",
    "dojo/dom-construct",
    "dojo/query",
    "dojo/_base/Color",
    "esri/tasks/locator",
    "esri/geometry/Polygon",
    "dojo/_base/array",

    "dojo/domReady!"
    ], function (
    Map, Geocoder,
    Graphic, SimpleMarkerSymbol, screenUtils,
    dom, domConstruct, query, Color, Locator, Polygon, arrayUtils
  ) {
        var _RLCCspatialReference = new esri.SpatialReference({ "wkt": 'classified' });
        //var _RMapsExt = new esri.geometry.Extent(-4086033.961945721, -806460.9357572012, 3756052.906228016, 5050597.693910059, _RLCCspatialReference);
        var _RMapsExt = new esri.geometry.Extent(-2498256.744659858, 887180.8538370342, 2243086.071359108, 4139445.6917000436, _RLCCspatialReference);

        // create a map and instance of the geocoder widget here
        var map = new esri.Map("map", { logo: false, nav: false, wrapAround180: true });

        map.spatialReference = _RLCCspatialReference;
        map.fullExtent = _RMapsExt;
        map.initialExtent = _RMapsExt;

        //http://10.66.26.33:6080/arcgis/rest/services/Locator_Comb_Prd/GeocodeServer/
        //http://10.66.26.33:6080/arcgis/rest/services/Locator_Combined/GeocodeServer            

        var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://xxx.rix.com/arcgis/rest/services/Rmaps_Updated/MapServer");

        map.addLayer(tiledMapServiceLayer);

        map.setScale(14000000);

        map.setExtent(_RMapsExt, true);

        var gc = [{
            url: "http://10.66.26.33:6080/arcgis/rest/services/Locator_Comb_Prd/GeocodeServer",
            name: "Locator_Comb_Prd",
            singleLineFieldName: "SingleLine"
        }];

        var geocoder = new Geocoder({
            map: map,
            arcgisGeocoder: false,
            geocoders: gc,
            autoNavigate: false,
            autoComplete: true,
            showResults: true,
            geocoders: gc,
            geocoderMenu: false,
        }, dom.byId("search"));

        //"search" dom.byId("search")
        geocoder.startup();

        //map.on("load", enableSpotlight);

        geocoder.on("select", showLocation);
        geocoder.on("FindResults", showLocation);
        //geocoder.on("clear", removeSpotlight);

        dojo.connect(geocoder, 'onAutoComplete', function (results) {
            $("#search_input").autocomplete({
                source: function (request, response) {
                    $.support.cors = true;

                    $.ajax({
                        dataType: "json",
                        type: 'POST',
                        url: 'http://11.66.22.44/Geocoder/Query.aspx',
                        crossdomain: true,
                        timeout: 100000,
                        cache: true,
                        data: { RequestType: "AutoComplete", AutoCompleteValue: $("#search_input").val() },
                        success: function (data) {
                            //$('input.suggest-user').removeClass('ui-autocomplete-loading');  // hide loading image

                            if (data != null) {
                                response(data);
                            }
                        },
                        error: function (data) {
                            alert("error:" + data.statusText);
                            //$('input.suggest-user').removeClass('ui-autocomplete-loading');
                        }
                    });
                },
                minLength: 3,
                open: function () {

                },
                close: function () {

                },
                focus: function (event, ui) {

                },
                select: function (event, ui) {

                }
            });

            //console.log('autocomplete', results);
        });

        function showLocation(evt) {
            var point = null;

            //if (evt.result.feature.geometry.type == "point") {

            //}
            //else if(evt.result.feature.geometry.type == "polygon") {

            //}

            if (evt.result.feature.geometry.type == "point" && evt.result.feature.geometry.x != 0 && evt.result.feature.geometry.y != 0) {
                point = evt.result.feature.geometry;

                map.graphics.clear();

                var symbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255, 0, 0, 0.5]));
                var graphic = new Graphic(point, symbol);

                map.graphics.add(graphic);

                map.infoWindow.setTitle("Search Result");
                map.infoWindow.setContent(evt.result.name);
                map.infoWindow.show(evt.result.feature.geometry);
            }
            else {
                map.graphics.clear();

                locator = new Locator("http://11.66.22.33:6080/arcgis/rest/services/Locator_Comb_Prd/GeocodeServer");

                locator.on("address-to-locations-complete", showResults);

                var address = {
                    "SingleLine": evt.result.name
                };

                var resultName = evt.result.name;

                locator.outSpatialReference = map.spatialReference;

                var options = {
                    address: address,
                    outFields: ["Loc_name"]
                };

                locator.addressToLocations(options);

                function showResults(evt) {
                    var symbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255, 0, 0, 0.5]));

                    //var infoTemplate = new InfoTemplate(
                    //  "Location",
                    //  "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"
                    //);
                    //symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
                    //symbol.setColor(new Color([153, 0, 51, 0.75]));

                    var geom;
                    arrayUtils.every(evt.addresses, function (candidate) {
                        if (candidate.location.type == "point" && candidate.location.x != 0 && candidate.location.y != 0) {
                            console.log(candidate.score);

                            if (candidate.score > 80) {
                                console.log(candidate.location);

                                var attributes = {
                                    address: candidate.address,
                                    score: candidate.score,
                                    locatorName: candidate.attributes.Loc_name
                                };

                                geom = candidate.location;
                                point = geom;

                                var graphic = new Graphic(point, symbol);
                                //var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
                                //add a graphic to the map at the geocoded location
                                map.graphics.add(graphic);
                                //add a text symbol to the map listing the location of the matched address.
                                //var displayText = candidate.address;
                                //var font = new Font(
                                //  "16pt",
                                //  Font.STYLE_NORMAL,
                                //  Font.VARIANT_NORMAL,
                                //  Font.WEIGHT_BOLD,
                                //  "Helvetica"
                                //);

                                //var textSymbol = new TextSymbol(
                                //  displayText,
                                //  font,
                                //  new Color("#666633")
                                //);
                                //textSymbol.setOffset(0, 8);
                                //map.graphics.add(new Graphic(geom, textSymbol));
                                map.infoWindow.setTitle("Search Result");
                                map.infoWindow.setContent(resultName);
                                map.infoWindow.show(point);

                                return false; //break out of loop after one candidate with score greater  than 80 is found.
                            }
                        }
                        else {
                            var polygonGeom = new Polygon(candidate.location.spatialReference);

                            polygonGeom.addRing(candidate.location.rings[0]);

                            geom = polygonGeom.getCentroid();

                            point = geom;

                            console.log(candidate.score);

                            if (candidate.score > 80) {
                                console.log(candidate.location);

                                var attributes = {
                                    address: candidate.address,
                                    score: candidate.score,
                                    locatorName: candidate.attributes.Loc_name
                                };

                                //geom = candidate.location;
                                point = geom;

                                var graphic = new Graphic(point, symbol);

                                //var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
                                //add a graphic to the map at the geocoded location
                                map.graphics.add(graphic);
                                //add a text symbol to the map listing the location of the matched address.
                                //var displayText = candidate.address;
                                //var font = new Font(
                                //  "16pt",
                                //  Font.STYLE_NORMAL,
                                //  Font.VARIANT_NORMAL,
                                //  Font.WEIGHT_BOLD,
                                //  "Helvetica"
                                //);

                                //var textSymbol = new TextSymbol(
                                //  displayText,
                                //  font,
                                //  new Color("#666633")
                                //);
                                //textSymbol.setOffset(0, 8);
                                //map.graphics.add(new Graphic(geom, textSymbol));
                                map.infoWindow.setTitle("Search Result");
                                map.infoWindow.setContent(resultName);
                                map.infoWindow.show(point);

                                return false; //break out of loop after one candidate with score greater  than 80 is found.
                            }
                        }
                    });


                    if (geom !== undefined) {
                        map.centerAndZoom(geom, 14);
                    }
                }
            }

            if (point != undefined || point != null) {
                map.centerAndZoom(point, 14);
            }

            //var spotlight = map.on("extent-change", function (extentChange) {
            //    var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent);
            //    var width = geom.xmax - geom.xmin - 400;
            //    var height = geom.ymin - geom.ymax - 400;

            //    var max = height;
            //    if (width > height) {
            //        max = width;
            //    }

            //    var margin = '-' + Math.floor(max / 2) + 'px 0 0 -' + Math.floor(max / 2) + 'px';

            //    query(".spotlight").addClass("spotlight-active").style({
            //        width: max + "px",
            //        height: max + "px",
            //        margin: margin
            //    });
            //    spotlight.remove();
            //});
        }

        //function enableSpotlight() {
        //    var html = "<div id='spotlight' class='spotlight'></div>"
        //    domConstruct.place(html, dom.byId("map_container"), "first");
        //}

        //function removeSpotlight() {
        //    query(".spotlight").removeClass("spotlight-active");
        //    map.infoWindow.hide();
        //    map.graphics.clear();
        //}
    });        
</script>

<script type="text/javascript">
    $(function () {
        $("#map").css("height", $(window).height());
        $("#map").css("width", $(window).width());
        //map_root
        $("#map_root").css("height", $(window).height());
        $("#map_root").css("height", $(window).width());
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="search">
        </div>
        <div id="map" style="width: 100%; height: 100%;">
        </div>        
     </form>
</body>
</html>

anyone any suggestion?

  • Thanks for posting the code. But a suggestion is to cut down greatly on the amount posted, and only include the important sections. Eg the CSS, HEAD, background layer (etc) are irrelevant to the question. You can include a link to jsfiddle to show the rest. People are more likely to answer if they don't have to wade through pages of code. – Stephen Lead Jan 15 '15 at 4:11
  • These are single page applications and even though i post them in jsfiddle they are not going to show any results as services used in them are not exposed to internet. More over simply copy pasting this code to HTML would give a better understanding to GIS developers/Experts than in Jsfiddle. – Er. ßridy Jan 15 '15 at 11:55
  • Please see How to create a Minimal, Complete, and Verifiable example, specifically The more code there is to go through, the less likely people can find your problem. Streamline your example. – Stephen Lead Jan 15 '15 at 23:15
1

Yes i found solution to this problem basically I can append the data which i am receiving using Jquery.

After all it is just an HTML!

But still there can be a better solution please do post it.

$.ajax({
                        dataType: "json",
                        type: 'POST',
                        //url: 'http://11.66.22.44/Geocoder/Query.aspx',
                        url: 'Query.aspx',
                        //crossdomain: true,
                        timeout: 500000,
                        cache: true,
                        data: { RequestType: "AutoComplete", AutoCompleteValue: $("#search_input").val() },
                        success: function (data) {
                            //$('input.suggest-user').removeClass('ui-autocomplete-loading');  // hide loading image

                            var actualLength = $(".esriGeocoderResults ul").length;

                            if (data != null) {
                                //response(data); 

                                if ($(".esriGeocoderResults ul").length == 0) {
                                    $(".esriGeocoderResults").append('<ul role="presentation">');
                                }

                                if ($("#search").hasClass("esriGeocoderResultsOpen") == false) {
                                    $("#search").addClass("esriGeocoderResultsOpen");
                                }

                                $(".esriGeocoderResults").css("display", "block");

                                for (var index = 0; index < data.length; index++) {
                                    if ($(".esriGeocoderResults ul").text().indexOf(data[index]) == -1) {
                                        if (actualLength % 2 == 0) {
                                            $(".esriGeocoderResults ul").append('<li onClick = "locatorClick(this);" class="esriGeocoderResult esriGeocoderResultEven" title="' + data[index] + '" role="menuitem" tabindex="0" data-index="' + (actualLength) + '" data-item="true" data-text="' + data[index] + '">' + data[index] + '</li>');

                                            actualLength++;
                                        }
                                        else {
                                            $(".esriGeocoderResults ul").append('<li onClick = "locatorClick(this);" class="esriGeocoderResult esriGeocoderResultOdd" title="' + data[index] + '" role="menuitem" tabindex="0" data-index="' + (actualLength) + '" data-item="true" data-text="' + data[index] + '">' + data[index] + '</li>');

                                            actualLength++;
                                        }
                                    }
                                }

                                $(".esriGeocoderResults ul").bind();
                                //alert($(".esriGeocoderResults ul").length);
                                //$(".esriGeocoderResults ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
                            }
                        },
                        error: function (data) {
                            alert("error:" + data.statusText);
                            //$('input.suggest-user').removeClass('ui-autocomplete-loading');
                        }
                    });

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.