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>
Solved! Go to Solution.
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>
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>
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.