Plpeople popups

README.md

@@ -167,11 +167,11 @@ Click on the button at the bottom on the left side of a map to generate an embed
 The information of each layer can be found here: [Layer Information](https://publiclab.org/notes/sagarpreet/06-06-2018/leaflet-environmental-layer-library)
 
 
-| Layer Name                  | Color   |
-| --------------------------- | ------- |
-| `PLpeople`                    | N/A     |
-| `wisconsin`                   | N/A     |
-| `fracTrackerMobile`           | N/A     |
+| Layer Name                    | Color     |
+| ----------------------------- | --------- |
+| `PLpeople`                    | N/A       |
+| `wisconsin`                   | N/A       |
+| `fracTrackerMobile`           | N/A       |
 | `purpleLayer`                 | `#8b0000` |
 | `purpleairmarker`             | `#800080` |
 | `skytruth`                    | `#ff0000` |
@@ -212,10 +212,10 @@ The information of each layer can be found here: [Layer Information](https://pub
 | `aqicnLayer`                  | `#000000` |
 | `openaq`                      | `#000000` |
 | `luftdaten`                   | `#000000` |
-| `opensense`                   | N/A     |
-| `osmLandfillMineQuarryLayer`  | N/A     |
+| `opensense`                   | N/A       |
+| `osmLandfillMineQuarryLayer`  | N/A       |
 | `eonetFiresLayer`             | `#78fffa` |
-| `Unearthing`                  | N/A     |
+| `Unearthing`                  | N/A       |
 
 
 ## Adding LEL features individually
@@ -248,24 +248,31 @@ The optional options object can be passed in with any of the following propertie
         var hash = new L.FullHash(map, allMapLayers);  
 
 ### _Add the layers menu_
+
 #### Prerequisites
+
 - Bootstrap
 - jQuery
+
 #### Dependencies
 
+- Install Bootstrap(Required for the layers menu)
+- Install @fortawesome/fontawesome-free
+- Add the following to the head of the HTML file that would contain the map
+
 ```
-  <!-- jQuery --> 
-  <script src="../node_modules\jquery\dist\jquery.min.js"></script>
+<!-- jQuery --> 
+<script src="../node_modules\jquery\dist\jquery.min.js"></script>
 
-  <!-- Bootstrap --> 
-  <script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
-  <link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
-  
-  <!-- Required includes -->
-  <script src="../dist/LeafletEnvironmentalLayers.js"></script>
-  <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
-  <link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
-  <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
+<!-- Bootstrap --> 
+<script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
+<link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
+
+<!-- Required includes -->
+<script src="../dist/LeafletEnvironmentalLayers.js"></script>
+<link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
+<link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
+<link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
 ```
 
 #### Usage example
@@ -339,8 +346,7 @@ The optional options object can be passed in with any of the following propertie
         <script src="../node_modules/leaflet-blurred-location/dist/Leaflet.BlurredLocation.js"></script>
         <script src="../node_modules/leaflet.blurred-location-display/dist/Leaflet.BlurredLocationDisplay.js"></script>
 
-
-### _Real Time Layers_
+### _Real Time Layers
 
 #### city (by openWeather)
 

_SpecRunner.html

@@ -84,6 +84,8 @@
 
   <script src="src/util/spiderfyMarkers.js"></script>
 
+  <script src="src/util/timeago.js"></script>
+
   <script src="dist/LeafletEnvironmentalLayers_babel.js"></script>
 
   <script src="dist/util/layersBrowser_babel.js"></script>

cypress/integration/eonetFiresLayer.spec.js

@@ -44,4 +44,4 @@ describe('Eonet fires layer', function() {
     cy.get('.leaflet-overlay-pane svg g').children().should('have.length', 0)
   })
 
-})
+})

dist/LeafletEnvironmentalLayers.css

@@ -172,6 +172,34 @@
   transform: translate(-50%, -50%);
 }
 
+/*-- Style for new PLlayer popups --*/
+.leaflet-popup.lbld-popup .leaflet-popup-content {
+      margin: 15px;
+}
+.leaflet-popup .leaflet-popup-content img.profile-thumb  {
+      width: 50px;
+      height: 50px;
+      border-radius: 25px;
+      object-fit: cover;
+      overflow: hidden;
+      margin-right: 9px;
+}
+.leaflet-popup .leaflet-popup-content h5 {
+      margin-bottom: 4px;
+}
+.leaflet-popup .popup-two-column {
+      display: flex;
+      flex-wrap: none;
+      width: 100%;
+      justify-content: space-between;
+}
+.leaflet-popup .popup-stretch-column {
+      flex: 1 1 100%;
+}
+.leaflet-popup .popup-shrink-column {
+      flex: 0 1 auto;
+}
+
 /*-- Media queries for new layers menu control --*/