Latest Contributions by StevePeralta

Haven't had a lot of luck getting pointers from people here, but I finally ended up answering my own question. Here is how I did it. Any help in improving this code is appreciated. // Search widget let searchWidget = new Search({ view: view, sources: [{ locator: new Locator({ url: locatorServiceUrl }), singleLineFieldName: "SingleLine", name: "Place", localSearchOptions: { minScale: 300000, distance: 50000 }, placeholder: "Search Places", maxResults: 3, maxSuggestions: 6, suggestionsEnabled: true, popupEnabled: false, minSuggestCharacters: 0 }, { featureLayer: houseLyr, searchFields: ["LAST_NAME", "DISTRICT"], displayField: "LAST_NAME", exactMatch: false, outFields: ["*"], name: "House Members", maxResults: 10, maxSuggestions: 10, suggestionsEnabled: true, minSuggestCharacters: 0, placeholder: "District No. or Last Name" }, { featureLayer: senateLyr, searchFields: ["LAST_NAME", "DISTRICT"], displayField: "LAST_NAME", exactMatch: false, outFields: ["*"], name: "Senate Members", placeholder: "District No. or Last Name", maxResults: 6, maxSuggestions: 6, suggestionsEnabled: true, minSuggestCharacters: 0 }] }); //LAYERS QUERY function getQuery(address) { //Queries House and Senate layers for hits within 1 meter of queried address let query = new Query(); query.geometry = address; query.distance = 1; query.units = "meters"; query.outFields = ["*"]; try{ return query; } catch(error) { console.log(error); } } searchWidget.on("select-result", event => { let query = getQuery(event.result.feature.geometry); //Only one result per address. //Senate results. These results are only available in a promise. See Dojo docs. let senateResults = senateLyr.queryFeatures(query).then(results => { return results; }).otherwise(function(error) { console.log("Senate error message: ", error); }); //House Results. These results are only available in a promise. See Dojo docs. let houseResults = houseLyr.queryFeatures(query).then(results => { return results; }).otherwise(function(error) { console.log("House error message: ", error); }); //Only on search results if (!event.result.feature.geometry.rings) { all([senateResults, houseResults]).then(results => { let senateAttributes = results[0].features[0].attributes; let houseAttributes = results[1].features[0].attributes; //Combined results view.popup.open({ title: "Your Legislator Information", content: '<b>Senator ' + senateAttributes.FIRST_NAME + ' ' + senateAttributes.LAST_NAME + '</b>' + '<div class="findLegContainer"><div><img class="headshot" src="https://leg.colorado.gov/sites/default/files/' + senateAttributes.MEMBER_PICTURE +'" /></div>' + '<div><b>'+ senateAttributes.CHAMBER + 'enate District ' + senateAttributes.DISTRICT + '</b><br />' + 'E-mail: <a href="mailto: ' + senateAttributes.EMAIL +'">' + senateAttributes.EMAIL + '</a><br />' + 'Webpage: <a href="https://leg.colorado.gov/node/' + senateAttributes.WEBSITE + '" target="_blank">' + senateAttributes.FIRST_NAME + ' ' + senateAttributes.LAST_NAME + '</a></div></div><b>Representative ' + houseAttributes.FIRST_NAME + ' ' + houseAttributes.LAST_NAME + '</b>' + '<div class="findLegContainer"><div><img class="headshot" src="https://leg.colorado.gov/sites/default/files/' + houseAttributes.MEMBER_PICTURE +'" /></div>' + '<div><b>'+ houseAttributes.CHAMBER + 'ouse District ' + houseAttributes.DISTRICT + '</b><br />' + 'E-mail: <a href="mailto: ' + houseAttributes.EMAIL +'">' + houseAttributes.EMAIL + '</a><br />' + 'Webpage: <a href="https://leg.colorado.gov/node/' + houseAttributes.WEBSITE + '" target="_blank">' + houseAttributes.FIRST_NAME + ' ' + houseAttributes.LAST_NAME + '</a></div></div>', location: event.result.feature.geometry, }); }).otherwise(error => { console.log(error); }); }; });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

