jQuery Birdseye
A plugin for moving-map search built with jQuery & Leaflet, by @AdamJacobBecker
About
jQuery Birdseye is a plugin for replicating the "search in map" functionality of Yelp/Airbnb/Google using the API of your choosing. With a small bit of setup, you can have the sweet, mapsearchy goodness that these sites do, at a fraction of the cost.
Usage
Live Demo
While jQuery Birdseye does most of the heavylifting for you, it still needs a decent amount of configuration. For example, search results will be displayed differently for each application, and will need to be customized accordingly.
Simplest example code
HTML:
<div class="birdseye-map"></div> <div class="birdseye-results"></div> <div class="birdseye-pagination"></div>Javascript:
$(function(){ $(".birdseye-map").birdseye({ request_uri: 'http://sbadb.herokuapp.com/v1/bizs', results_template: function(key, result) { return '<div>#'+key+': '+result.name+'</div>'; } }); $(".birdseye-map").birdseye.update(); });Documentation
Methods
$("#map").birdseye(options)
Passed a blank div, initializes birdseye's map in that div.
Options
# Show animated loading bar while waiting for results. loading_indicator: true # Initial map lat/lng. initial_coordinates: [40, -100] # Intial map zoom. initial_zoom: 3 # Leaflet tile layer. tile_layer: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' # URI of the API we'll be searching. request_uri: '' # The basic geographical parameters we'll be tacking onto each request. # By default, we use a bounding box to constrain our results. request_geo_params: ne_lat: (map) -> map.getBounds().getNorthEast().lat ne_lng: (map) -> map.getBounds().getNorthEast().lng sw_lat: (map) -> map.getBounds().getSouthWest().lat sw_lng: (map) -> map.getBounds().getSouthWest().lng # JSON key for the results array. # # For example, if our API returns: # # { # 'businesses': [ # { name: "Tom's tasty tacos" }, # { name: "Adam's apple pies"} # ] # } # # ...then our response_json_key should be 'businesses'. response_json_key: 'results' # Getter function for the lat/lng of each result. # By default, we assume that your object has both a 'latitude' and a 'longitude' property. response_params_latlng: (result) -> [result.latitude, result.longitude] # Getter functions for the pagination. # By default, we assume that the response has the following structure: # # { # meta: { # page: 1, # per_page: 10, # total_pages: 3 # count: 28 # } # } # response_params_pagination: page: (data) -> data.meta.page per_page: (data) -> data.meta.per_page total_pages: (data) -> data.meta.total_pages count: (data) -> data.meta.count # Element where we'll be inserting our results. results_el: $(".birdseye-results") # A function that returns the HTML string for a single result. # You're definitely gonna need to customize this one. results_template: (key, result) -> " <div># #{key}: #{result['name']}</div> " # Element where we'll be inserting our pagination. pagination_el: $(".birdseye-pagination") # A function that returns HTML for the pagination controls. pagination_template: (pagination) -> ... $("#map").birdseye.setView(latlng, zoom, updateMap = true)
Sets the map's center and zoom level, and by default, makes an AJAX request to update the results.
$("#map").birdseye.update(new_params)
Searches the API with new_params and displays the results.
$("#map").change_page(page)
Switches the currently-dispalyed results page.
