Community

Combining Geocode & Basemap Layer Widgets?

2016
2
Jump to solution
12-18-2014 05:18 PM
FrankPanaro
by
New Contributor II
‎12-18-2014 05:18 PM

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>

0 Kudos
1 Solution

Accepted Solutions
JakeSkinner
by Esri Esteemed Contributor
Esri Esteemed Contributor
‎12-19-2014 04:22 AM

Hi Frank,

Below is an example on combining the two widgets. Also, here is a great blog on how to post code in GeoNet.

<!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/dijit/themes/soria/soria.css"> 
    <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",
        "dijit/layout/BorderContainer", 
        "dijit/layout/ContentPane", 
        "dijit/TitlePane",
        "dojo/domReady!"
      ], function(
        Map, Geocoder, BasemapGallery,
        arcgisUtils, parser, 
        Graphic, SimpleMarkerSymbol, screenUtils,
        dom, domConstruct, query, Color
      ) {
        
        parser.parse();

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


       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 style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane" 
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>
    </div>

</body>

</html>

View solution in original post

0 Kudos
2 Replies
JakeSkinner
by Esri Esteemed Contributor
Esri Esteemed Contributor
‎12-19-2014 04:22 AM

Hi Frank,

Below is an example on combining the two widgets. Also, here is a great blog on how to post code in GeoNet.

<!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/dijit/themes/soria/soria.css"> 
    <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",
        "dijit/layout/BorderContainer", 
        "dijit/layout/ContentPane", 
        "dijit/TitlePane",
        "dojo/domReady!"
      ], function(
        Map, Geocoder, BasemapGallery,
        arcgisUtils, parser, 
        Graphic, SimpleMarkerSymbol, screenUtils,
        dom, domConstruct, query, Color
      ) {
        
        parser.parse();

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


       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 style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane" 
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>
    </div>

</body>

</html>
0 Kudos
FrankPanaro
by
New Contributor II
‎12-19-2014 11:06 AM

Thanks so much Jake, works great.

Frank

Frank Panaro

Senior Scientist, GIS Manager

SLR International Corporation

Direct: 907-264-6907

Office: 907-222-1112

Fax: 907-222-1113

Email: fpanaro@slrconsulting.com<mailto:fpanaro@slrconsulting.com>

2700 Gambell Street, Suite 200, Anchorage, AK, 99503, United States

www.slrconsulting.com<http://www.slrconsulting.com/us>

<http://www.slrconsulting.com/us>

Confidentiality Notice and Disclaimer

This communication and any attachment(s) contain information which is confidential and may also be legally privileged. It is intended for the exclusive use of the recipient(s) to whom it is addressed. If you have received this communication in error, please email us by return mail and then delete the email from your system together with any copies of it. Any views or opinions are solely those of the author and do not represent those of SLR Management Ltd, or any of its subsidiaries, unless specifically stated.

Preview file
30 KB
Preview file
1 KB
0 Kudos