index.html.erb

<%= javascript_include_tag('/lib/leaflet-fullhash/leaflet-fullHash.js') %>
<%= javascript_include_tag('https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js') %>
<%= stylesheet_link_tag "https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css" %>

<%= javascript_include_tag('/lib/leaflet-spin/example/spin/dist/spin.min.js') %>
<%= javascript_include_tag('/lib/leaflet-spin/example/leaflet.spin.min.js') %>

<div class="container-fluid">
  <div id="mapknitter-unique" style="height: 300px ; width: 100% ;  margin-bottom: 1%; z-index: 5;"></div> 
  <div class="row">
    <div class="col-3">
      <% if logged_in? %>
      <a class="btn btn-lg btn-outline-primary btn-block" href="<%= new_map_url %>">
        <i class="fa fa-plus-circle"></i> Create a map
      </a>
      <% else %>
          <br>
          <p>
          <a href="#" data-toggle="modal" data-target="#loginModal" onClick="$('.mini-login').toggle()">Log in</a> to create a map, or if you have privacy concerns, you may <a onClick="$('.hidden-map-btn').show()" href="#">create a map anonymously.</a>
          </p>
          <hr />

      <div class="well mini-login" style="display:none;">
        <%= render partial: "layouts/login_modal" %>
      </div>

      <div class="hidden-map-btn" style="display:none;">
        <p>
          Please consider <a href="#" onClick="$('.mini-login').toggle()">logging in</a>; anonymous maps are intended for those with privacy concerns and may lack some features.<br />
        </p>
        <p>
          <a class="btn btn-lg btn-primary create-map" href="<%= new_map_url %>">
            <i class="fa fa-plus-circle"></i> Create an anonymous map
          </a>
        </p>
      </div>
      <% end %>

      <div>
        <br />
        <%= render :partial => "layouts/header" %>
        <br />
      </div>

      <iframe style="margin-top:10px;border:none;width:100%;height:180px;" src="https://publiclab.org/features/embed/mapknitter-sidebar"></iframe>

      <div class="d-none d-sm-block d-sm-none d-md-block">
        <%= render 'map/regions' %>
        <%= render 'map/authors' %>
        <%= render :partial => 'maps/statistics' %>
      </div>
    </div><!-- .col-md-3 -->

    <div class="maps-list col-md-9">
      <div class="hero">
        <h1 style="margin-top:4px;">Make maps from aerial photos</h1>
        <p>
          <a class="btn btn-lg btn-primary" href="http://publiclab.org/wiki/mapknitter"><i class="fa fa-book"></i> Learn how</a>
          <a class="btn btn-lg btn-success" onClick="$('#video-tutorial').toggle()"><i class="fa fa-video-camera" style="color:white;"></i> Watch tutorial video</a>
          <a class="btn btn-lg btn-primary" href="https://publiclab.org/wiki/mapknitter#Questions"><i class="fa fa-question-circle"></i> Ask a question</a>
        </p>

      </div>

      <div style="display:none;" id="video-tutorial">
        <iframe width="100%" height="450" src="https://www.youtube.com/embed/0h6MBH6f2js?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <ul class="nav nav-tabs" role="tablist" style="border-bottom: none; margin-bottom: 20px;">
        <li class="nav-item">
          <a class="nav-link active" id="show-featured-images" data-toggle="tab" href="#featured-images" role="tab" aria-selected="true"><%= @title ||= "Featured" %></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="show-anonymous-images" data-toggle="tab" href="#anonymous-images" role="tab" aria-selected="false">Anonymous</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="show-all-images" data-toggle="tab" href="#all-images" role="tab" aria-selected="false">All</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/authors" role="tab" aria-selected="false">Author</a>
        </li>
        <% if params[:controller] == "tags" %>
        <li class="nav-item">
          <a class="nav-link" role="tab" href="/feeds/tag/<%= params[:id] %>" aria-selected="false">RSS</a>
        </li>
        <% end %>
      </ul>

    <div class="tab-content">
      <div class="tab-pane fade show active" id="featured-images" role="tabpanel">
        <div class="row row-eq-height map-list">
          <% @maps.each_with_index do |map,i| %>
              <% if map.author != "anonymous" %>
            <%= render :partial => 'maps/list', :locals => {:map => map} %>
          <% end %>
        <% end %>
      </div>
      </div>
      <div class="tab-pane fade"  id="all-images" role="tabpanel">
        <div class="row row-eq-height map-list">
           <% @maps.each_with_index do |map,i| %>
            <%= render :partial => 'maps/list', :locals => {:map => map} %>
          <% end %>
        </div>
      </div>
      <div class="tab-pane fade" id="anonymous-images" role="tabpanel">
        <div class="row row-eq-height map-list">
        <% @maps.each_with_index do |map,i| %>
          <% if map.author == "anonymous" %>
            <%= render :partial => 'maps/list', :locals => {:map => map} %>
          <% end %>
        <% end %>
      </div>
      </div>
    </div>

      <br style="clear:both;" />
      <%= will_paginate @maps, list_classes: %w(pagination justify-content-center), previous_label: 'Prev', next_label: 'Next', renderer: WillPaginate::ActionView::BootstrapLinkRenderer unless @unpaginated %>
    </div><!-- .col-md-9 -->
  </div><!-- .row -->
