open-search.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-ajax/core-ajax.html">

<!--
The `open-search` requests are queries composed of location text, zip or lat/lon coordinates that can be used to find corresponding place data..
##### Example:
        ...
        <style>
          open-map {
            display: block;
            height: 100vh;
          }
        </style>
        <open-map latitude="38.867847" longitude="1.310977">
        </open-map>
        <open-search
          query="['1600 pennsylvania ave nw', [-73.989, 40.733], [07800]]">
        </open-search>
        <script>
          var map = document.querySelector('open-map'),
              searcher = document.querySelector('open-search');
          searcher.accessToken = map.accesToken;

          searcher.addEventListener('open-search-results', function(docs){
            console.log(docs);
          }, false);
        </script>
        ...

@element open-search
@blurb Requests are queries composed of location text, zip or lat/lon coordinates
@status alpha
@homepage https://ruben96.github.io/open-map/components/open-map/
-->

<polymer-element name="open-search" attributes="query result">
  <template>
    <style>
      :host{
        display: none;
      }
    </style>
    <core-ajax id="searcher" auto
      on-core-response="{{ gotResult }}">
    </core-ajax>
  </template>
  <script>
    (function() {
      'use-strit';
      Polymer({
        publish: {
          /**
            *
            * @property accessToken
            * @type L.mapbox.accessToken
            * @default null
            */
          accessToken: {
            value: null,
            reflect: true
          }
        },
        observe:{
          query: 'search',
          accessToken: 'search'
        },

        created: function(){
        /**
         * The search result.
         *
         * @attribute result
         * @type object
         */
          this.result = {};
          this.query = [];
        },

        parseQuery: function(){
          var query = '',
              subquery;
          this.query.forEach(function(element, index){

            if(Array.isArray(element)){
               subquery = element.join(',');
            }else{
              subquery = element.toLowerCase()
                                .split(' ')
                                .join('+');
            }
            if(index === 0){
              query += subquery;
            }else{
              query += ';' + subquery;
            }
          });
          return query;
        },

        search: function() {
          if(this.query.length && this.accessToken){
            var parsedQuery = this.parseQuery();
            this.$.searcher.url = 'http://api.tiles.mapbox.com/v4'+
              '/geocode/mapbox.places-v1/'+ parsedQuery +'.json?access_token=' +
              this.accessToken;
            this.$.searcher.go();
          }
        },

        gotResult: function(e){
          var results = [];
          JSON.parse(e.detail.response).forEach(function(query){
            query.features.forEach(function(place){
              results.push(place);
            });
          });

          this.result = {
            results: results
          };

          /**
           * Fired when the request was successful.
           *
           * @event open-search-results
           */
          this.fire('open-search-results', this.result);
        }
      });
    })();
  </script>
</polymer-element>