├── geoalbum.css ├── README.md ├── Leaflet.LetterMarker.js └── geoalbum.js /geoalbum.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 10px; 3 | font-size: 10pt; 4 | font-family: "Verdana", "Arial", "Helvetica", sans-serif; 5 | } 6 | 7 | h1 { 8 | font-size: 18pt; 9 | font-weight: normal; 10 | } 11 | 12 | img { 13 | border: 0; 14 | } 15 | 16 | #content { 17 | width: 650px; 18 | float: left; 19 | padding-bottom: 10px; 20 | } 21 | 22 | #maps { 23 | margin-left: 680px; 24 | } 25 | 26 | #detailmap { 27 | margin-top: 1em; 28 | height: 350px; 29 | } 30 | 31 | #overviewmap { 32 | height: 350px; 33 | } 34 | .photoidx { 35 | position: absolute; 36 | background-color: white; 37 | margin-left: 6px; 38 | margin-top: 6px; 39 | text-align: center; 40 | font-size: 10px; 41 | width: 15px; 42 | height: 15px; 43 | color: white; 44 | background-color: black; 45 | border-radius: 7px; 46 | opacity: 0.4; 47 | } 48 | 49 | .nav a { 50 | font-size: 14pt; 51 | color: darkblue; 52 | text-decoration: none; 53 | background: #eef; 54 | padding: 5px 15px; 55 | border-radius: 10px; 56 | } 57 | 58 | .navright { 59 | float: right; 60 | } 61 | 62 | .navleft { 63 | float: left; 64 | } 65 | 66 | .nav-bottom { 67 | margin: 1em 0; 68 | } 69 | 70 | .div-p { 71 | margin: 1em 0; 72 | } 73 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GeoAlbum 2 | 3 | So. You've got a hundred photos and a GPS trace, and you want to make browsing those photos comfortable for your readers. 4 | Here is the solution. Make thumbnails for all photos and make an html file like this: 5 | 6 | ```html 7 | Georeferenced photos 8 | 9 | 10 | 11 | 12 | 13 |

Opening slide

14 |

Hello and welcome to my photo album!

15 |

Change pages by pressing arrow buttons on keyboard, or by clicking relevant links on top and bottom. 16 | The map to the right shows page locations, you can click on numbers to open a page for that location. 17 | All images can be opened in bigger size by clicking on them.

18 |
19 | 20 |

The first photo

21 |
22 |

This is first two photos I took on my trip.