</div>

<script>
  $(function(){
    $("#loginModal").appendTo("body");
  });
    var bounds = new L.LatLngBounds(new L.LatLng(84.67351257 , -172.96875) , new L.LatLng(-54.36775852 , 178.59375)) ;
    var Mapknitterunique = new L.map('mapknitter-unique' , {
      maxBounds: bounds , 
      maxBoundsViscosity: 0.75
    }).setView([43, -83] , 2);  
    Mapknitterunique.options.minZoom = 2 ;

    //L.tileLayer('').addTo() ; 
  //  L.layerGroup.mapKnitterLayer().addTo(Mapknitterunique);
     var baselayer = L.tileLayer('https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(Mapknitterunique) ; 

    Mapknitterunique.addControl(new L.Control.Fullscreen()); // to go full-screen
    Mapknitterunique.on('fullscreenchange', function () {
      if (Mapknitterunique.isFullscreen()) {
        Mapknitterunique.options.minZoom = 3 ;
       } 
      else {
        Mapknitterunique.options.minZoom = 1 ;
       // Mapknitterunique.panTo(new L.LatLng(lat,lon));
      }
    });

   // var PurpleLayer = L.layerGroup.purpleLayer() ;
    var PurpleAirMarkerLayer = L.layerGroup.purpleAirMarkerLayer() ;
    var SkyTruth = L.layerGroup.skyTruthLayer() ;
    var Fractracker = L.layerGroup.fracTrackerLayer() ;
    var OdorReport = L.layerGroup.odorReportLayer() ;
    var MapKnitter = L.layerGroup.mapKnitterLayer().addTo(Mapknitterunique) ;
    var ToxicRelease = L.layerGroup.toxicReleaseLayer() ;

    var OpenInfraMap_Power = L.tileLayer('https://tiles-{s}.openinframap.org/power/{z}/{x}/{y}.png',{
        maxZoom: 18,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://www.openinframap.org/about.html">About OpenInfraMap</a>'
    });
    var OpenInfraMap_Petroleum = L.tileLayer('https://tiles-{s}.openinframap.org/petroleum/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://www.openinframap.org/about.html">About OpenInfraMap</a>'
    });
    var OpenInfraMap_Telecom = L.tileLayer('https://tiles-{s}.openinframap.org/telecoms/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://www.openinframap.org/about.html">About OpenInfraMap</a>'
    });
    var OpenInfraMap_Water = L.tileLayer('https://tiles-{s}.openinframap.org/water/{z}/{x}/{y}.png',{
      maxZoom: 18,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://www.openinframap.org/about.html">About OpenInfraMap</a>'
    });

    var Justicemap_income = L.tileLayer.provider('JusticeMap.income') ;
    var JusticeMap_americanIndian = L.tileLayer.provider('JusticeMap.americanIndian') ;
    var JusticeMap_asian = L.tileLayer.provider('JusticeMap.asian') ;
    var JusticeMap_black = L.tileLayer.provider('JusticeMap.black') ;
    var JusticeMap_multi = L.tileLayer.provider('JusticeMap.multi') ;
    var JusticeMap_hispanic = L.tileLayer.provider('JusticeMap.hispanic') ;
    var JusticeMap_nonWhite = L.tileLayer.provider('JusticeMap.nonWhite') ;
    var JusticeMap_white = L.tileLayer.provider('JusticeMap.white') ;
    var JusticeMap_plurality = L.tileLayer.provider('JusticeMap.plurality') ;
    
    var clouds = L.OWM.clouds({showLegend: true, opacity: 0.5});
    var cloudscls = L.OWM.cloudsClassic({});
    var precipitation = L.OWM.precipitation({});
    var precipitationcls = L.OWM.precipitationClassic({});
    var rain = L.OWM.rain({});
    var raincls = L.OWM.rainClassic({});
    var snow = L.OWM.snow({});
    var pressure = L.OWM.pressure({});
    var pressurecntr = L.OWM.pressureContour({});
    var temp = L.OWM.temperature({});
    var wind = L.OWM.wind({});

    var city = L.OWM.current({intervall: 15, minZoom: 3});
    var windrose = L.OWM.current({intervall: 15, minZoom: 3, markerFunction: myWindroseMarker, popup: false, clusterSize: 50,imageLoadingBgUrl: 'https://openweathermap.org/img/w0/iwind.png' });
    windrose.on('owmlayeradd', windroseAdded, windrose); 

    var baseMaps = {
      "Baselayer1": baselayer
    };
    var overlayMaps = {
     // "PurpleAirLayer-HeatMap": PurpleLayer ,
      "PurpleAirLayer-Markers": PurpleAirMarkerLayer ,
      "SkyTruth": SkyTruth , 
      "Fractracker" : Fractracker ,
      "ToxicRelease": ToxicRelease ,
      "OdorReport": OdorReport ,
      "MapKnitter": MapKnitter ,
      "OpenInfraMap_Power": OpenInfraMap_Power ,
      "OpenInfraMap_Telecom": OpenInfraMap_Telecom ,
      "OpenInfraMap_Petroleum": OpenInfraMap_Petroleum ,
      "OpenInfraMap_Water": OpenInfraMap_Water ,
      "Justicemap_income": Justicemap_income,
      "JusticeMap_americanIndian": JusticeMap_americanIndian ,
      "JusticeMap_asian": JusticeMap_asian ,
      "JusticeMap_black": JusticeMap_black,
      "JusticeMap_multi": JusticeMap_multi ,
      "JusticeMap_hispanic": JusticeMap_hispanic ,
      "JusticeMap_nonWhite": JusticeMap_nonWhite,
      "JusticeMap_white": JusticeMap_white ,
      "JusticeMap_plurality": JusticeMap_plurality ,
         "Clouds": clouds ,
         "clouds (classic)": cloudscls ,
         "precipitation": precipitation ,
         "precipitation (classic)": precipitationcls , 
         "rain": rain , 
         "rain (classic)": raincls ,
         "snow": snow , 
         "pressure": pressure ,
         "pressure contour (zoom in)": pressurecntr , 
         "temp": temp , 
         "wind": wind , 
         "Cities (zoom in)": city  , 
         "windrose (zoom in)": windrose
    };
    L.control.layers(baseMaps,overlayMaps).addTo(Mapknitterunique);
    
</script>