publiclab/plots2

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en&key=AIzaSyDWgc7p4WWFsO3y0MTe50vF4l4NUPcPuwE"></script> 

<div class="container">
  <form method="GET" action="/users/map" id="search">
    <div class="row">
      <div class="col-lg-1">
        <label for="search"><%= translation('users.map.search') %></label>
      </div>
      <div class="form-group col-lg-1">
        <select name="tag" id="tag_type" class="form-control" value="<%= params[:tag] %>">
          <option></option>
          <option><%= translation('users.map.skill') %></option>
          <option><%= translation('users.map.gear') %></option>
          <option><%= translation('users.map.role') %></option>
          <option><%= translation('users.map.tool') %></option>
        </select>
      </div>
      <div class="form-group col-lg-2">
        <input id="tag_value" type="text" name="value" class="form-control" value="<%= params[:value] %>">
      </div>
    </div>

    <div class="row">
      <div class="col-lg-1">
        <label for="search location"><%= translation('users.map.location') %></label>
      </div>
      <div class="form-group col-lg-3">
        <input type="text" name="country" class="form-control" id="country" value="<%= params[:country] %>">
      </div>
    </div>
    
    <div class="row">
      <div class="col-lg-offset-1">
        <input type="submit" id="submit" value="Search" class="btn btn-primary">
      </div>
    </div>
  </form>
  <br >
  <div id="users_map" class="row"></div>
</div>


<script type="text/javascript">
  
  $(document).ready(function() {
    $("#tag_type").val("<%= params[:tag] %>");

    <% if @location_tags %>
      $("#users_map").html("<div id='map' class='col-lg-12' style='height:500px;'></div>");

      var user_map = L.map('map').setView([15,0], 2);
      L.tileLayer('https://api.mapbox.com/styles/v1/jywarren/ckj06ujnc1nmi19nuelh46pr9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoianl3YXJyZW4iLCJhIjoiVzVZcGg3NCJ9.BJ6ArUPuTs1JT9Ssu3K8ig', {
        tileSize: 512,
        zoomOffset: -1,
        attribution: '© <a href="https://apps.mapbox.com/feedback/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      }).addTo(user_map);

      <% @location_tags.each do |location_tag, user_tag| %>

        var marker = L.marker([<%= location_tag[0] %>, <%= location_tag[1] %>]).addTo(user_map);
        var contents = "";

        <% user_tag.each do |tag| %>
          contents += "<b><%= tag.value %></b><br />"
        <% end %>
        marker.bindPopup(contents)
        marker.openPopup()

      <% end %>
    <% elsif @users %>
      $('#users_map').html("<div id='map' class='col-lg-12' style='height:500px;'></div>");

      <% if !@country.nil? and !@country.empty? %>
        <%  geo_location = Geocoder.search("#{@country}").first || "" %>
        var user_map = L.map('map').setView([<%= geo_location.latitude %>, <%= geo_location.longitude %>], 4);
      <% else %>
        var user_map = L.map('map').setView([15,0], 2);
      <% end %>
      
      L.tileLayer('https://api.mapbox.com/styles/v1/jywarren/ckj06ujnc1nmi19nuelh46pr9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoianl3YXJyZW4iLCJhIjoiVzVZcGg3NCJ9.BJ6ArUPuTs1JT9Ssu3K8ig', {
        tileSize: 512,
        zoomOffset: -1,
        attribution: '© <a href="https://apps.mapbox.com/feedback/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      }).addTo(user_map);

      <% @users.each do |user| %>
        <% location_privacy = user.user.location_privacy %>

        <% if !location_privacy %>
          var options = {
            radius : 20,
            opacity: 0.5,
            duration: 200,
            lng: function(d){ return d[1]; },
            lat: function(d){ return d[0]; },
            value: function(d){ return d.length; },
            valueFloor: 0,
            valueCeil: undefined,
            colorRange: ['#f7fbff', '#08306b'],
            onmouseover: function(d, node, layer) {},
            onmouseout: function(d, node, layer) {},
            onclick: function(d, node, layer) {}
          }

          var hexlayer = L.hexbinLayer(options).addTo(user_map);
          hexlayer.colorScale().range(["white", "grey"]);
          hexlayer.data([[<%= user.location_tag.lat %>, <%= user.location_tag.lon %>]]);
        <% else %>
          var marker = L.marker([<%= user.location_tag.lat %>, <%= user.location_tag.lon %>]);
          marker.addTo(user_map);
          marker.bindPopup("<b><%= user.name %></b>");
        <% end %>
      <% end %>

    <% end %>
  });

</script>