AnsweredAssumed Answered

Combining Geocode & Basemap Layer Widgets?

Question asked by FPanaro on Dec 18, 2014
Latest reply on Dec 19, 2014 by FPanaro

Hello all,

 

Another newbie here just trying to combine Geocode & Basemap Layer widgets. No luck but I think I'm close. Any help appreciated. I apologize for any sloppy code, it's the end of a long day here in Alaska:

 

 

 

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

    <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.12/esri/css/esri.css">

    <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.12/"></script>

    <script>

      require([

        "esri/map",

        "esri/dijit/Geocoder",

    "esri/dijit/BasemapGallery"

    "esri/arcgis/utils"

    "dojo/parser"

 

 

        "esri/graphic",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/geometry/screenUtils",

 

        "dojo/dom",

        "dojo/dom-construct",

        "dojo/query",

        "dojo/_base/Color",

 

        "dojo/domReady!"

      ], function(

        Map, Geocoder,

        Graphic, SimpleMarkerSymbol, screenUtils,

        dom, domConstruct, query, Color

      ) {

        // create a map and instance of the geocoder widget here

        var map = new Map("map", {

          basemap: "topo",

          center: [-149.87, 61.197],

          zoom: 14

        });

        var geocoder =  new Geocoder({

          arcgisGeocoder: {

            placeholder: "Find a place"

          },

          autoComplete: true,

          map: map

        }, dom.byId("search"));

 

        map.on("load", enableSpotlight);

 

        geocoder.on("select", showLocation);

        geocoder.on("clear", removeSpotlight);

 

        function showLocation(evt) {

          map.graphics.clear();

          var point = evt.result.feature.geometry;

          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);

 

          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;

            var height = geom.ymin - geom.ymax;

 

            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();

        }

 

        function(

      Map, BasemapGallery, arcgisUtils,

      parser

        ) {

      parser.parse();

 

      var basemapGallery = new BasemapGallery({

        showArcGISBasemaps: true,

        map: map

      }, "basemapGallery");

      basemapGallery.startup();

 

      });

 

 

      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps

      var basemapGallery = new BasemapGallery({

        showArcGISBasemaps: true,

        map: map

      }, "basemapGallery");

      basemapGallery.startup();

     

      basemapGallery.on("error", function(msg) {

        console.log("basemap gallery error:  ", msg);

      });

 

      });

    </script>

  </head>

  <body class="soria">

    <div id="search"></div>

    <div id="map"></div>           

  </body>

</html>

Outcomes