publiclab/plots2

<% unique_id = rand(1000) %>

  <style>
    #map<%= unique_id %> { width:100%; height:300px; margin: 0; position: relative;}
    #postOnMap<%= unique_id %> {
      margin-top: 5px;
    }
    a.grid-embed {
      float:right;
      padding:8px;
    }
    a.grid-embed:hover {
      color: #888;
    }
  </style>

  <div class="leaflet-map inline-map inline-fullwidth-content" id="map<%= unique_id %>"></div>

  <a id="iframeID<%= unique_id %>" class="grid-embed" rel="tooltip" title="Embed this map on another site."><i class="fa fa-code" style="color:#aaa;"></i></a>

  <p><i><small>
    <button id="postOnMap<%= unique_id %>" class="btn btn-primary">Add a story +</button>
  </small></i></p>

<script>

    var bounds = new L.LatLngBounds(new L.LatLng(84.67351257 , -172.96875) , new L.LatLng(-54.36775852 , 178.59375)) ;

    var map<%= unique_id %> = L.map('map<%= unique_id %>', {
      maxBounds: bounds ,
      maxBoundsViscosity: 0.75,
      fullscreenControl: true,
      scrollWheelZoom: false,
      fullscreenControlOptions: {
        position: 'topleft'
    }}).setView([<%= lat %>,<%= lon %>], <%= lat.to_s.length.to_i %> + 6);

    var button<%= unique_id %> = document.getElementById('postOnMap<%= unique_id %>');

    button<%= unique_id %>.addEventListener('click', function(event) {
      var center_lat = map<%= unique_id %>.getCenter().lat;
      var center_lng = map<%= unique_id %>.getCenter().lng;
      var center_zoom = map<%= unique_id %>.getZoom();
      window.location.href='/post?tags=lat:' + center_lat + ',lon:' + center_lng + ',zoom:' + center_zoom + '&title=This post will apppear on maps';
    });

    var markers_hash<%= unique_id %> = new Map() ;
    var map_lat = <%= lat %> ;
    var map_lon = <%= lon %> ;
    var primary_layers<%= unique_id %> = "<%= layers.to_s %>";
    
    var main_layer<%= unique_id %> = "<%= mainLayer.to_s %>";

    $("#iframeID<%= unique_id %>").click(function() {
      prompt('Use this HTML code to embed this map on another site.', '<iframe style="border:none;" width="100%" height="900px" src="' + "//publiclab.org/map/" + primary_layers<%= unique_id %> + "#lat=<%= lat %>&lon=<%= lon %>&zoom=6" + '"></iframe>')
    });

    var options<%= unique_id %> = {
      mainContent: main_layer<%= unique_id %>,
      layers: primary_layers<%= unique_id %>,
      setHash: false
    }
    setupLEL(map<%= unique_id %>, markers_hash<%= unique_id %>, options<%= unique_id %>);

</script>