// Search with Mapzen Search

​

$(document).ready(function () {

  var map = L.map('map').setView([40.731649,-73.977814], 10);

  // Create an empty GeoJSON layer that we will fill

  // as the user searches

  var searchLayer = L.geoJson(null, {

    onEachFeature: function (feature, layer) {

      layer.bindPopup(feature.properties.label);

    }

  }).addTo(map);

  L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {

    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',

    maxZoom: 18

}).addTo(map);

  // When the user is done pressing a key...

  $('.search').keyup(function () {

    // Clear existing search results

    searchLayer.clearLayers();

    // Build a URL to make a request to the API

    var url = 'https://search.mapzen.com/v1/search?' + $.param({

      text: $(this).val(),

      api_key: 'search-pLM3hiG',

      size: 10,

      'boundary.country': 'US'

    });

    // Get the results

    $.getJSON(url)

​

      // When we get the data, add it to the map and move

      // the map to fit the results

      .done(function (data) {

        searchLayer.addData(data.features);

        map.fitBounds(searchLayer.getBounds());

      });

  });

});