osu-cascades/ecotone-web

- content_for_title('Campus Map')

.content(id='map')
  :javascript

    var mapBoxAttribution = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'
    var mapBoxRequest = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=#{ENV['LEAFLET_KEY']}'

    var map = L.map('map').setView([44.0429688, -121.3329103], 18, {layers: [satelliteLayer, outdoorLayer]});
    var plots = #{plots_to_json};    

    plots.forEach(plot => {
      var ping = L.marker([plot.latitude, -plot.longitude]);

      ping.bindPopup(
        `<div class=map-popup>` +
          `<h2 class=center><a href="${plot.url}"> Plot \#${plot.plot_id} </a></h2>` +
          `<h4 class=center>\(${plot.latitude}, ${plot.longitude}\)</h4>` +
          `<div class=content>`+
            `<p>${plot.location_description}</p>` + 
            `<img src=${plot.image}/>`).addTo(map) +
          `</div>` + 
        `</div>`
      });

    var satelliteLayer = L.tileLayer(mapBoxRequest,
    {
      id: 'mapbox/satellite-streets-v11', 
      tileSize: 512, 
      zoomOffset: -1, 
      attribution: mapBoxAttribution,
    }).addTo(map);

    var outdoorLayer = L.tileLayer(mapBoxRequest,
    {
      id: 'mapbox/outdoors-v11', 
      tileSize: 512, 
      zoomOffset: -1, 
      attribution: mapBoxAttribution,
    }).addTo(map);

    var baseMaps = {
      "Satellite": satelliteLayer,
      "Ground": outdoorLayer
    };

    L.control.layers(baseMaps).addTo(map);