175 lines
4.7 KiB
HTML
175 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Styling tool for GFW</title>
|
|
|
|
<script type="text/javascript" src="src/core.js"></script>
|
|
<script type="text/javascript" src="src/settings.js"></script>
|
|
<script type="text/javascript" src="src/mercator.js"></script>
|
|
<script type="text/javascript" src="src/geometry.js"></script>
|
|
<script type="text/javascript" src="src/model.js"></script>
|
|
<script type="text/javascript" src="src/renderer.js"></script>
|
|
<script type="text/javascript" src="src/shader.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="src/cartodb.sql.js"></script>
|
|
<script type="text/javascript" src="src/cartodb.provider.js"></script>
|
|
|
|
<!-- carto -->
|
|
<script src='../lib/underscore-min.js' type='text/javascript'></script>
|
|
<script src='../lib/carto.js' type='text/javascript'></script>
|
|
|
|
<script type="text/javascript" src="../lib/modestmaps.js"></script>
|
|
<script type="text/javascript" src="src/vecnik.modestmaps.js"></script>
|
|
|
|
<script type="text/javascript" src="src/carto.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var map;
|
|
function initMap() {
|
|
VECNIK.Carto.init(function(carto) {
|
|
VECNIK.Carto.compile(
|
|
"#world { line-width: 2; line-color: #f00; [TYPEY='test']{ line-width: 2; } [ZOOM = 0]{ line-width: 2; } }"
|
|
, function() {});
|
|
});
|
|
|
|
var template = 'http://b.tiles.mapbox.com/v3/mapbox.mapbox-streets/{Z}/{X}/{Y}.png';
|
|
// template = 'http://b.tiles.mapbox.com/v3/mapbox.mapbox-light/{Z}/{X}/{Y}.png64';
|
|
// template = 'http://b.tile.stamen.com/terrain-background/{Z}/{X}/{Y}.jpg';
|
|
|
|
template = "http://oatile1.mqcdn.com/tiles/1.0.0/sat/{Z}/{X}/{Y}.jpg"
|
|
var subdomains = [ 'oatile1', 'oatile2.', 'oatile3.', 'oatile4.' ];
|
|
var provider = new MM.TemplatedLayer(template, subdomains);
|
|
|
|
var dataSource = new VECNIK.CartoDB.API({
|
|
user: 'wri-01',
|
|
table: 'forma_zoom_polys',
|
|
columns: ['alerts'], //do not include the_geom or cartodb_id, are implicit
|
|
ENABLE_CLIPPING: true,
|
|
ENABLE_SIMPLIFY: true,
|
|
ENABLE_FIXING: true,
|
|
ENABLE_SNAPPING: true,
|
|
debug: true
|
|
});
|
|
|
|
var shader = new VECNIK.CartoShader({
|
|
'point-color': '#fff',
|
|
'line-color': '#fff',
|
|
'line-width': function(data) {
|
|
if(data.type === 'primary') {
|
|
return '3';
|
|
}
|
|
return '1';
|
|
},
|
|
'polygon-fill': function(data) {
|
|
return "rgba(200, 200, 200, 0.8)";
|
|
}
|
|
});
|
|
|
|
var vector_layer = new VECNIK.MM.CanvasProvider(dataSource, shader);
|
|
fg = new MM.Layer(vector_layer);
|
|
|
|
map = new MM.Map(document.getElementById('map'), [provider, fg])
|
|
|
|
if(!location.hash) {
|
|
map.setCenterZoom(new MM.Location(3.7, 102.8), 4);
|
|
}
|
|
var hash = new MM.Hash(map);
|
|
|
|
|
|
var code = document.getElementById('code')
|
|
var codeOld= '';
|
|
var compileShader = _.debounce(function() {
|
|
VECNIK.Carto.compile(code.value , function(shaderData) {
|
|
if(shaderData) {
|
|
//console.log(code.value);
|
|
shader.compile(shaderData);
|
|
}
|
|
});
|
|
}, 200);
|
|
code.onkeyup = function() {
|
|
if(code.value != codeOld) {
|
|
compileShader();
|
|
codeOld = code.value;
|
|
}
|
|
}
|
|
compileShader(code.value);
|
|
|
|
}
|
|
</script>
|
|
<style>
|
|
html, body, #map {
|
|
width: 100%; height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
#livecode {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 450px;
|
|
padding-left: 10px;
|
|
box-shadow: 0px 0px 5px 6px #ccc;
|
|
}
|
|
textarea {
|
|
color: rgba(0,0,0,0.9);
|
|
background-color:rgba(255,255,255,0.92);
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 0;
|
|
bottom: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
font-family: monospace;
|
|
font-size: 14px;
|
|
width: 350px;
|
|
border: 0;
|
|
outline: none;
|
|
|
|
}
|
|
/* code */
|
|
.highlight {
|
|
font-family: monospace;
|
|
font-size: 19px;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body onload="initMap()">
|
|
<div id="map"></div>
|
|
<!--<div id="livecode" class="highlight">-->
|
|
</div>
|
|
<textarea id="code">
|
|
#forma_zoom_polys{
|
|
line-color:#FFFFFF;
|
|
line-width:0;
|
|
line-opacity:1;
|
|
line-width:0.1;
|
|
polygon-opacity:0.9;
|
|
polygon-fill:#B10026
|
|
[alerts<=5000] {
|
|
polygon-fill:#E31A1C
|
|
}
|
|
[alerts<=500] {
|
|
polygon-fill:#FC4E2A
|
|
}
|
|
[alerts<=50] {
|
|
polygon-fill:#FD8D3C
|
|
}
|
|
[alerts<=5] {
|
|
polygon-fill:#FEB24C
|
|
}
|
|
[alerts<=2] {
|
|
polygon-fill:#FED976
|
|
}
|
|
[alerts<=1] {
|
|
polygon-fill:#FFFFB2
|
|
}
|
|
}
|
|
</textarea>
|
|
</body>
|
|
</html>
|