Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.

README.md

Leaflet.GeographPhotos

Plots Geograph Photos on a Leaflet Map!

Extends the most excellent (and very tiny!) Leaflet.Photo plugin, http://blog.mastermaps.com/2014/08/showing-geotagged-photos-on-leaflet-map.html 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 https://www.geograph.org.uk/help/api

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

Demo

https://www.geograph.org/leaflet/Leaflet.GeographPhotos/GeographPhotos-example.html

Prerequisites:

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

Clearly inspired by and draws ideas from:

See Also

Options

  • api_key: Get your own API key! https://www.geograph.org.uk/admin/apikey.php

  • 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 https://www.geograph.org.uk/article/Keyword-Searching-in-the-Browser

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

Use

CSS:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
    <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="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet-src.js"></script>
    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></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

About

Plots Geograph Photos on a Leaflet Map!

Resources

License

Releases

No releases published

Packages

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