23 |
24 |
25 | 26 |
...
27 | ``` 28 | 29 | Note `geoalbum.js` and `leaflet.js` included. Those will make a beautiful photo album with a map and slides from this 30 | simple page. You can check out an [example album](http://textual.ru/lk130518/), for which this library was 31 | written. Thanks to Tom MacWright for inspiration. The source is released under WTFPL, so feel free to alter 32 | it in any way. 33 | 34 | # Leaflet.LetterMarker 35 | 36 | The album needed a special kind of marker: the one with letters on it. So I wrote a plugin that slightly 37 | modifies leaflet's Marker class. Just include `Leaflet.LetterMarker.js` script in your page and create 38 | markers like that: 39 | 40 | L.letterMarker([12.34, 56.78], 'A', { color: 'blue' }).addTo(map); 41 | 42 | This plugin is also licensed WTFPL. 43 | 44 | -------------------------------------------------------------------------------- /Leaflet.LetterMarker.js: -------------------------------------------------------------------------------- 1 | // Letter marker plugin for Leaflet. Written by Ilya Zverev. Licensed WTFPL. 2 | 3 | L.LetterMarker = L.Marker.extend({ 4 | options: { 5 | letter: 'A', 6 | color: 'black', 7 | riseOnHover: true, 8 | icon: new L.DivIcon({popupAnchor: [2, -2]}) 9 | }, 10 | 11 | initialize: function( latlng, letter, options ) { 12 | L.Marker.prototype.initialize.call(this, latlng, options); 13 | this.options.letter = letter; 14 | }, 15 | 16 | _initIcon: function() { 17 | var options = this.options, 18 | map = this._map, 19 | animation = (map.options.zoomAnimation && map.options.markerZoomAnimation), 20 | classToAdd = animation ? 'leaflet-zoom-animated' : 'leaflet-zoom-hide'; 21 | 22 | if (!this._icon) { 23 | var div = document.createElement('div'); 24 | div.innerHTML = '' + options.letter + ''; 25 | div.className = 'leaflet-marker-icon'; 26 | div.style.marginLeft = '-7px'; 27 | div.style.marginTop = '-7px'; 28 | div.style.width = '15px'; 29 | div.style.height = '15px'; 30 | div.style.borderRadius = '7px'; 31 | div.style.fontSize = '10px'; 32 | div.style.fontFamily = 'sans-serif'; 33 | div.style.fontWeight = 'bold'; 34 | div.style.textAlign = 'center'; 35 | div.style.lineHeight = '15px'; 36 | div.style.cursor = options.clickable ? 'hand' : 'default'; 37 | div.style.color = 'white'; 38 | div.style.backgroundColor = options.color; 39 | this._icon = div; 40 | 41 | if (options.title) { 42 | this._icon.title = options.title; 43 | } 44 | 45 | this._initInteraction(); 46 | 47 | L.DomUtil.addClass(this._icon, classToAdd); 48 | 49 | if (options.riseOnHover) { 50 | L.DomEvent 51 | .on(this._icon, 'mouseover', this._bringToFront, this) 52 | .on(this._icon, 'mouseout', this._resetZIndex, this); 53 | } 54 | } 55 | 56 | var panes = this._map._panes; 57 | panes.markerPane.appendChild(this._icon); 58 | }, 59 | 60 | setColor: function( color ) { 61 | if( !this._icon ) 62 | this.options.color = color; 63 | else 64 | this._icon.style.backgroundColor = color; 65 | } 66 | }); 67 | 68 | L.letterMarker = function(latlng, letter, options) { 69 | return new L.LetterMarker(latlng, letter, options); 70 | }; 71 | -------------------------------------------------------------------------------- /geoalbum.js: -------------------------------------------------------------------------------- 1 | // GeoAlbum.js. Inspired by Tom MacWright's Big, partly based on Weenote, written by Ilya Zverev. Licensed WTFPL. 2 | 3 | var geoAlbumInitialized = false; 4 | window.onload = function() { initGeoAlbum(); } 5 | 6 | function initGeoAlbum() { 7 | if( geoAlbumInitialized ) return; 8 | geoAlbumInitialized = true; 9 | 10 | var prevText = '← Назад'; 11 | var nextText = 'Дальше →'; 12 | var detailZoom = 15; 13 | var overviewZoom = 10; 14 | 15 | var body = document.body; 16 | var pages = {}; 17 | var page; 18 | var content; 19 | var pageMarkersLayer = L.layerGroup(); 20 | var photoMarkers = {}; 21 | var currentDetailLayer; 22 | var overviewMap, detailMap; 23 | 24 | function process( page, idx ) { 25 | // find all coordinates, also mark photos 26 | var lat = 0.0, lon = 0.0; 27 | var photoIndices = 'ABCDEFGHIJKLMN'; 28 | var photoIdx = 0; 29 | var photoLayer = L.layerGroup(); 30 | var children = page.childNodes; 31 | for( var i = 0; i < children.length; i++ ) { 32 | var child = children[i]; 33 | if( child.nodeType != 1 ) continue; 34 | var images = child.getElementsByTagName('img'); 35 | if( images.length > 0 ) { 36 | child.className = 'div-p ' + child.className; 37 | child.style.overflowX = 'auto'; 38 | } 39 | if( child.hasAttribute('lat') && child.hasAttribute('lon') ) { 40 | var plat = +child.getAttribute('lat'); 41 | var plon = +child.getAttribute('lon'); 42 | lat += plat; lon += plon; 43 | var letter = photoIndices[photoIdx++]; 44 | photoLayer.addLayer(L.letterMarker([plat, plon], letter, {clickable: false})); 45 | var letterDiv = document.createElement('div'); 46 | letterDiv.className = 'photoidx'; 47 | letterDiv.appendChild(document.createTextNode(letter)); 48 | child.insertBefore(letterDiv, child.firstChild); 49 | } 50 | } 51 | if( photoIdx > 0 ) 52 | photoMarkers[idx] = photoLayer; 53 | 54 | if( page.hasAttribute('lat') && page.hasAttribute('lon') ) { 55 | lat = +page.getAttribute('lat'); 56 | lon = +page.getAttribute('lon'); 57 | } else if( photoIdx > 0 ) { 58 | lat /= photoIdx; 59 | lon /= photoIdx; 60 | } 61 | if( lat > 0 ) { 62 | pageMarkersLayer.addLayer(L.letterMarker([lat, lon], idx) 63 | .on('click', function() { window.location.hash = idx})); 64 | } 65 | 66 | // Add navigation links 67 | var nav = ''; 68 | if( idx > 1 ) nav += '' + prevText + ''; 69 | if( idx < count ) nav += '' + nextText + ''; 70 | nav += ''; 71 | page.innerHTML = '
' + nav + '
' + page.innerHTML + '
' + nav; 72 | } 73 | 74 | function zoomOnLayerGroup( map, layer ) { 75 | var clat = 0.0, clon = 0.0, ccount = 0; 76 | layer.eachLayer(function(m) { 77 | clat += m.getLatLng().lat; 78 | clon += m.getLatLng().lng; 79 | ccount++; 80 | }); 81 | if( ccount > 0 ) 82 | map.panTo([clat/ccount, clon/ccount]); 83 | } 84 | 85 | for( var d, count = 0; d = body.firstChild; ) { 86 | if( d.nodeType == 1 && d.localName != 'script' ) pages[++count] = d; 87 | body.removeChild(d); 88 | } 89 | for( var p in pages ) process(pages[p], p); 90 | body.innerHTML = '
'; 91 | content = document.getElementById('content'); 92 | content.appendChild(document.createComment('')); 93 | 94 | var overviewMap = L.map('overviewmap', {keyboard: false}).setView([60, 30], overviewZoom); 95 | L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', { 96 | attribution: 'Map data © OpenStreetMap contributors', 97 | maxZoom: 13, minZoom: 8 98 | }).addTo(overviewMap); 99 | if( typeof overviewLayer != 'undefined' ) 100 | overviewMap.addLayer(overviewLayer); 101 | overviewMap.addLayer(pageMarkersLayer); 102 | zoomOnLayerGroup(overviewMap, pageMarkersLayer); 103 | 104 | var detailMap = L.map('detailmap', {keyboard: false}).setView([60, 30], detailZoom); 105 | L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', { 106 | attribution: 'Map data © OpenStreetMap contributors', 107 | maxZoom: 18, minZoom: 13 108 | }).addTo(detailMap); 109 | if( typeof detailLayer != 'undefined' ) 110 | detailMap.addLayer(detailLayer); 111 | 112 | !function sync() { 113 | setTimeout(sync, 50); 114 | var next = 0 | location.hash.match(/\d+/); 115 | next = Math.max(Math.min(count, next), 1); 116 | if( page == next ) return; 117 | location.hash = page = next; 118 | content.replaceChild(pages[page], content.firstChild); 119 | window.scrollTo(0,0); 120 | if( overviewMap && detailMap ) { 121 | pageMarkersLayer.eachLayer(function(m) { 122 | m.setColor(m.options.letter == page ? 'blue' : 'black'); 123 | if( m.options.letter == page ) 124 | overviewMap.panTo(m.getLatLng()); 125 | }); 126 | if( currentDetailLayer ) 127 | detailMap.removeLayer(currentDetailLayer); 128 | if( page in photoMarkers ) { 129 | currentDetailLayer = photoMarkers[page]; 130 | detailMap.addLayer(currentDetailLayer); 131 | zoomOnLayerGroup(detailMap, currentDetailLayer); 132 | detailMap.setZoom(detailZoom); 133 | document.getElementById('detailmap').style.visibility = 'inherit'; 134 | } else 135 | document.getElementById('detailmap').style.visibility = 'hidden'; 136 | } 137 | }(); 138 | 139 | document.onkeydown = function(e) { 140 | var next = e.which == 39 ? page + 1 : e.which == 37 ? page - 1 : page; 141 | if( next in pages ) 142 | location.hash = next; 143 | } 144 | } 145 | 146 | L.LetterMarker = L.Marker.extend({ 147 | options: { 148 | letter: 'A', 149 | color: 'black', 150 | riseOnHover: true, 151 | icon: new L.DivIcon({popupAnchor: [2, -2]}) 152 | }, 153 | 154 | initialize: function( latlng, letter, options ) { 155 | L.Marker.prototype.initialize.call(this, latlng, options); 156 | this.options.letter = letter; 157 | }, 158 | 159 | _initIcon: function() { 160 | var options = this.options, 161 | map = this._map, 162 | animation = (map.options.zoomAnimation && map.options.markerZoomAnimation), 163 | classToAdd = animation ? 'leaflet-zoom-animated' : 'leaflet-zoom-hide'; 164 | 165 | if (!this._icon) { 166 | var div = document.createElement('div'); 167 | div.innerHTML = '' + options.letter + ''; 168 | div.className = 'leaflet-marker-icon'; 169 | div.style.marginLeft = '-7px'; 170 | div.style.marginTop = '-7px'; 171 | div.style.width = '15px'; 172 | div.style.height = '15px'; 173 | div.style.borderRadius = '7px'; 174 | div.style.fontSize = '10px'; 175 | div.style.fontFamily = 'sans-serif'; 176 | div.style.fontWeight = 'bold'; 177 | div.style.textAlign = 'center'; 178 | div.style.lineHeight = '15px'; 179 | div.style.cursor = options.clickable ? 'hand' : 'default'; 180 | div.style.color = 'white'; 181 | div.style.backgroundColor = options.color; 182 | this._icon = div; 183 | 184 | if (options.title) { 185 | this._icon.title = options.title; 186 | } 187 | 188 | this._initInteraction(); 189 | 190 | L.DomUtil.addClass(this._icon, classToAdd); 191 | 192 | if (options.riseOnHover) { 193 | L.DomEvent 194 | .on(this._icon, 'mouseover', this._bringToFront, this) 195 | .on(this._icon, 'mouseout', this._resetZIndex, this); 196 | } 197 | } 198 | 199 | var panes = this._map._panes; 200 | panes.markerPane.appendChild(this._icon); 201 | }, 202 | 203 | setColor: function( color ) { 204 | if( !this._icon ) 205 | this.options.color = color; 206 | else 207 | this._icon.style.backgroundColor = color; 208 | } 209 | }); 210 | 211 | L.letterMarker = function(latlng, letter, options) { 212 | return new L.LetterMarker(latlng, letter, options); 213 | }; 214 | --------------------------------------------------------------------------------