Lists

Composite Locator Code

A JavaScript code sample has been provided to incorporate Maryland's Composite Locator into any interactive mapping ap​plication. The code specifies how to identify what field name is being used as the single line input (Line 48).

  1. <!DOCTYPE html>
  2. <html>
  3. <head>​
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
  6. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  7. <title>Geocoder Widget</title>
  8. <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
  9. <style>
  10. html, body, #map {
  11. height:100%;
  12. width:100%;
  13. margin:0;
  14. padding:0;
  15. }
  16. body {
  17. background-color:#FFF;
  18. overflow:hidden;
  19. font-family:"Trebuchet MS";
  20. }
  21. #search {
  22. display: block;
  23. position: absolute;
  24. z-index: 2;
  25. top: 20px;
  26. left: 75px;
  27. }
  28. .arcgis . searchGroup .searchInput{
  29. width: 15.625rem;
  30. }
  31. </style>

  32. <script src="http://js.arcgis.com/3.17/"></script>​
  33. <script>
  34. var map;
  35. var geocoder;
  36. var locatorUrl = "https://geodata.md.gov/imap/rest/services/GeocodeServices/MD_CompositeLocator/GeocodeServer";
  37. require([
  38. "esri/map", "esri/tasks/locator","esri/dijit/Search", "esri/symbols/PictureMarkerSymbol", "esri/InfoTemplate", "dojo/domReady!"
  39. ], function(
  40. Map, Locator, Search, PictureMarkerSymbol, InfoTemplate
  41. ){
  42. map = new Map ("map",{
  43. basemap: "topo",
  44. center: [-77.443, 39.062], // lon, lat
  45. zoom: 9
  46. });

  47. var search = new Search[{
  48. sources:[
  49. {
  50. //Pass in the custom locator to the sources
  51. locator: new Locator(locatorUrl),
  52. singleLineFieldName: "SingleLine",
  53. outFields: ["Match_addr", "Score","Addr_type"],
  54. name: "MDiMap Composite Locator",
  55. placeholder: "Search for address",
  56. highlightSymbol: new PictureMarkerSymbol("https://js.arcgis.com/3.17/esri/dijit/Search/images/search-pointer.png", 36, 36).setOffset(9, 18),
  57. //Create an InfoTemplate
  58. infoTemplate: new InfoTemplate("Location", "Address: ${Match_addr} <br/>Score: ${Score} <br/>Match Type: ${Addr_type}")
  59. }],
  60. enableSearchingAll: false,
  61. autoComplete: true,
  62. map: map
  63. }, "search");
  64. search.startup();
  65. });
  66. <script>
  67. </head>​
  68. <body>​
  69. <div id="search"></div>​
  70. <div id="map"></div>
  71. </body>​

Note: This fix works for all searches except ZIP code. To zoom to ZIP code, the code needs to programmatically detect if a ZIP code is entered and pass the value to the field name 'ZIP'. ZIP codes will not be found through single line input.​​​​​​​​​​​​​​​​​​

Please contact the GIO Office at service.desk@maryland.gov for more information.​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​