Skip to content

Instantly share code, notes, and snippets.

@powersparks

powersparks/.block

Last active January 17, 2017 17:25
Show Gist options
  • Save powersparks/84bff3c7c5dc862d735204933beb126c to your computer and use it in GitHub Desktop.
Save powersparks/84bff3c7c5dc862d735204933beb126c to your computer and use it in GitHub Desktop.
Download ZIP
Canvas Globe
Raw
.block
license: gpl-3.0
Raw
canvasGlobe.js
(function($){
var api = {
rest_service: function () {
var dataService = function (callback, baseUrl, callbackname) {
$.ajax({
url: baseUrl,
dataType: "jsonp",
jsonpCallback: callbackname,
data: {
f:"json"
},
dataType: "jsonp",
cache: true,
success: function (response) {
if (typeof callback !== 'undefined' && typeof callback === 'function') {
callback(response);
}
},
error: function (state, status, message) {
console.error("fail: ");
console.error(state);
console.error(status);
console.error(message);
}
});
};
return dataService;
},
renderGlobe: function (globeDivId) {
var width = 300,
height = 300;
var radius = height / 2 - 5,
scale = radius,
velocity = .02;
var projection = d3.geoOrthographic()
.translate([width / 2, height / 2])
.scale(scale)
.clipAngle(90);
d3.select('#' + globeDivId).selectAll('canvas').remove();
var canvas = d3.select('#' + globeDivId)
.append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas
.node()
.getContext("2d");
var path = d3.geoPath()
.projection(projection)
.context(context);
var graticule = d3.geoGraticule();
/** context.getContext().append('path').datum(graticule())
.attr('class', 'graticule')
.attr('d', path)
.style('fill','none')
.style('stroke','#aaa')
.style('stroke-width','1px')
.style('stroke-opacity','0.5')
.style('pointer-events','none');***/
var morecontext = d3.json("world-110m.json", function(error, world) {
if (error) throw error;
var land = topojson.feature(world, world.objects.land);
//var elapsed = .01;
d3.timer(function(elapsed) {
context.clearRect(0, 0, width, height);
var globe = {type: "Sphere"};
projection.rotate([velocity * elapsed, 0]);
context.beginPath();
path(land);
//context.fill();
context.strokeStyle = '#766951';
//sets
context.fillStyle = '#d8ffff';
context.beginPath(), path.context(context)(globe), context.fill(), context.stroke();
context.fillStyle = '#d7c7ad';
context.beginPath(), path.context(context)(land), context.fill(), context.stroke();
context.beginPath();
context.arc(width / 2, height / 2, radius, 0, 2 * Math.PI, true);
context.lineWidth = 0.5;
context.stroke();
/***adding the graticule*/
context.beginPath();
path.context(context)(graticule());
context.lineWidth = 0.2;
context.strokeStyle = 'rgba(30,30,30, 0.5)';
context.stroke();
$('#' + globeDivId).on('addgraticule',function(){
//console.info("addgraticule");
});
$('#' + globeDivId).on('addquake',function(event, filterData){
console.info(filterData);
});
if(typeof $.coria !== 'undefined' && typeof $.coria.timeFilterControlCanvas !== 'undefined' ){
$.coria.timeFilterControlCanvas.filterData.map(function(d){
context.beginPath();
context.strokeStyle = 'rgba(196, 11, 174, 0.5)';
context.arc(d.geometry.coordinates[1], d.geometry.coordinates[0], d.geometry.price, 0, 2 * Math.PI,true);
context.stroke();
});
}
});//timer end
}); //json loading end
d3.select(self.frameElement).style("height", height + "px");
},
register: function(options){
var globeDivId = options.globeDivId,
_serviceUrl = "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer",
_legendUrl = "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/legend",
rand3 = RandomNum(),
mapService_callbackname = "callback_" + rand3() + rand3(),
legendService_callbackname = "callback_" + rand3() + rand3();
//instance of rest service request as map and legend
var mapService = api.rest_service();
var legendService = api.rest_service();
$('#' + options.canvasGlobeTableId).on('mapServiceLoaded', function (){
//console.info("dataloaded");
api.initTable(options.canvasGlobeTableId);
});
api.renderGlobe(globeDivId);
mapService(function(mapServiceResults){
$(window).on("ajaxComplete", function(event, status, request){
if(request.jsonpCallback === mapService_callbackname )
{
$(window).off("ajaxComplete");
legendService(function(legendServiceResults){
$(window).on("ajaxComplete", function(event, status, request){
if(request.jsonpCallback === legendService_callbackname)
{
$(window).off("ajaxComplete");
$.extend(api, {
mapService:mapServiceResults,
legendService: legendServiceResults
});
api.legendService.layers.map(function(layer,index,arr){
this[layer.layerId].legend = layer.legend;
}, api.mapService.layers);
$('#' + options.canvasGlobeTableId).trigger("mapServiceLoaded",[api.mapService]);
}
});
}, _legendUrl, legendService_callbackname );
}
});
}, _serviceUrl, mapService_callbackname );
},
initTable: function(canvasGlobeTableId){
$('#' + canvasGlobeTableId).DataTable( {
"autoWidth": false,
"paging": false,
"ordering": false,
"info": false,
"searching": false,
"aaData": api.mapService.layers,
"columnDefs": [
{
"width": "150px", "targets":[ 1,2],
},
{
"targets":[ 1 ],
"className": "dt-left dt-body-nowrap",
},
{
"targets":[ 2 ],
"className": "dt-left dt-body-nowrap",
},
{
"targets": [ 0 ],
"visible": false
}],
"aoColumns": [
{ "mDataProp": "id" },
{"mRender": _parseLegend },
{ "mDataProp": "name" },
//{ "mDataProp": "minScale" },
//{ "mDataProp": "maxScale" },
//{"mDataProp": "legend[].label" },
//{"mDataProp": "legend.0.label" },
]
} );
$('#' + canvasGlobeTableId).addClass("coria-legend"); /***css should go into the sytle sheet*/
$("table" + '#' + canvasGlobeTableId + ".dataTable.no-footer.coria-legend").attr('style', 'border: none !important');
$("table" + '#' + canvasGlobeTableId + ".dataTable.coria-legend > thead th").attr('style', 'border: none !important');
$("table" + '#' + canvasGlobeTableId +".dataTable.display.coria-legend > tbody td " ).attr('style', 'border: none !important');
//$('#' + canvasGlobeTableId ).attr('style', 'border: none !important');
}
};
$.coria = $.coria ? $.coria : {};
$.coria.canvasGlobe = api;
function RandomNum(){ var _seed = 1000; function randomNum (value) { if(!arguments.length) { return Math.floor(Math.random() * _seed + 0); } _seed = value; } return randomNum; }
function _parseLegend(data, type, layer, meta){
if(typeof layer.legend === 'undefined'){
return null;
layer.legend = [{imageData:null,contentType:null,label:""}];}
var img, imgType, imgLabel, legendArr = [], legendStr="", layerName = layer.name;
//console.info(layer);
layer.legend.map(function(legend,index,arr){
img = legend.imageData;
imgType = legend.contentType;
imgLabel = legend.label ? legend.label != "" ? legend.label : legend.label : "";
legendArr.push('<span style="{line-height:27px;}"><img style="{vertical-align:middle;}" src="data:' + imgType +';base64,' + img + '" ></img>' + imgLabel + '</span>');
if(arr.length !== index + 1)
legendArr.push("<br/>");
});
legendArr.map(function(item){ legendStr = legendStr+item; });
return legendStr;
};
})(jQuery);
/***
//https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2014-01-01&endtime=2014-01-02&callback=test
//https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2014-01-01&endtime=2014-01-02&callback=quake558755&_=1481418159231
//"https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/legend?f=json&callback=legendCallback321",
//https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer?f=pjson&callback=legendCallback321
legendCallback321({
"layers" : [
{
"layerId" : 0,
"layerName" : "Census Block Points",
"layerType" : "Feature Layer",
"minScale" : 99999.9999894534,
"maxScale" : 0,
"legend" : [
{
"label" : "0 - 61",
"url" : "6E4168CF",
"imageData" : "iVBORw0KGgoAAAANSUhEUgAAABsAAAAbBAMAAAB/+ulmAAAACVBMVEUAAABzsv/+//+7q4cPAAAAA3RSTlP//wDXyg1BAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAJ0lEQVQYlWNQQgYKDIOZq8CEwmUUQOYqCAoy4eaiKUY3im5eII4LAKfsMM0jkLKYAAAAAElFTkSuQmCC",
"contentType" : "image/png"
},
{
"label" : "62 - 264",
"url" : "5B9D87CD",
"imageData" : "iVBORw0KGgoAAAANSUhEUgAAABsAAAAbBAMAAAB/+ulmAAAACVBMVEUAAABzsv/+//+7q4cPAAAAA3RSTlP//wDXyg1BAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAMklEQVQYlWNQQgYKDAPLVWBC5iowCjAhcRkFBQVwchUEgYAJFxe/XnSL0JxBQ//i4AIAPYUu8UFw4rAAAAAASUVORK5CYII=",
"contentType" : "image/png"
},
{
"label" : "265 - 759",
"url" : "B3328260",
"imageData" : "iVBORw0KGgoAAAANSUhEUgAAABsAAAAbBAMAAAB/+ulmAAAACVBMVEUAAABzsv/+//+7q4cPAAAAA3RSTlP//wDXyg1BAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAQElEQVQYla3QuxEAMAgCUHQC3cDL/kPmn3jU0r1KEC0nUM0ANFHc7RM+gkeZtMvwFT2UTasnHaIaXJIm8MCS13Vj+SnlgyCddwAAAABJRU5ErkJggg==",
"contentType" : "image/png"
},
{
"label" : "760 - 1900",
"url" : "1A6645DD",
"imageData" : "iVBORw0KGgoAAAANSUhEUgAAABsAAAAbBAMAAAB/+ulmAAAACVBMVEUAAABzsv/+//+7q4cPAAAAA3RSTlP//wDXyg1BAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAASUlEQVQYlZ3QuQ0AMAgDQJMJYAOU/YfMHyE3edydKMAgxzg+CAQ6zJA2xWp00a0nTcqgDs5hG58pi/rOp0V0JFegglyfnnP72AKr4SZPa5buAQAAAABJRU5ErkJggg==",
"contentType" : "image/png"
},
{
"label" : "1901 - 9409",
"url" : "1E035412",
"imageData" : "iVBORw0KGgoAAAANSUhEUgAAABsAAAAbBAMAAAB/+ulmAAAACVBMVEUAAABzsv/+//+7q4cPAAAAA3RSTlP//wDXyg1BAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAUUlEQVQYla3Q0QnAMAgE0NMJdAPp/kNG0qSRS8hX7++BoB6emsCRQGHAHToZ4hnTwa70y/AR7ZRJO/Cbzemdsmj/8r73fjM/SO9zOVQdF7tqb+vwIWU6lR+JAAAAAElFTkSuQmCC",
"contentType" : "image/png"
}
]
},
{
"layerId" : 1,
"layerName" : "Census Block Group",
"layerType" : "Feature Layer",
"minScale" : 1000000,
"maxScale" : 0,
"legend" : [
{
"label" : "",
"url" : "6E3AC8F2",
"imageData" : "iVBORw0KGgoAAAANSUhEUgAAACIAAAAbBAMAAADrHECUAAAABlBMVEWCgoL+//97Fd17AAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAgSURBVBiVYxBEBwxYRBhQASODICOqklGRARTBjB10AACBgxmenzBMsAAAAABJRU5ErkJggg==",
"contentType" : "image/png"
}
]
},
{
"layerId" : 3,
"layerName" : "Coarse Counties",
"layerType" : "Feature Layer",
"minScale" : 0,
"maxScale" : 1000001,
"legend" : [
{
"label" : "",
"url" : "ECD5E6A8",
"imageData" : "iVBORw0KGgoAAAANSUhEUgAAACIAAAAbBAMAAADrHECUAAAABlBMVEUAAAD+//+kG/XqAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAgSURBVBiVYxBEBwxYRBhQASODICOqklGRARTBjB10AACBgxmenzBMsAAAAABJRU5ErkJggg==",
"contentType" : "image/png"
}
]
},
{
"layerId" : 4,
"layerName" : "Detailed Counties",
"layerType" : "Feature Layer",
"minScale" : 1000000,
"maxScale" : 0,
"legend" : [
{
"label" : "",
"url" : "ECD5E6A8",
"imageData" : "iVBORw0KGgoAAAANSUhEUgAAACIAAAAbBAMAAADrHECUAAAABlBMVEUAAAD+//+kG/XqAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAgSURBVBiVYxBEBwxYRBhQASODICOqklGRARTBjB10AACBgxmenzBMsAAAAABJRU5ErkJggg==",
"contentType" : "image/png"
}
]
},
{
"layerId" : 5,
"layerName" : "states",
"layerType" : "Feature Layer",
"minScale" : 0,
"maxScale" : 0,
"legend" : [
{
"label" : "",
"url" : "4E898B0E",
"imageData" : "iVBORw0KGgoAAAANSUhEUgAAACIAAAAbBAMAAADrHECUAAAABlBMVEUAAAD+//+kG/XqAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAkSURBVBiVYxBEBwyCDKiAkUGAAR1gE0ExRWBUhFYihOMCIwYBjl8VSsPSSWQAAAAASUVORK5CYII=",
"contentType" : "image/png"
}
]
}]
});
legendCallback321({
"currentVersion" : 10.01,
"serviceDescription" : "This service presents various population statistics from Census 2000, including total population, population density, racial counts, and more. The map service presents statistics at the state, county, block group, and block point levels. This is a sample service hosted by ESRI, powered by ArcGIS Server. ESRI has provided this example so that you may practice using ArcGIS APIs for JavaScript, Flex, and Silverlight. ESRI reserves the right to change or remove this service at any time and without notice.",
"mapName" : "Layers",
"description" : "This service presents various population statistics from Census 2000, including total population, population density, racial counts, and more. The map service presents statistics at the state, county, block group, and block point levels.\n",
"copyrightText" : "US Bureau of the Census: http://www.census.gov",
"layers" : [
{
"id" : 0,
"name" : "Census Block Points",
"parentLayerId" : -1,
"defaultVisibility" : true,
"subLayerIds" : null,
"minScale" : 99999.9999894534,
"maxScale" : 0
},
{
"id" : 1,
"name" : "Census Block Group",
"parentLayerId" : -1,
"defaultVisibility" : true,
"subLayerIds" : null,
"minScale" : 1000000,
"maxScale" : 0
},
{
"id" : 2,
"name" : "Counties",
"parentLayerId" : -1,
"defaultVisibility" : true,
"subLayerIds" : [3, 4],
"minScale" : 0,
"maxScale" : 0
},
{
"id" : 3,
"name" : "Coarse Counties",
"parentLayerId" : 2,
"defaultVisibility" : true,
"subLayerIds" : null,
"minScale" : 0,
"maxScale" : 1000001
},
{
"id" : 4,
"name" : "Detailed Counties",
"parentLayerId" : 2,
"defaultVisibility" : true,
"subLayerIds" : null,
"minScale" : 1000000,
"maxScale" : 0
},
{
"id" : 5,
"name" : "states",
"parentLayerId" : -1,
"defaultVisibility" : true,
"subLayerIds" : null,
"minScale" : 0,
"maxScale" : 0
}
],
"tables" : [
],
"spatialReference" : {
"wkid" : 4269
},
"singleFusedMapCache" : false,
"initialExtent" : {
"xmin" : -207.682974279982,
"ymin" : -40.6075371681153,
"xmax" : -37.1804225764967,
"ymax" : 129.89501453537,
"spatialReference" : {
"wkid" : 4269
}
},
"fullExtent" : {
"xmin" : -185.337909357176,
"ymin" : 15.2049923322169,
"xmax" : -59.5254874993028,
"ymax" : 74.08248503559,
"spatialReference" : {
"wkid" : 4269
}
},
"units" : "esriDecimalDegrees",
"supportedImageFormatTypes" : "PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,AI,BMP",
"documentInfo" : {
"Title" : "USCensus",
"Author" : "serverxadmin",
"Comments" : "",
"Subject" : "",
"Category" : "",
"Keywords" : "",
"Credits" : ""
},
"capabilities" : "Map,Query,Data"
});
*/
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coria Canvas Globe- Time Filter</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
<script type="text/javascript" src='https://d3js.org/d3.v4.js' charset="utf-8"></script>
<script type="text/javascript" src="https://d3js.org/topojson.v1.min.js" ></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="canvasGlobe.js" ></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<style>
.coria-div-table{
float:right;
width:300px;
max-width:400px;
border-color:red;
border:2px;
}
</style>
</head>
<body>
<div id='globeDivId'>
<div class="coria-div-table" >
<table id="canvasGlobeTableId" class="display" width="300px" >
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
<script type="text/javascript" >
jQuery(function(d){
d.coria.canvasGlobe.register({
globeDivId:'globeDivId',
canvasGlobeTableId:'canvasGlobeTableId'
});
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
world-110m.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment