Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/cartodb_sketch.html

Created April 2, 2012 17:46
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save wboykinm/2285587 to your computer and use it in GitHub Desktop.
Save wboykinm/2285587 to your computer and use it in GitHub Desktop.
Download ZIP
CartoDB Sketch View
Raw
cartodb_sketch.html
<!DOCTYPE html>
<html>
<head>
<title>CartoDB Sketch View</title>
<script type="text/javascript" src="../js/core.js"></script>
<script type="text/javascript" src="../js/settings.js"></script>
<script type="text/javascript" src="../js/mercator.js"></script>
<script type="text/javascript" src="../js/geometry.js"></script>
<script type="text/javascript" src="../js/model.js"></script>
<script type="text/javascript" src="../js/renderer.js"></script>
<script type="text/javascript" src="../js/shader.js"></script>
<script type="text/javascript" src="../js/cartodb.sql.js"></script>
<script type="text/javascript" src="../js/cartodb.provider.js"></script>
<script type="text/javascript" src="stats.js"></script>
<!-- carto -->
<script src='../libs/underscore.js' type='text/javascript'></script>
<script src='../libs/carto.js' type='text/javascript'></script>
<script type="text/javascript" src="../libs/modestmaps.js"></script>
<script type="text/javascript" src="../js/vecnik.modestmaps.js"></script>
<script type="text/javascript" src="../js/carto.js"></script>
<script type="text/javascript">
function SketchRender() {
RND_FACTOR = 2;
rnd = function() { return RND_FACTOR*( 2*Math.random() -1) ;}
var img = new Image();
img.src = "/img/sketch.png";
function sketchLine(ctx, p0, p1) {
var dx = p1.x - p0.x;
var dy = p1.y - p0.y;
dx *=0.15;
dy *= 0.15;
for(var i = 0; i < 3; ++i) {
ctx.strokeStyle = "rgba(55,0,0, " + (0.01 + 0.3*Math.random()) + ")";
ctx.beginPath();
ctx.lineWidth = 0.5*(1 + (3-i)) ;//0.3 + rnd();
ctx.moveTo(p0.x - dx + rnd(), p0.y - dy + rnd());
ctx.lineTo(p1.x + dx + rnd(), p1.y + dy + rnd());
ctx.closePath();
ctx.stroke();
}
}
var primitive_render = this.primitive_render = {
'Polygon': function(ctx, coordinates) {
var c = coordinates[0];
var xmin, xmax,ymin, ymax;
xmin = xmax = c[0].x;
ymin = ymax = c[0].y;
//ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
for(var i=1; i < c.length; ++i) {
ctx.shadowBlur = 10;
ctx.shadowColor = "rgba(150, 0, 0, 1)";
sketchLine(ctx, c[i-1], c[i]);
var p0 = c[i-1];
var p = c[i];
xmin = Math.min(xmin, p.x);
xmax = Math.max(xmax, p.x);
ymin = Math.min(ymin, p.y);
ymax = Math.max(ymax, p.y);
}
/*
var centerx = (xmax - xmin)/2;
var centery = (ymax - ymin)/2;
var radgrad = ctx.createRadialGradient(centerx, centery,0, centerx, centery, 0.9*Math.max(xmax - xmin, ymax - ymin));
radgrad.addColorStop(0, 'rgba(1,159,98,0.2)')
radgrad.addColorStop(0.9, 'rgba(1,159,98,0.2)')
radgrad.addColorStop(1, 'rgba(1,159,98,0)')
ctx.fillStyle = radgrad;
*/
},
'MultiPolygon': function(ctx, coordinates) {
var prender = primitive_render['Polygon'];
for(var i=0; i < coordinates.length; ++i) {
prender(ctx, coordinates[i]);
}
},
'LineString': function(ctx, coordinates) {
ctx.beginPath();
var p = coordinates[0];
ctx.moveTo(p.x, p.y);
for(var i=0; i < coordinates.length; ++i) {
p = coordinates[i];
ctx.lineTo(p.x, p.y);
}
ctx.stroke();
}
};
}
SketchRender.prototype = new VECNIK.Renderer();
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 stat = new Stats();
var template = '../img/pt3.png'
var subdomains = [ '', 'a.', 'b.', 'c.' ];
var provider = new MM.TemplatedLayer(template, subdomains);
VECNIK.settings.set({
ENABLE_CLIPPING: true,
ENABLE_SIMPLIFY: true,
ENABLE_FIXING: true,
ENABLE_SNAPPING: true,
});
var dataSource = new VECNIK.CartoDB.API({
user: 'geosprocket',
table: 'ecogwr_030711',
//columns: [''], //do not include the_geom or cartodb_id, are implicit
debug: true
});
var shader = new VECNIK.CartoShader({
'point-color': '#fff',
'line-color': '#fff',
'line-width': function(data) {
return '1';
},
'polygon-fill': function(data) {
return "rgba(200, 200, 200, 0.8)";
}
});
var vector_layer = new VECNIK.MM.CanvasProvider(dataSource, shader, new SketchRender());
fg = new MM.Layer(vector_layer);
map = new MM.Map(document.getElementById('map'), [provider, fg])
if(!location.hash) {
map.setCenterZoom(new MM.Location(51.4942, -0.1671), 14);
}
var hash = new MM.Hash(map);
}
</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.7);
position: absolute;
left: 10px;
top: 0;
bottom: 0;
padding: 0;
margin: 0;
border: none;
font-family: monospace;
font-size: 19px;
width: 450px;
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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment