index.html

---
layout: map
---
<div id="map" style="top:0px;left:0px;width:100%;height:100%;"></div>
<script>
    var accessToken = 'pk.eyJ1IjoiaGl1IiwiYSI6InJWNGZJSzgifQ.xK1ndT3W8XL9lwVZrT6jvQ';
    var map = L.map('map').setView([0, 30], 3);

    // Imagery Basemap
    var url_imagery = 'https://api.mapbox.com/v4/hiu.nbk3c19e/{z}/{x}/{y}.png?access_token=' + accessToken;
    //var tileUrl = 'https://api.mapbox.com/v4/hiu.nbk3c19e,hiu.lsib-dark/{z}/{x}/{y}.png?access_token=' + accessToken
    L.tileLayer(url_imagery, {
      attribution: ''
    }).addTo(map);

    // LSIB Boundaries
    var url_boundaries = 'http://geonode.state.gov/geoserver/gwc/service/tms/1.0.0/geonode%3AGlobal_LSIB_Lines_Simplified_2015Jan23_USG@EPSG%3A900913@png/{z}/{x}/{y}.png';
    L.tileLayer(url_boundaries, {
      tms: true,
      attribution: 'Names and boundary representation are not necessarily authoritative.'
    }).addTo(map);

    // Products GeoJSON
    var productIcon = L.icon({
        iconUrl: "{{ site.baseurl }}/assets/img/icon_product.svg",
        iconSize: [30, 45],
        iconAnchor: [15, 40],
        popupAnchor: [0, 0]
    });
    $.ajax({
        dataType: "json",
        url: "{{ site.baseurl}}/products/products.json",
        success: function(response) {
            var products = L.geoJson(response, {
                onEachFeature: function(feature, layer) {
                    var popupOptions = {maxWidth: 200};
                    //layer.setIcon(productIcon);
                    var popupContent = '<h4><a href="'+feature.properties.url+'">'+feature.properties.title+"</a></h4><br>Date Published: "+feature.properties.date_published+'<br>Region: <a href="{{ site.baseurl }}/regions/"'+feature.properties.region_id+'">'+feature.properties.region_title+'</a><br><a href="'+feature.properties.pdf+'">Download</a>';
                    layer.bindPopup(popupContent, popupOptions);
                }
            });
            products.addTo(map);
        }
    });
</script>