Proximity search with Search API and Leaflet
-
Upload
alexander-bukach -
Category
Internet
-
view
553 -
download
1
Transcript of Proximity search with Search API and Leaflet
![Page 1: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/1.jpg)
Proximity search with Search API and Leaflet in Drupal 7
Alex Bukach
![Page 2: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/2.jpg)
The picture
![Page 3: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/3.jpg)
The picture
Map Results
Suggestions
Place
DistancePopup
![Page 4: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/4.jpg)
Contrib modules: SearchSearch API
Search API Solr Geofield
Search API Location
Search API Location Views
Geocomplete
![Page 5: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/5.jpg)
Contrib modules: Map
Leaflet More Maps
Leaflet Views AJAX Popups
Leaflet Views
Leaflet
Leaflet MarkerCluster
![Page 6: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/6.jpg)
Setup: Field
1. Create a content type
2. Create a field storing coordinates
![Page 7: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/7.jpg)
Setup: Index
3. Create a Search API index
4. Add Field >> LatLon Pair to index
5. Select Latitude/longitude as field type
![Page 8: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/8.jpg)
Setup: View
6. Create a view with exposed coordinates filter
![Page 9: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/9.jpg)
The End?
![Page 10: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/10.jpg)
The End? No!
![Page 11: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/11.jpg)
Setup: Map
7. Add new display to the view
8. Select Leaflet Map style ...or Leaflet Map (AJAX Popups) style
![Page 12: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/12.jpg)
Setup: Put list and map together
● Content pane displays (views content panes)
● Exposed form in block
● Page manager page (panels + page manager)
![Page 13: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/13.jpg)
Live example
http://garagesaletrail.com.au/search
![Page 14: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/14.jpg)
Try It!
http://bit.ly/proximity-search-kickstart
![Page 15: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/15.jpg)
Contributions
● Geocomplete (geocomplete)
● Leaflet Views AJAX Popups (leaflet_views_ajax_popup)
![Page 16: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/16.jpg)
Bonus
5,000+ results
Views loads each node => custom page
![Page 17: Proximity search with Search API and Leaflet](https://reader034.fdocuments.us/reader034/viewer/2022042602/55a92ade1a28ab793e8b457f/html5/thumbnails/17.jpg)
Thank you!
http://thislittleduck.com