redesigned sample w numeric markers

README.md

@@ -6,8 +6,8 @@ http://jackdougherty.github.io/leaflet-storymap/index.html
 
 ### Benefits
 - Clean scroll-driven navigation, using screen swipe, trackpad, or keyboard down-arrow. Viewers may pan and zoom the map independently of the narration to explore further. Initial map displays all point markers.
-- Linked images may be stored in local subfolder or externally. Coordinate points, narration text, image links, and zoom levels for each chapter are stored in a local geoJSON file, which makes it easier to create new storymaps with minimal coding.
-- Responsive design that automatically resizes for all devices (but coding needs to be improved.)
+- Linked images may be stored in local subfolder or externally. Coordinate points, narration text, image links, and zoom levels for each chapter are stored in a local geoJSON file, which makes it easier to create new storymaps with minimal coding, and to preserve the data outside of the mapping technology.
+- Responsive design that automatically resizes for all devices (but CSS needs to be improved.)
 - Works in modern browsers (Chrome, Firefox, IE, Safari, including 1st generation iPad). Not supported in IE 8 or lower.
 - Uses only free and open-source Leaflet.js and jQuery libraries.
 
@@ -53,12 +53,44 @@ http://jackdougherty.github.io/leaflet-storymap/index.html
 - Find a way to make the div chapter length variable, so that the height adjusts automatically for tall images and long descriptions, without adversely lengthening blank space for other chapters.
 - Make source-link optional by inserting an if/else statement for source-link=""
 - Is there a way to embed clickable hyperlinks inside description field of GeoJSON file?
