Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.


Plots Geograph Photos on a Leaflet Map!

Extends the most excellent (and very tiny!) Leaflet.Photo plugin, but intergrates calling the Geograph API to load photos. Including dynamically loading more as zoom the map.

Please contact Geograph before using, you also need a API key

Note: This plugin is heavily inspired by the demos from Leaflet.Photo, and as such uses its image popup styling. as such have moved the leaflet-popup-photo CSS class from Leaflet.Photo/examples/css/map.css, to Leaflet.Photo/Leaflet.Photo.css, so this project can just import one .css file



Optional: (can also display a layer of dots highlighting where photos are located)

Clearly inspired by and draws ideas from:

See Also


  • api_key: Get your own API key!

  • project: which Geograph Project to load. Defaults to 'britire', can also use 'germany' or 'islands' (for Channel Islands!)

  • query: Full-text query to filter imagses. Same syntax as

  • user_id: Can optionally filter by a Geograph User/Contributor ID.

  • showPhotoLayer: default true, but can disable the Photo layer (but will stil need to load Leaflet.Photo even though its 'unused'

  • showDotsLayer: default false. can enable to show a preview of dots coverage. leaflet-maskcanvas is only needed if enabled

  • autoZoomOnAdd: default false. should the map be zoomed to extent of photos when first loaded (or query is changed)

as extends BOTH Leaflet.Photo and Leaflet.markercluster, most options from those plugins can be used too. For example:

  • showCoverageOnHover: default true. When you mouse over a cluster it shows the bounds of its markers.

NOTE: PLEASE don't make maxClusterRadius less than 60, as loads lots of thumbnails!



    <link href="" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="" />
    <link rel="stylesheet" href="Leaflet.Photo/Leaflet.Photo.css" />

JS (best loaded AFTER leaflet core):

    <script src="Leaflet.Photo/examples/lib/reqwest.min.js"></script>
    <script src=""></script>
    <script src=""></script>
    <script src="Leaflet.Photo/Leaflet.Photo.js"></script>
    <script src="Leaflet.GeographPhotos.js"></script>

And add it to map...

    var gph = L.geographPhotos({api_key:'enter-your-key-here', autoZoomOnAdd: true, query:'canal'}).addTo(map);

See the example html for fuller example, as well as loading for other projects


Plots Geograph Photos on a Leaflet Map!




No releases published


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