<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Mapbox GL JS Examples</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="./css/map.css" type="text/css">
</head>
<body>
<div id='mapmex'></div>
<div class="picker">
<select id="indicatorSelect"></select>
</div>
<div id="datePickers">
<input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12"
placeholder="Fecha inicial" data-calendar="false" />
<input type="text" name="date-final" id="date-final" readonly="readonly" size="12"
placeholder="Fecha final" data-calendar="true" />
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js'></script>
<script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
<script src="./js/functions_mapbox.js"></script>
<!--<script>
var map = new mapboxgl.Map({
'container': 'mapmex',
'zoom': 7,
'center': [-92.28, 17.22], // cuenca Grijalva
'style': {
'version': 8,
'sources': {
'carto-dark': {
'type': 'raster',
'tiles': [
"http://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
"http://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
"http://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
"http://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
]
}
},
'layers': [{
'id': 'carto-dark-layer',
'type': 'raster',
'source': 'carto-dark',
'minzoom': 0,
'maxzoom': 22
}]
}
});
map.addControl(new mapboxgl.NavigationControl());
map.on('load', function() {
map.addLayer({
id: 'abril_2018-tiles',
source: {
type: 'vector',
// "http://localhost:8090/data/" + monthYear + "/mvt/{z}/{x}/{y}?geom_column=geom&columns=" + indicators.join();
tiles: ['http://localhost:8090/data/abril_2018/mvt/{z}/{x}/{y}?geom_column=geom&columns=df'],
maxzoom: 14,
minzoom: 5
},
'source-layer': 'abril_2018',
type: 'fill',
minzoom: 5,
'paint': {
'fill-opacity': 0.7,
'fill-color': [
'interpolate',
['linear'],
['get', 'df'],
1, 'rgba(255, 0, 0, 0.5)', // red
1.3, 'rgba(0, 255, 0, 0.5)', // green
],
'fill-outline-color': [
'interpolate',
['linear'],
['get', 'df'],
1, 'rgba(255, 0, 0, 0.6)', // red
1.3, 'rgba(0, 255, 0, 0.6)', // green
]
}
})
})
</script>-->
</body>
</html>