-- Replace generic Leaflet blue markers with numbered circles or icons, matching chapter ID.
-  - Try this: http://giscollective.org/tutorials/quick-tips/numbered-icons-in-leaflet/
-  - I could not make this work: Font-Awesome-markers numeric (http://stackoverflow.com/questions/22622393/leaflet-awesome-markers-adding-numbers) using ( https://github.com/lvoogdt/Leaflet.awesome-markers/tree/6dd41539428caa28f75b30fa2cd8dcba2c202a86/dist) 
-  - or L.letterIcon (http://mapbbcode.org/leaflet.html)
 - Add code to make points clickable to auto-scroll to relevant narrative chapter. See http://muxlab.github.io/map-effects-100/Leaflet/12_map-driven-scroll-navigation.html OR http://jackdougherty.github.io/leaflet-stories
 - Aspirational goal: Add code to display different tileLayers (e.g. MAGIC 1934 Aerial, etc.) or overlays for different chapters, based on  instructed in GeoJSON file.
+- Create option to display photo icons based on images folder, similar to flickr photo feed icons
+```
+// Define flickrURL endpoint with API explorer: insert your own key, and tags= or text= to filter results
+var flickrURL = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=25dcc9a8c7410551dcb0af48c778bde5&user_id=56513965%40N06&tags=HPHS&extras=geo%2Curl_t%2Curl_s%2Curl_m%2Ctitle&format=json&nojsoncallback=1";
+
+// Define the flickr popup display
+// ** TO DO: Rewrite link to view original source photo directly on Flickr
+// ** POSSIBLY include this code directly in the functions below for easier sequencing by novices
+var popupHTML = function(photo){
+  var result = "";
+      result = '<strong>'+photo.title+'</strong><br>';
+      result += '<a href="'+photo.url_m+'" target="_blank">';
+      result += '<img src="'+photo.url_s+'"></a>';      //was url_t; want url_s; can change to url_m if desired, but frame needs work
+      result += '<small>click image to enlarge in new tab</small>';
+      return result;
+}
+// Load photos from flickr JSON (insert your flickrURL above), display with clickable photo thumbnails
+$.getJSON(flickrURL, function (data) {
+  // Create new layerGroup for the markers, with option to append ".addTo(map);" to display by default
+  var layerGroup = new L.LayerGroup().addTo(map);
+  // Add layerGroup to your layer control and insert your label to appear in legend
+  controlLayers.addOverlay(layerGroup, 'HPHS photo icons');
+  // Start a loop to insert flickr photo data into photoContent
+  for (var i = 0; i < data.photos.photo.length; i++) {
+    var photoContent = data.photos.photo[i];
+    var photoIcon = L.icon(
+      {iconUrl: photoContent.url_t,
+      iconSize: [photoContent.width_t * 0.5, photoContent.height_t * 0.5]}  //reduces thumbnails 50%
+    );
+    var marker = new L.marker([photoContent.latitude, photoContent.longitude], {icon: photoIcon});
+    marker.bindPopup(popupHTML(photoContent));
+    // Add the marker to the layerGroup
+    marker.addTo(layerGroup);
+  }
+});
+```
 - Create leaflet-storymap-polygons version to tell stories about map boundaries (rather than points). Try creating each boundary chapter as its own geojson file (data1.js, data2.js, etc.), add each when chapter loads (and remove when scrolling backwards), and use fitBounds for each chapter geojson (or a filled-in geojson to draw attention to an area). See http://github.io/jackdougherty/leaflet-storymap-polygons/
 
 ## Code contributions welcome

data.geojson

@@ -1,9 +1,9 @@
 {
 "type": "FeatureCollection",
 "features": [
-{ "type": "Feature", "properties": { "id": 1, "chapter": "Chapter 1 Here", "zoom": 17, "image": "img/HPHS1847_300.jpg", "source-credit": "Source: to come", "source-link":"http://www.google.com", "description": "Description for image 1" }, "geometry": { "type": "Point", "coordinates": [ -72.6782, 41.7676 ] } },
-{ "type": "Feature", "properties": { "id": 2, "chapter": "Chapter 2 which is longer than the other titles", "zoom": 17, "image": "img/HPHS1869_300.jpg", "source-credit": "Source: to come", "source-link": "http://www.google.com", "description": "Description for image 2, which is much, much, much longer than the other descriptions. So long, in fact, that it tests how this code displays longer text. And by longer, I mean much longer than the others. Really long. Like, several sentences. Really. Long." }, "geometry": { "type": "Point", "coordinates": [ -72.6848, 41.7677 ] } },
-{ "type": "Feature", "properties": { "id": 3, "chapter": "Chapter 3", "zoom": 17, "image": "img/HPHS1911_300.jpg", "source-credit": "Source: to come", "source-link": "http://www.google.com", "description": "description for image 3: By design, this remains on the same location as chapter 2, to tell extended story." }, "geometry": { "type": "Point", "coordinates": [ -72.6848, 41.7677 ] } },
-{ "type": "Feature", "properties": { "id": 4, "chapter": "Chapter 4 Here", "zoom": 16, "image": "https://upload.wikimedia.org/wikipedia/commons/a/a5/Information_example_page2_300px.jpg", "source-credit": "Source: Wikimedia", "source-link": "https://upload.wikimedia.org/wikipedia/commons/a/a5/Information_example_page2_300px.jpg", "description": "Description for image 4 (which is loaded from an external source). Source credit is intentionally blank." }, "geometry": { "type": "Point", "coordinates": [ -72.701, 41.7652 ] } }
+{ "type": "Feature", "properties": { "id": 1, "chapter": "Chapter 1 Subtitle", "zoom": 15, "image": "img/HPHS1847_300.jpg", "source-credit": "Source: Hartford Public High School 1847, from Quadrennial Catalogue 1904", "source-link":"https://www.flickr.com/photos/56513965@N06/21047067205", "description": "This scroll-driven storymap is built on an open-source Leaflet template. All of the narrative text, point coordinates, and image links are stored in a data.geojson file. Storing the data in GeoJSON, a popular open-standard format, makes it easy to create new storymaps, and to preserve data separately from the mapping code." }, "geometry": { "type": "Point", "coordinates": [ -72.6782, 41.7676 ] } },
+{ "type": "Feature", "properties": { "id": 2, "chapter": "Chapter 2 Subtitle", "zoom": 17, "image": "img/HPHS1869_300.jpg", "source-credit": "Source: Hartford Public High School circa 1910, from HartfordHistory.net", "source-link": "https://www.flickr.com/photos/56513965@N06/20858966100", "description": "A different zoom level for each chapter can be entered into the data.geojson file. " }, "geometry": { "type": "Point", "coordinates": [ -72.6848, 41.7677 ] } },
+{ "type": "Feature", "properties": { "id": 3, "chapter": "Chapter 3 Subtitle", "zoom": 13, "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/UCONNfromsky.jpg/320px-UCONNfromsky.jpg", "source-credit": "Source: Global Jet/Wikimedia", "source-link": "https://commons.wikimedia.org/wiki/File:UCONNfromsky.jpg", "description": "Images in this sample are about 300px wide. Images can be uploaded into a local subfolder or pulled from an external source (such as the photo above), by inserting the file pathname or URL into the data.geojson file." }, "geometry": { "type": "Point", "coordinates": [ -72.2561692, 41.8077414 ] } },
+{ "type": "Feature", "properties": { "id": 4, "chapter": "Chapter 4 Subtitle", "zoom": 14, "image": "img/NewHavenGreen1919_300.jpg", "source-credit": "Source: Wikimedia", "source-link": "https://en.wikipedia.org/wiki/New_Haven,_Connecticut#/media/File:NewHavenGreenCTSouvenirPic1919-1.jpg", "description": "The Leafet 1.x code includes a 'fly to' feature that animates the distance traveled from one map point to the next. For instructions on how to create your own Leaflet storymap from this template, click on 'View the code in GitHub' at the bottom of the map." }, "geometry": { "type": "Point", "coordinates": [ -72.9292037, 41.308053 ] } }
 ]
 }

index.html

@@ -8,12 +8,16 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
+<!-- Font-Awesome and leaflet.extramarkers dependency -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+<script src="markers/leaflet.extra-markers.min.js"></script>
+<link rel="stylesheet" href="markers/leaflet.extra-markers.min.css">
 <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
 <div id="narration">
-  <div id="title" class="title-text">Hartford Public High School locations, 1847-present<br>
+  <div id="title" class="title-text">Insert Title of Leaflet Storymap<br>
     <small>Scroll &#x25BE;</small>
   </div>
   <div id="contents"></div>

script.js

@@ -54,7 +54,16 @@ function initMap() {
     var geojson = L.geoJson(data, {
       onEachFeature: function (feature, layer) {
         (function(layer, properties) {
-          // Create Contents elements
+          // Create numerical icons to match the ID numbers
+          // OR remove the next 6 lines for default blue Leaflet markers
+          var numericMarker = L.ExtraMarkers.icon({
+            icon: 'fa-number',
+            number: feature.properties['id'],
+            markerColor: 'blue'
+          });
+          layer.setIcon(numericMarker);
+
+          // Create the contents of each chapter
           var chapter = $('<p></p>', {
             text: feature.properties['chapter'],
             class: 'chapter-header'