Skip to main content

Browse the archive

Revision fce7df4116dc108c40f476d4fc72f0d109815463 authored by Scott Chamberlain on 18 April 2017, 22:54:33 UTC, committed by cran-robot on 18 April 2017, 22:54:33 UTC 
version 0.9.8
1 parent dbec68e
Raw File
singlemaplayout.html 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>rgbif photo viewer</title>
<meta name="viewport"" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>
<link href="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css" rel="stylesheet" />
<link rel="shortcut icon" href="http://ropensci.org/assets/flat-ui/images/favicon.ico">
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

  <div id="map"></div>

  <script>
    L.mapbox.accessToken = "pk.eyJ1IjoicmVjb2xvZ3kiLCJhIjoiZWlta1B0WSJ9.u4w33vy6kkbvmPyGnObw7A";

    var map = L.mapbox.map("map", "mapbox.streets")
    .setView([0, 0], 2);

    var myLayer = L.mapbox.featureLayer().addTo(map);

    var geoJson = [
      {{#photos}}
      {
        type: "Feature",
          "geometry": { "type": "Point", "coordinates": [ {{decimalLongitude}}, {{decimalLatitude}} ]},
          "properties": {
              "image": "{{{identifier}}}",
              "url": "{{{references}}}",
              "marker-color": "#FB8A24",
              "name": "{{species}}"
          }
      },
      {{/photos}}
    ];

    myLayer.on("layeradd", function(e) {
      var marker = e.layer,
      feature = marker.feature;

    var popupContent =  '<a target="_blank" class="popup" href="' + feature.properties.url + '">' +
      '<img src="' + feature.properties.image + '"  height="200" style="border-radius: 10px 10px 10px 10px;" />\n' + feature.properties.name + '</a>';


    marker.bindPopup(popupContent,{
          closeButton: false,
          minWidth: 320
        });
    });

    myLayer.setGeoJSON(geoJson);
  </script>

</body>
</html>
'
back to top