topic Combining Geocode & Basemap Layer Widgets? in ArcGIS JavaScript Maps SDK Questions

Combining Geocode & Basemap Layer Widgets?

FrankPanaro — Fri, 19 Dec 2014 01:18:16 GMT

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>

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

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>

</html>

Re: Combining Geocode & Basemap Layer Widgets?

JakeSkinner — Sat, 11 Dec 2021 23:54:16 GMT

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>

Re: Combining Geocode & Basemap Layer Widgets?

FrankPanaro — Fri, 19 Dec 2014 19:06:40 GMT

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.