Merge pull request #1 from OpenDRR/leaflet-manual-integration

Leaflet manual integration

README.md

@@ -4,4 +4,6 @@ Deploy site on GitHub Pages
 
 Deploy locally
 
-1. `bundle exec jekyll serve --baseurl ''`
+1. `bundle exec jekyll serve --baseurl ''`
+
+Note this manual integration of Leaflet was taken from: https://robyremzy.github.io/blog/2016/leaflet-inside-a-post/

_config.yml

@@ -284,4 +284,5 @@ stylesheets:
     crossorigin: "anonymous"
 theme-name: GCWeb
 title: "gcweb-jekyll" # Site name or title
-wetSiteRoot: "https://wet-boew.github.io/wet-boew"
+wetSiteRoot: "https://wet-boew.github.io/wet-boew"
+leaflet: "[email protected]"

_includes/footerresources.html

@@ -1,6 +1,9 @@
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script src="{{ site.assets }}/{{ site.theme-name }}/wet-boew/js/wet-boew.min.js"></script>
+  <!-- {% if page.leaflet == true %}
+  <script src="https://unpkg.com/{{ site.leaflet }}/dist/leaflet.js"></script>
+  {% endif %} -->
   {% if site.themeJS == true %}<script src="{{ site.assets }}/{{ site.theme-name }}/js/theme.min.js"></script>{% endif %}
   {% if section == "mobile-centre" %}<script src="{{ site.assets }}/js/whole-record-link.min.js"></script>{% endif %}
   {% if page.javascripts %}{% for script in page.javascripts %}<script {% for attr in script %}{% if attr[0] == 'src' or attr[0] == 'data-main' %}{{ attr[0] }}="{{ attr[1] | relative_url }}" {% else %}{{ attr[0] }}="{{ attr[1] }}" {% endif %}{% endfor %}></script>{% endfor %}{% endif %}

_includes/headresources.html

@@ -1,5 +1,8 @@
-<link href="{{ site.assets }}/{{ site.theme-name }}/assets/favicon.ico" rel="icon" type="image/x-icon" />
+    <link href="{{ site.assets }}/{{ site.theme-name }}/assets/favicon.ico" rel="icon" type="image/x-icon" />
     <link rel="stylesheet" href="{{ site.assets }}/{{ site.theme-name }}/css/theme.css" />
+    {% if page.leaflet == true %} 
+    <link rel="stylesheet" href="https://unpkg.com/{{ site.leaflet }}/dist/leaflet.css" />
+    {% endif %}
     {% if site.stylesheets %}{% for sheet in site.stylesheets %}<link rel="stylesheet" {% for entry in sheet %}{% if entry[0] == 'href' %}{{ entry[0] }}="{{ entry[1] | relative_url }}" {% else %}{{ entry[0] }}="{{ entry[1] }}" {% endif %}{% endfor %}/>{% endfor %}{% endif %}
     {% if page.stylesheets %}{% for sheet in page.stylesheets %}<link rel="stylesheet" {% for entry in sheet %}{% if entry[0] == 'href' %}{{ entry[0] }}="{{ entry[1] | relative_url }}" {% else %}{{ entry[0] }}="{{ entry[1] }}" {% endif %}{% endfor %}/>{% endfor %}{% endif %}
 

_includes/leaflet.html

