First beta working version.

Photo upload, gallery and markers and popups on map.

Author: bisak

.idea/.name

@@ -0,0 +1,13 @@
+<?php
+    $dir = "uploader/server/php/files";
+    $result = array();
+    $files = scandir($dir);
+    foreach($files as $file) {
+        switch(ltrim(strstr($file, '.'), '.')) {
+            case "jpg": case "jpeg":case "JPG":
+                $result[] = $dir . "/" . $file;
+        }
+    }
+    $resultJson = json_encode($result);
+    echo($resultJson);
+?>

…ader/.idea/jQuery-File-Upload-9.12.5.iml .idea/htdocs.imluploader/.idea/jQuery-File-Upload-9.12.5.iml renamed to .idea/htdocs.iml uploader/.idea/jQuery-File-Upload-9.12.5.iml renamed to .idea/htdocs.iml

@@ -26,7 +26,7 @@
     <script src="https://domoritz.github.io/leaflet-locatecontrol/dist/L.Control.Locate.min.js"
             charset="utf-8"></script>
     <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
-
+    <script src="../scripts/libs/exif.js"></script>
 
 </head>
 
@@ -47,7 +47,7 @@
         <div id="navbar" class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
                 <li class="active"><a href="#">Home</a></li>
-                <li><a href="uploader">Upload</a></li>
+                <li><a href="uploader/uploader.html">Upload</a></li>
 
             </ul>
         </div><!--/.nav-collapse -->

.idea/jsLibraryMappings.xml

@@ -5,11 +5,12 @@ let streets = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/ti
     dark = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYmlza2F6eiIsImEiOiJjaXJkOTFkb3owMDdxaTltZ21vemsxcGViIn0.70mwo4YYnbxY_BJoEsGYxw', {attribution: '&copy; <a href="https://www.mapbox.com">Mapbox</a> Dark'}),
     light = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYmlza2F6eiIsImEiOiJjaXJkOTFkb3owMDdxaTltZ21vemsxcGViIn0.70mwo4YYnbxY_BJoEsGYxw', {attribution: '&copy; <a href="https://www.mapbox.com">Mapbox</a> Light'}),
     satelite = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYmlza2F6eiIsImEiOiJjaXJkOTFkb3owMDdxaTltZ21vemsxcGViIn0.70mwo4YYnbxY_BJoEsGYxw', {attribution: '&copy; <a href="https://www.mapbox.com">Mapbox</a> Satelite'}),
-    sateliteStreets = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYmlza2F6eiIsImEiOiJjaXJkOTFkb3owMDdxaTltZ21vemsxcGViIn0.70mwo4YYnbxY_BJoEsGYxw', {attribution: '&copy; <a href="https://www.mapbox.com">Mapbox</a> Satelite Streets'});
+    sateliteStreets = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYmlza2F6eiIsImEiOiJjaXJkOTFkb3owMDdxaTltZ21vemsxcGViIn0.70mwo4YYnbxY_BJoEsGYxw', {attribution: '&copy; <a href="https://www.mapbox.com">Mapbox</a> Satelite Streets'}),
+    OpenStreetMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> OpenStreetMap'});
 
 let map = L.map('map', {
     center: [0, 0],
-    zoom: 14,
+    zoom: 8,
     layers: outdoors,
     fullscreenControl: true,
 });
@@ -26,14 +27,64 @@ lc.start();
 map.zoomControl.setPosition('bottomright');
 
 let baseMaps = {
-    "Streets": streets,
     "Outdoors": outdoors,
+    "Streets": streets,
     "Dark": dark,
     "Light": light,
     "Satelite": satelite,
-    "Satelite Streets": sateliteStreets
+    "Satelite Streets": sateliteStreets,
+    "OpenStreetMap": OpenStreetMap
 };
 
 L.control.layers(baseMaps).addTo(map);
 
-console.log(map.getBounds());
+
+$.get("/getimages.php", function (data) {
+    let result = JSON.parse(data);
+    loadImages(result);
+});
+
+
+function loadImages(images) {
+    let imgArray = [];
+    let imgObjectArray = [];
+
+    images.forEach((src, index) => {
+        let img = new Image();
+        img.src = src;
+        imgArray.push(img);
+    });
+
+    imgArray.forEach((img) => {
+        img.onload = function () {
+            EXIF.getData(img, function () {
+                let imageLat = EXIF.getTag(this, 'GPSLatitude');
+                let imageLong = EXIF.getTag(this, 'GPSLongitude');
+                let imageAlt = EXIF.getTag(this, 'GPSAltitude');
+                let imageName = this.src.split("/").reverse()[0];
+
+                let realImageLat = imageLat[0].numerator + imageLat[1].numerator /
+                    (60 * imageLat[1].denominator) + imageLat[2].numerator / (3600 * imageLat[2].denominator);
+                let realImageLong = imageLong[0].numerator + imageLong[1].numerator /
+                    (60 * imageLong[1].denominator) + imageLong[2].numerator / (3600 * imageLong[2].denominator);
+                let realImageAlt = imageAlt.numerator / imageAlt.denominator;
+
+                let imgObject = {};
+                imgObject.realImageLat = realImageLat;
+                imgObject.realImageLong = realImageLong;
+                imgObject.realImageAlt = realImageAlt;
+                imgObject.imageName = imageName;
+                imgObjectArray.push(imgObject);
+                console.log(imgObject);
+                console.log(imgObjectArray);
+                let imageDisplayString = '<img src="' + this.src + '" alt="Cool Photo" height="281" width="500">';
+                L.marker([realImageLat, realImageLong])
+                    .addTo(map)
+                    .bindPopup(imageDisplayString, {
+                        maxWidth: 1920,
+                        autoPanPadding: L.point(50, 50)
+                    })();
+            });
+        };
+    });
+}