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>
