brightrain

.on("typeahead:selected", function (obj, datum) {
	// what happens when a user selects\clicks a suggestion
	// we get the datum that contains the properties we defined when we setup the engine via the filter function
	map.graphics.clear();
	switch(datum.source) {
	    case "esri-geocoder":
	        var url = config.arcgisGeocodingBaseUrl + "find?" +
	            "magicKey=" + datum.magicKey + "&text=" + datum.name + 
	            "&outFields=Addr_type&f=json";
	        // https://developers.arcgis.com/rest/geocode/api-reference/geocoding-find.htm

brightrain

$("#searchInput").typeahead({
        // how many characters does the user type before suggestions start firing
        minLength: 3,
        highlight: true,
        hint: false
    }, {
        name: "camp",
        displayKey: "name",
        source: campBH.ttAdapter(),
        // what the header looks like for this source in the suggestions drop down

brightrain

...
, {
	name: "camp",
	displayKey: "name",
	source: campBH.ttAdapter(),
	// what the header looks like for this source in the suggestions drop down
	templates: {
		header: "<h1 class='typeahead-header'><span class='icon icon-camp'></span>&nbsp;Campgrounds</h1>"  
	}
},

brightrain

$("#searchInput").typeahead({
    minLength: 3,
    highlight: true,
    hint: false
},
…

brightrain

// build the esri geocoder bloodhound engine
var esriBH = new Bloodhound({
    name: "esri-geocoder",
    datumTokenizer: function (d) {
        return Bloodhound.tokenizers.whitespace(d.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        //https://developers.arcgis.com/rest/geocode/api-reference/geocoding-suggest.htm
        // use the searchExtent parameter to limit the results to roughly washington state

brightrain

// https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#options
var campBH = new Bloodhound({
    name: "camp",

    datumTokenizer: function (d) {
        return Bloodhound.tokenizers.whitespace(d.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        // feature services currently only support query

brightrain

<span id='so-blinky' style='text-decoration: blink;'>i m so blinky</span>

brightrain

//click event for layers
//using dojo for the event and class toggling
//but could just as easily be jQuery or vanilla javascript
on(dojo.byId("trail"), "click", function() {
  trailsLayer.visible ? trailsLayer.hide() :  trailsLayer.show();
  dojo.toggleClass(this, "visible");
  dojo.query("#trail .visibility-icon")
    .toggleClass("fa-picture-o")
    .toggleClass("fa-ban");
});

brightrain

.togglable-layer {
    margin-top: 0.8em;
    width: 100%;
}
.togglable-layer:hover {
    background-color: #ccc;
    cursor: pointer;
}
.togglable-layer.visible {
    background-color: white;

brightrain