Okay, I will answer my own question after a few days of toiling over this. Drupal 7 is not friendly to the DOM and blasts it from left and right with all kinds of stuff, so the key is to get the Esri scripts and your custom scripts loaded at the same time which, for Drupal, means in the same file. There are other ways of doing this, but not without a lot of Drupal headaches. So! 1. Create your Drupal module. I created a module called "find_my_leg" which is short for "Find My Legislator." Directory/file structure looks like this: modules/custom/find_my_leg modules/custom/find_my_leg/find_my_leg.info modules/custom/find_my_leg/find_my_leg.module modules/custom/find_my_leg/theme modules/custom/find_my_leg/theme/theme.inc modules/custom/find_my_leg/theme/js/findmyleg.js modules/custom/find_my_leg/theme/templates modules/custom/find_my_leg/theme/templates/find_my_leg_page.tpl.php 2. Write your map code. The only three files I'll provide code for here are "find_my_leg_page.tpl.php", "findmyleg.js," and "find_my_leg.module." The others are out of the scope of this post. Check Drupal 7 docs for more info. ------------------------------- find_my_leg_page.tpl.php <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css"> <script defer src="https://js.arcgis.com/4.6/"></script> <script defer src="/sites/all/modules/custom/find_my_leg/theme/js/findmyleg.js"></script> <!-- Replace these with your own styles --> <style> main#main-content.main-content{ width: 100%; margin-top: -50px; } #viewDiv { border: 1px solid #ccc; padding: 0px; margin: 0; height: 600px; width: 100%; } .findLegContainer { display: grid; grid-template-columns: 60px auto; grid-gap: 10px; width: 100%; } .findLegContainer > div { text-align: left; } img.headshot { width: 100%; height: auto; margin-bottom: 10px; } </style> <div id="viewDiv"></div> findmyleg.js require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Legend", "esri/tasks/Locator", "esri/widgets/Search", "esri/tasks/QueryTask", "esri/tasks/support/Query", "dojo/domReady!" ], function( Map, MapView, FeatureLayer, Legend, Locator, Search, QueryTask, Query ) { //REST endpoints var senateServiceUrl = "Your REST endpoint for your senate data"; var houseServiceUrl = "Your REST endpoint for your house data"; var locatorServiceUrl = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"; //Layer fill and lines var houseFill = { type: "simple-fill", // autocasts as new SimpleFillSymbol() style: "none", outline: { // autocasts as new SimpleLineSymbol() color: [165, 223, 65, 1], width: 1 } }; var senateFill = { type: "simple-fill", // autocasts as new SimpleFillSymbol() style: "none", outline: { // autocasts as new SimpleLineSymbol() color: [33, 151, 212, 1], width: 1 } }; //Renderers var houseRenderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: houseFill }; var senateRenderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: senateFill }; // Create the PopupTemplates var senatePopupTemplate = { // autocasts as new PopupTemplate() title: "Senator {FIRST_NAME} {LAST_NAME}", content: "<div class='findLegContainer'><div><img class='headshot' src='/sites/default/files/{MEMBER_PICTURE}' /></div>" + "<div><b>{CHAMBER}enate District {DISTRICT} </b><br />" + "E-mail: <a href='mailto: {EMAIL}'>{EMAIL}</a><br />" + "Webpage: <a href='https://community.esri.com/node/{WEBSITE}' target='_blank'>{FIRST_NAME} {LAST_NAME}</a></div></div>" }; var housePopupTemplate = { // autocasts as new PopupTemplate() title: "Representative {FIRST_NAME} {LAST_NAME}", content: "<div class='findLegContainer'><div><img class='headshot' src='/sites/default/files/{MEMBER_PICTURE}' /></div>" + "<div><b>{CHAMBER}ouse District {DISTRICT} </b><br />" + "E-mail: <a href='mailto: {EMAIL}'>{EMAIL}</a><br />" + "Webpage: <a href='https://community.esri.com/node/{WEBSITE}' target='_blank'>{FIRST_NAME} {LAST_NAME}</a></div></div>" }; //Create Feature Layers var houseLyr = new FeatureLayer({ url: houseServiceUrl, renderer: houseRenderer, popupTemplate: housePopupTemplate, legendEnabled: true, outFields: ["*"] }); var senateLyr = new FeatureLayer({ url: senateServiceUrl, renderer: senateRenderer, popupTemplate: senatePopupTemplate, outFields: ["*"] }); //Instantiate map var map = new Map({ basemap: "streets", layers: [houseLyr, senateLyr] }); //Instantiate map view var view = new MapView({ container: "viewDiv", map: map, center: [-105.358887, 39.113014], zoom: 7, popup: { //features: legPopups, dockEnabled: false, dockOptions: { buttonEnabled: false, breakpoint: false } } }); //Search widget var searchWidget = new Search({ view: view, AllPlaceholder: "Rep or Senator Last Name", sources: [{ locator: new Locator({ url: locatorServiceUrl }), singleLineFieldName: "SingleLine", name: "Place", localSearchOptions: { minScale: 300000, distance: 50000 }, placeholder: "Search Geocoder", maxResults: 3, maxSuggestions: 6, suggestionsEnabled: true, minSuggestCharacters: 0 }, { featureLayer: houseLyr, searchFields: ["LAST_NAME"], displayField: "LAST_NAME", exactMatch: false, outFields: ["*"], name: "House Members", maxResults: 10, maxSuggestions: 10, suggestionsEnabled: true, minSuggestCharacters: 0, placeholder: "example: Duran" }, { featureLayer: senateLyr, searchFields: ["LAST_NAME"], displayField: "LAST_NAME", exactMatch: false, outFields: ["*"], name: "Senate Members", placeholder: "example: Sonnenberg", maxResults: 6, maxSuggestions: 6, suggestionsEnabled: true, minSuggestCharacters: 0 }] }); /*var legend = new Legend({ view: view, layerInfos: [{ layer: houseLyr, title: "House Boundary Color" },{ layer: senateLyr, title: "Senate Boundary Color" } ] }); view.ui.add(legend, "bottom-right");*/ //Add the search widget view.ui.add(searchWidget, { position: "top-left", index: 0 }); //Move zoom button to top right view.ui.move("zoom", "top-right"); }); find_my_leg.module <?php /* * @author Steve Peralta */ /* * Implements hook_menu(). */ function find_my_leg_menu() { $items['findmylegislator'] = array( 'title' => 'Find My Legislator', 'page callback' => 'find_my_leg_page', 'access callback' => TRUE, 'type' => MENU_CALLBACK ); return $items; } /** * Implements hook_theme() */ function find_my_leg_theme() { return array( 'themekit' => array( 'render element' => 'elements', 'template' => 'theme/templates/find_my_leg_page', ), ); } /** * Page callback for /findmylegislator. */ function find_my_leg_page() { return theme('themekit'); } And that is it! I'm super new to Esri so there are some things to improve on here, I'm sure, but hope you get some use out of it. ... View more