Last active
April 10, 2020 20:32
-
-
Save jatorre/f8e80b0d5f6935ecc4e28fb61c08e60d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>COVID 19 Risk Index</title> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> | |
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> | |
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script> | |
</head> | |
<body> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
</style> | |
<div id="map"></div> | |
<script> | |
var mapZoomLimits={minZoom:0,maxZoom:14}; | |
var map = L.map('map', { | |
'center': [40.775993, -73.970675], | |
'zoom': 10 | |
}); | |
//BASEMAP | |
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png', | |
mapZoomLimits).addTo(map); | |
//LOAD CARTO LAYER | |
//We will be using JSONP to retrieve the tile URL to be used | |
var script = document.createElement('script'); | |
script.src = "https://socially-determined-covid19.carto.solutions/user/carto/api/v1/map/named/tpl_66fe030a_1abe_433d_b902_189a34e5a06f/jsonp?callback=loadCartoLayer"; | |
document.getElementsByTagName('head')[0].appendChild(script); | |
//Whe the data iwe create a new TileLayer | |
function loadCartoLayer(data) { | |
var url = data.metadata.url.raster.urlTemplate.toString(); | |
L.tileLayer(url,mapZoomLimits).addTo(map); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment