Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 

README.md

Leaflet.CoordinatedImagePreview

Leaflet Coordinated Image Viewer

Demo

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.

http://yourImageSearchAddress?lng=32.8621&lat=39.9292&minx=32.3334&miny=39.7942&maxx=33.3908&maxy=40.0638&limit=10

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
  • 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.

About

Leaflet Coordinated Image Viewer

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.