@@ -0,0 +1,143 @@
+<div id="map" class="leafmap" style="width: 100%;height:300px;"></div>
+<script src="https://unpkg.com/{{ site.leaflet }}/dist/leaflet.js"></script>
+<script>
+{% if page.leaflet %}
+// L.Icon.Default.imagePath = '{{ "images/carto/" | prepend: site.baseurl }}';
+
+var viirs = 'VIIRS_SNPP_CorrectedReflectance_TrueColor';
+// var modis = 'MODIS_Terra_CorrectedReflectance_TrueColor';
+
+var basemap = {
+  'OpenStreetMap': L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    'attribution': '&copy; <a href="https://osmlab.github.io/attribution-mark/copyright/?name={{ site.title }}">OpenStreetMap</a> contributors',
+    'minZoom': 2,
+    'maxZoom': 19
+  }),
+  'Thunderforest': L.tileLayer('https://{s}.tile.thunderforest.com/' + '{% if include.tf_layer %}{{ include.tf_layer }}{% else %}outdoors{% endif %}' + '/{z}/{x}/{y}.png', {
+    'attribution': 'Maps &copy; <a href="http://www.thunderforest.com/">Thunderforest</a>, &copy; <a href="https://osmlab.github.io/attribution-mark/copyright/?name={{ site.title }}">OpenStreetMap</a> contributors',
+    'minZoom': 2,
+    'maxZoom': 19
+  }),
+  'Carto': L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/' + '{% if include.c_layer %}{{ include.c_layer }}{% else %}dark_all{% endif %}' + '/{z}/{x}/{y}.png', {
+    'attribution': '&copy; <a href="http://cartodb.com/attributions">CartoDB</a>, &copy; <a href="https://osmlab.github.io/attribution-mark/copyright/?name={{ site.title }}">OpenStreetMap</a> contributors',
+    'minZoom': 2,
+    'maxZoom': 19
+  }),
+  'Esri': L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+    'attribution': 'Tiles &copy; Esri, &copy; <a href="https://osmlab.github.io/attribution-mark/copyright/?name={{ site.title }}">OpenStreetMap</a> contributors',
+    'minZoom': 3,
+    'maxZoom': 18
+  }),
+  'Gibs': L.tileLayer('https://map1.vis.earthdata.nasa.gov/wmts-webmerc/' + viirs + '/default/' + '{{ page.date| date: "%Y-%m-%d" }}' + '/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg', {
+    'attribution': 'Maps &copy; <a href="http://earthdata.nasa.gov">Gibs</a>, &copy; <a href="https://osmlab.github.io/attribution-mark/copyright/?name={{ site.title }}">OpenStreetMap</a> contributors',
+    'minZoom': 3,
+    'maxZoom': 9
+  })
+};
+
+var map = L.map('map', {
+  {% if page.latlng %}
+  'center': [{{ page.latlng[0] }}, {{ page.latlng[1] }}],
+  'zoom': {{ page.zoom }},
+  {% if include.leaflet_tile %}
+  'layers': [basemap.{{ include.leaflet_tile }}]
+  {% else %}
+  'layers': [basemap.OpenStreetMap]
+  {% endif %}
+	{% endif %}
+});
+map.scrollWheelZoom.disable();
+{% endif %}
+
+{% if page.mlatlng %}
+var marker = L.marker(
+  [{{ page.mlatlng[0] }}, {{ page.mlatlng[1] }}]
+).addTo(map);
+{% endif %}
+
+{% if page.icon %}
+var xmarker = L.icon({
+  iconUrl: '{{ page.icon | prepend: site.baseurl }}',
+  iconRetinaUrl: '{{ page.icon | prepend: site.baseurl }}',
+  iconSize: [37, 50],
+  iconAnchor: [18.5, 50],
+  popupAnchor: [0, -51]
+});
+
+var marker = L.marker([{{ page.mlatlng[0] }}, {{ page.mlatlng[1] }}], {
+  icon: {{ page.icon }}
+}).addTo(map);
+{% endif %}
+
+{% if page.mpop or page.icon %}
+marker.bindPopup("{{ page.mpop }}").openPopup();
+{% endif %}
+
+{% if page.layer %}
+var layer_obj;
+fetch( "{{page.layer}}" ).then(( resp ) => {
+    return resp.json();
+}).then(( data ) => {
+    layer_obj = data;
+    _addGeoJSONObjToMap( layer_obj, map );
+}).catch(( err ) => {
+    console.log( err );
+    _addGeoJSONObjToMap( layer_obj, map );
+});
+{% endif %}
+
+function _onEachFeature( feature, layer ) {
+    var potentialPopup = ""
+    if ( feature.properties && feature.properties.popupContent ) {
+        potentialPopup += feature.properties.popupContent;
+    }
+    if ( feature.properties && feature.properties.href ) {
+        potentialPopup += 
+            '<a href="' + feature.properties.href + '">' + 
+                '<img src="' + newWindowImgSrcBase64 + '"></img></a>';}
+    if( potentialPopup ){
+        layer.bindPopup(potentialPopup );
+    }
+}
+
+function _addGeoJSONObjToMap( leafletItem, map ){
+  var geojson = L.geoJSON( leafletItem, { 
+      onEachFeature: _onEachFeature,
+      style: featureStyle
+  } );
+  layers = geojson.getLayers();
+  for ( var i=0; i<layers.length; i++ ){
+      try {
+          var geom = layers[i].feature.geometry;
+          if (!( 'center' in tagInputArg )){
+              // If the user didn't specify a center, infer from geojson
+              map.panTo( new L.LatLng( geom.coordinates[1],
+                                      geom.coordinates[0] ) );
+          }
+      } catch( e ){ }
+  }
+  geojson.addTo( map );
+}
+
+function getColor(d) {
+    return d > 1000 ? '#800026' :
+           d > 500  ? '#BD0026' :
+           d > 200  ? '#E31A1C' :
+           d > 100  ? '#FC4E2A' :
+           d > 50   ? '#FD8D3C' :
+           d > 20   ? '#FEB24C' :
+           d > 10   ? '#FED976' :
+                      '#FFEDA0';
+}
+
+function featureStyle(feature) {
+    return {
+        fillColor: getColor(feature.properties.CensusPop),
+        weight: 1,
+        opacity: 1,
+        color: 'white',
+        dashArray: '0',
+        fillOpacity: 0.7
+    };
+}
+</script>

_pages/en/index.md

@@ -13,9 +13,17 @@ subject:
   en: [GV Government and Politics, Government services]
   fr: [GV Gouvernement et vie politique, Services gouvernementaux]
 title: Test page - Canada.ca
+# Leaflet
+leaflet: true
+latlng: [49.24, -123.11]
+zoom: 10
+layer: "/assets/data/dsra_sim6p8_cr2022_rlz_1_b0_casualties_agg_view.geojson"
+# mlatlng: [49.24, -123.11] # marker lat/lon
 ---
 # {{ page.contentTitle }}
 
+{% include leaflet.html %}
+
 This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
 
 Text can be **bold**, _italic_, or ~~strikethrough~~.