<head> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <link rel="stylesheet" href="css/layout.css"> <style> #search { display: block; position: absolute; z-index: 2; top: 20px; left: 75px; } </style> <script src="http://js.arcgis.com/3.9/"></script> <script> //define variables var geocoder; //call widgets require([ "dojo/parser", "dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/dom", "esri/map", "esri/urlUtils", "esri/arcgis/utils", "esri/dijit/Legend", "esri/dijit/Scalebar", "esri/dijit/Geocoder", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol", "esri/geometry/screenUtils", //"dojo/dom", "dojo/dom-construct", "dojo/query", "dojo/_base/Color", "dojo/domReady!" ], function( parser, ready, BorderContainer, ContentPane, dom, Map, urlUtils, arcgisUtils, Legend, Scalebar, Geocoder, Graphic, SimpleMarkerSymbol, PictureMarkerSymbol, screenUtils, //dom, domConstruct, query, Color ) { //create a map and instance of geocoder and other widgets here ready(function(){ parser.parse(); arcgisUtils.createMap("**WEB map id here**","mapDiv").then(function(response){ //update the app dom.byId("title").innerHTML = response.itemInfo.item.title; dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet; var actualmap = response.map; //add the scalebar var scalebar = new Scalebar({ map: actualmap, scalebarUnit: "english" }); //add the legend. Note that we use the utility method getLegendLayers to get //the layers to display in the legend from the createMap response. var legendLayers = arcgisUtils.getLegendLayers(response); var legendDijit = new Legend({ map: actualmap, layerInfos: legendLayers },"legend"); legendDijit.startup(); //geocoder geocoder = new Geocoder({ map: actualmap, autoComplete: true, arcgisGeocoder: false, geocoders: [{ "name": "geocoder name", "url": "*geocoder url here*", "countryCode":"USA", "currentExtent":false, "placeholder": "Search", "singleLineFieldName":"SingleLine" }], },"search"); geocoder.startup(); geocoder.focus(); //show results of geocoder on map *CODE copied from ArcGIS Tutorial to add point**** geocoder.on("select", showLocation); function showLocation(evt) { map.graphics.clear(); var point = evt.result.feature.geometry; var symbol = new SimpleMarkerSymbol() .setStyle("square") .setColor(new Color([255,0,0,0.5])); var graphic = new Graphic(point, symbol); map.graphics.add(graphic); }); }); }); }); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"> <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> <div id="title"></div> <div id="subtitle"></div> </div> <div id="mapDiv" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> <div id="search"></div> </div> <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" > <div id="legend"></div> </div> </div> </body> </html>
html,body { height:100%; width:100%; padding:0; margin:0; overflow:hidden; } body { background-color:#fff; color:#333; font-size:14px; overflow:hidden; font-family:Georgia, "Times New Roman", Times, serif; } a { color:#555; font-weight:bold; text-decoration:none; } a:hover{ text-decoration:underline; } #header { height:117px; background:#3e3e3e; color:#fff; margin:0; } #headerText{ padding-top:20px; padding-left:25px; width:70%; float:left; min-width:800px; } #title { font-size:30px; font-weight:bold; text-align:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow:ellipsis; } #subtitle { font-size:14px; margin-top:10px; overflow: hidden; } #addressbar{ position:absolute; padding-top:8px; right:10px; } #logoArea{ float:right; padding-top:25px; padding-right:25px; text-align:right; } #social{ bottom: 25px; right: 15px; position: absolute; } #social2{ bottom: 3px; right: 42px; position: absolute; } #msLink{ color:#0276FD; font-family:Arial, Helvetica, sans-serif; font-size:13px; outline:none; } #msLink1{ color:#0276FD; font-family:Arial, Helvetica, sans-serif; font-size:13px; outline:none; } #Mdplogo{ right: 20px; bottom:25px; position:absolute; z-index:100; height:30px; border:none; } #logoImg{ border:none; outline:none; } #map { margin:0; } #swipeImg{ display:none; position:absolute; z-index:2; } .moveable { position:absolute; border-left:1px solid #848484; border-right:1px solid #848484; background-color: #cdcdcd; width: 6px; height: 100%; padding: 0 !important; margin: 0; z-index: 30; cursor: col-resize; } .moveable:hover { background-color:#999; } #footer { display:none; font-size:12px; background:#848484; height:18px; margin:0; padding:10px 15px 5px; } .map .bingLogo-lg { left:18px !important; } #legendCon{ position:absolute; width:300px !important; margin-left:100px; z-index:100; } #legendDiv{ display:none; background:#848484; max-height:450px; overflow:auto; padding:10px; font-family:Arial, Helvetica, sans-serif; } #legendToggle{ position:relative; background:#848484; margin-top:-1px; width:125px; .height:28px; cursor:pointer; z-index:100; color:#fff; font-family:Arial, Helvetica, sans-serif; } #legTogText{ position:relative; margin:auto; margin-left:2px; .margin-top:0px; padding:5px; color:#fff; font-family:Arial, Helvetica, sans-serif; } g,v { cursor:pointer; } #loadingCon{ position:absolute; z-index:99; width:100%; top:40%; text-align:center; } #loadingDialog{ margin:auto; background-color:#dadada; width:300px } #loadingHeader{ background-color:#444; color:#fff; padding-top:10px; padding-bottom:10px; width:300px; } #loading{ padding-top:10px; } #loadingImg{ margin-top:5px; padding-bottom:10px; }
var geocoder = new Geocoder ({ autoNavigate : false, arcgisGeocoder : false, autoComplete : true, minCharacters : 0, //default is 3 change searchDelay : 10, //default is 350 milliseconds geocoders : [{ url : geocodeURL, name : "Geocoder", placeholder : "Search for an address", singleLineFieldName : "SingleLine" }], map : map }, dom.byId("search")); geocoder.startup(); geocoder.focus(); var psymbol = new PictureMarkerSymbol({ "angle" : 0, "xoffset" : 0, "yoffset" : 10, "type" : "esriPMS", "url" : "http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", "contentType" : "image/png", "width" : 24, "height" : 24 }); var templateGC = new InfoTemplate("${name}", "${*}"); //Title is name of Address searched //dojo.connect(geocoder, "onSelect", locate); connect.connect(geocoder, "onSelect", locate); function locate(result) { var l = map.getLayer("results"); l.clear(); gcFeature = result.feature; map.infoWindow.hide(); gcFeature.attributes.name = result.name; gcFeature.setSymbol(psymbol); gcFeature.setInfoTemplate(templateGC); l.add(gcFeature); var geom; geom = gcFeature.geometry; map.setScale(2000); map.centerAt(geom); }
map.addLayer(new GraphicsLayer({ id : "results" }));
var l = map.getLayer(�??results�?�); l.clear(); ....... l.add(gcFeature);
require([ "dojo/parser", "dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/dom", "esri/map", "esri/urlUtils", "esri/arcgis/utils", "esri/dijit/Legend", "esri/dijit/Scalebar", "esri/dijit/Geocoder", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol", "esri/geometry/screenUtils", //"dojo/dom", "dojo/dom-construct", "dojo/query", "dojo/_base/Color", "dojo/domReady!" ], function( parser, ready, BorderContainer, ContentPane, dom, Map, urlUtils, arcgisUtils, Legend, Scalebar, Geocoder, Graphic, SimpleMarkerSymbol, PictureMarkerSymbol, screenUtils, //dom, domConstruct, query, Color ) { //create a map and instance of geocoder and other widgets here ready(function(){ parser.parse(); arcgisUtils.createMap("**WEB map id here**","mapDiv").then(function(response){ //update the app dom.byId("title").innerHTML = response.itemInfo.item.title; dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet; var actualmap = response.map; //add the scalebar var scalebar = new Scalebar({ map: actualmap, scalebarUnit: "english" }); //add the legend. Note that we use the utility method getLegendLayers to get //the layers to display in the legend from the createMap response. var legendLayers = arcgisUtils.getLegendLayers(response); var legendDijit = new Legend({ map: actualmap, layerInfos: legendLayers },"legend"); legendDijit.startup(); //geocoder geocoder = new Geocoder({ map: actualmap, autoComplete: true, arcgisGeocoder: false, geocoders: [{ "name": "geocoder name", "url": "*geocoder url here*", "countryCode":"USA", "currentExtent":false, "placeholder": "Search", "singleLineFieldName":"SingleLine" }], },"search"); geocoder.startup(); geocoder.focus(); //show results of geocoder on map *CODE copied from ArcGIS Tutorial to add point**** geocoder.on("select", showLocation); function showLocation(evt) { map.graphics.clear(); var point = evt.result.feature.geometry; var symbol = new SimpleMarkerSymbol() .setStyle("square") .setColor(new Color([255,0,0,0.5])); var graphic = new Graphic(point, symbol); map.graphics.add(graphic); } }); }); });