Leaflet Coordinated Image Viewer
This plug-in can show thumbnails of coordinated images in a list and show originals with user click. When plugin activated, it sends ajax requests to your service in every map moveend listener and refresh image list.
It requires Leafletjs and JQuery. It has beeen tested with JQuery 1.11.3 and Leaflet 1.2.0.
It also requires
leaflet.bouncemarker and lightbox2
#Example Request and Response
When user activate this plugin or move map, plugin sends a ajax request with bound of map, center of map and limit parameters.
Your response should be valid GeoJson which contains Point geometries like the following
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
32.836954, 39.925041
]
},
"properties": {
"imageLink": "./example.jpg",
"thumbnailLink": "./example_thumb.jpg",
"title": "Title seen on marker",
"description": "Description seen in lightbox"
}
}
]
}
#Usage
Just add
<div id='coordinatedImagePreviewControlContainer'></div>
tag to your html and
var options = {
imageServiceAddress: "http://yourImageSearchAddress"
};
$('#coordinatedImagePreviewControlContainer').CoordinatedImagePreviewControl(options);
to your window.onload function.
#Options
- imageServiceAddress: Address of your image search service.
- Ajax request sends 7 parameters to your service.
- lng, lat Center of your map
- minx, miny, maxx, maxy Bounds of your map
- limit maximum image count
- Ajax request sends 7 parameters to your service.
- openButtonTitle: Title of open button.
- closeButtonTitle: Title of close button.
- limit: Maximum image count for every search (It is used as ajax request parameter)
- isOpen: Start open or close.
#License
Leaflet.CoordinatedImagePreview is free software, and may be redistributed under the MIT License.
Please let me know your comments and usage.
Thanks to CitySurf to inspire and support this plugin.