Simple map of Spanish provinces.
This time getting the Canary Islands composite-projections boundary.
New in Spam 1.1.0:
- Easy access to the projection settings via
parameters.projection.
| <!DOCTYPE html> | |
| <meta charset="utf-8" /> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src="//cdn.rawgit.com/mourner/rbush/master/rbush.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.4.0/conicConformalSpain-proj.min.js"></script> | |
| <script src="spam.min.js"></script> | |
| <script type='text/javascript'> | |
| var width = 960, | |
| height = 650 | |
| d3.json("provincias.json", function(error, d) { | |
| if (error) throw error | |
| topojson.presimplify(d) | |
| var map = new StaticCanvasMap({ | |
| element: "body", | |
| width: width, | |
| height: height, | |
| projection: d3.geo.conicConformalSpain() | |
| .translate([width / 2 + 300, height / 2 + 110]) | |
| .scale(960 * 4.3), | |
| data: [{ | |
| features: topojson.feature(d, d.objects["provincias"]), | |
| static: { | |
| paintfeature: function(parameters, d) { | |
| parameters.context.lineWidth = 1.5 | |
| parameters.context.strokeStyle = "rgb(255,255,255)" | |
| parameters.context.stroke() | |
| parameters.context.fillStyle = "rgb(225, 220, 220)"; | |
| parameters.context.fill() | |
| }, | |
| postpaint: function(parameters) { | |
| var p = new Path2D(parameters.projection.getCompositionBorders()) | |
| parameters.context.lineWidth = 0.5 | |
| parameters.context.strokeStyle = "#555" | |
| parameters.context.stroke(p) | |
| } | |
| } | |
| } | |
| ] | |
| }) | |
| map.init() | |
| }) | |
| </script> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
| !function(){"use strict";function t(t,e){var n=e.geometry.coordinates;"Polygon"===e.geometry.type&&(n=[n]);for(var r=!1,i=0;i<n.length&&!r;){if(a(t,n[i][0])){for(var o=!1,s=1;s<n[i].length&&!o;)a(t,n[i][s])&&(o=!0),s++;o||(r=!0)}i++}return r}function a(t,a){for(var e=!1,n=0,r=a.length-1;n<a.length;r=n++){var i=a[n][0],o=a[n][1],s=a[r][0],l=a[r][1],c=o>t[1]!=l>t[1]&&t[0]<(s-i)*(t[1]-o)/(l-o)+i;c&&(e=!e)}return e}function e(t,a){var e=a;return t[0][0]<a[0][0]&&(e[0][0]=t[0][0]),t[0][1]<a[0][1]&&(e[0][1]=t[0][1]),t[1][0]>a[1][0]&&(e[1][0]=t[1][0]),t[1][1]>a[1][1]&&(e[1][1]=t[1][1]),e}function n(t,a){t.lookupTree=v(4);var e=[];for(var n in t.features.features){var r=a.bounds(t.features.features[n]);e.push([r[0][0].toFixed(0),r[0][1].toFixed(0),Math.ceil(r[1][0]),Math.ceil(r[1][1]),t.features.features[n]])}t.lookupTree.load(e)}function r(t,a,e){e.context.beginPath(),e.path(a),t["static"].paintfeature(e,a)}function i(t,a){if(t["static"]){if(t["static"].prepaint&&t["static"].prepaint(a),t["static"].paintfeature){var e=t.lookupTree.search([a.translate[0],a.translate[1],a.width/a.scale-a.translate[0],a.height/a.scale-a.translate[1]]);for(var n in e)r(t,e[n][4],a)}t["static"].postpaint&&t["static"].postpaint(a)}}function o(t,a){var e=0,n=0,i=null,o=[];this.hasNext=function(){return e<=t.length&&n<o.length},this.renderNext=function(){if(!(e>=t.length&&n>=o.length)){var s=performance.now();if(!i||n>=o.length){for(;e<t.length&&!t[e]["static"];)e++;if(e>=t.length)return;i=t[e],i["static"].prepaint&&i["static"].prepaint(a),o=i.lookupTree.search([-a.translate[0],-a.translate[1],a.width/a.scale-a.translate[0],a.height/a.scale-a.translate[1]]),n=0,++e}if(i["static"].paintfeature)for(;n!=o.length;++n){var l=o[n][4];if(r(i,l,a),performance.now()-s>10)break}else n=o.length;n==o.length&&i["static"].postpaint&&i["static"].postpaint(a)}},this.finish=function(){if(!(e>=t.length&&n>=o.length))for(n<o.length&&e--;e!=t.length;++e){if(n>=o.length){for(;!t[e]["static"]&&e<t.length;)e++;if(e>=t.length)return;i=t[e],i["static"].prepaint&&i["static"].prepaint(a),o=i.lookupTree.search([-a.translate[0],-a.translate[1],a.width/a.scale-a.translate[0],a.height/a.scale-a.translate[1]]),n=0}if(i["static"].paintfeature)for(;n!=o.length;++n){var s=o[n][4];r(i,s,a)}i["static"].postpaint&&i["static"].postpaint(a)}}}function s(t,a,e){return[t[0]/a-e[0],t[1]/a-e[1]]}function l(t,a){var e={};for(var n in a)e[n]=a[n];for(var n in t)e.hasOwnProperty(n)||(e[n]=t[n]);return e}function c(a){function r(){v=g.select(u.element).append("canvas"),f=v.node().getContext("2d");var t=window.devicePixelRatio||1,a=f.webkitBackingStorePixelRatio||f.mozBackingStorePixelRatio||f.msBackingStorePixelRatio||f.oBackingStorePixelRatio||f.backingStorePixelRatio||1;u.ratio=t/a,u.area=1/u.projection.scale()/u.ratio/25,v.attr("width",u.width*u.ratio),v.attr("height",u.height*u.ratio),v.style("width",u.width+"px"),v.style("height",u.height+"px"),f.lineJoin="round",f.lineCap="round",k.context(f),f.clearRect(0,0,u.width*u.ratio,u.height*u.ratio),f.save(),f.scale(u.ratio,u.ratio);for(var e in u.data)n(u.data[e],k);u.background=new Image,u.backgroundScale=u.scale,u.backgroundTranslate=u.translate;var r={path:k,context:f,scale:u.scale,translate:u.translate,width:u.width,height:u.height,map:u.map,projection:u.projection},o=function(){var t=!1,a=!1;for(var e in u.data){var n=u.data[e];t=t||n.events&&n.events.hover,a=a||n.events&&n.events.click,n.dynamic&&n.dynamic.postpaint&&n.dynamic.postpaint(r,null)}f.restore(),a&&v.on("click",c),t&&v.on("mousemove",d).on("mouseleave",h)};for(var e in u.data){var s=u.data[e];s.dynamic&&s.dynamic.prepaint&&s.dynamic.prepaint(r,s.hoverElement)}for(var e in u.data){var s=u.data[e];i(s,r)}u.background.onload=o,u.background.src=v.node().toDataURL(),this.init=function(){}}function o(){f.save(),f.scale(u.scale*u.ratio,u.scale*u.ratio),f.translate(u.translate[0],u.translate[1]),f.clearRect(-u.translate[0],-u.translate[1],u.width*u.ratio,u.height*u.ratio),f.rect(-u.translate[0],-u.translate[1],u.width/u.scale,u.height/u.scale),f.clip();var t={path:k,context:k.context(),scale:u.scale,translate:u.translate,width:u.width,height:u.height,map:u.map,projection:u.projection};u.area=1/u.projection.scale()/u.scale/u.ratio/25;for(var a in u.data){var e=u.data[a];e.dynamic&&e.dynamic.prepaint&&e.dynamic.prepaint(t,e.hoverElement)}f.drawImage(u.background,0,0,u.width*u.ratio,u.height*u.ratio,-u.backgroundTranslate[0],-u.backgroundTranslate[1],u.width/u.backgroundScale,u.height/u.backgroundScale);for(var a in u.data){var e=u.data[a];e.dynamic&&e.dynamic.postpaint&&e.dynamic.postpaint(t,e.hoverElement)}f.restore()}function c(){var a=s(g.mouse(this),u.scale,u.translate),e={scale:u.scale,translate:u.translate,width:u.width,height:u.height,map:u.map,projection:u.projection};for(var n in u.data){var r=u.data[n];if(r.events&&r.events.click){var i=r.lookupTree.search([a[0],a[1],a[0],a[1]]),o=!1;for(var l in i){var c=i[l][4];t(u.projection.invert(a),c)&&(r.events.click(e,c),o=!0)}o||r.events.click(e,null)}}}function h(){var t={scale:u.scale,translate:u.translate,width:u.width,height:u.height,map:u.map,projection:u.projection};for(var a in u.data){var e=u.data[a];e.events&&e.events.hover&&(e.hoverElement=!1,e.events.hover(t,null))}}function d(){var a=s(g.mouse(this),u.scale,u.translate),e={scale:u.scale,translate:u.translate,width:u.width,height:u.height,map:u.map};for(var n in u.data){var r=u.data[n];if(r.events&&r.events.hover&&(!r.hoverElement||!t(u.projection.invert(a),r.hoverElement))){r.hoverElement=!1;var i=r.lookupTree.search([a[0],a[1],a[0],a[1]]);for(var o in i){var l=i[o][4];if(t(u.projection.invert(a),l)){r.hoverElement=l;break}}r.events.hover(e,r.hoverElement)}}}var u=l({width:g.select(a.element).node().getBoundingClientRect().width,ratio:1,area:0,scale:1,translate:[0,0],background:null,backgroundScale:1,backgroundTranslate:[0,0],map:this},a),p=g.geo.transform({point:function(t,a,e){(!e||e>=u.area)&&this.stream.point(t,a)}}),v=null,f=null;if(!a.projection){var m=[[1/0,1/0],[-(1/0),-(1/0)]];for(var w in u.data)m=e(m,g.geo.bounds(u.data[w].features));u.projection=g.geo.mercator().scale(1).center([(m[1][0]+m[0][0])/2,(m[1][1]+m[0][1])/2])}var k=g.geo.path().projection({stream:function(t){return p.stream(u.projection.stream(t))}}),m=[[1/0,1/0],[-(1/0),-(1/0)]];for(var w in u.data)m=e(m,k.bounds(u.data[w].features));var b=m[1][0]-m[0][0],j=m[1][1]-m[0][1];a.projection?u.height||(u.height=Math.ceil(1*j/.9)):(u.height=u.height||Math.ceil(j*u.width/b),u.projection.scale(.9*(u.width/b)).translate([u.width/2,u.height/2])),g.select(u.parameters).attr("height",u.height),this.init=r,this.paint=o,this.settings=function(){return u}}function h(t){var a=new c(t);this.init=function(){a.init()},this.paint=function(){a.paint()}}function d(t,a){return Math.abs(t-a)<f}function u(t){var a=[],e=t;this.addImage=function(t){a.push(t)},this.getImage=function(t){for(var e in a){var n=a[e];if(d(n.scale,t.scale)&&d(n.translate[0],t.translate[0])&&d(n.translate[1],t.translate[1]))return n}return null},this.getFittingImage=function(t){var n=a.length>0?a[0]:null;for(var r in a){var i=a[r],o=[-i.translate[0],-i.translate[1],e.width/i.scale-i.translate[0],e.height/i.scale-i.translate[1]];o[0]<=t[0]&&o[1]<=t[1]&&o[2]>=t[2]&&o[3]>=t[3]&&(!n||n.scale<i.scale)&&(n=i)}return n}}function p(t){function a(t,a){if(!f){if(f=!0,d(t,h.scale)&&d(a[0],h.translate[0])&&d(a[1],h.translate[1])&&(t=1,a=[0,0]),!(1!=t||1!=h.scale||a[0]||a[1]||h.translate[0]||h.translate[1]))return void(f=!1);r=1/h.projection.scale()/t/h.ratio/25,l.save(),l.scale(t*h.ratio,t*h.ratio),l.translate(a[0],a[1]),l.clearRect(-a[0],-a[1],h.width*h.ratio,h.height*h.ratio);var n={path:p,context:l,scale:t,translate:a,width:h.width,height:h.height,map:h.map,projection:h.projection},c=v.getImage({scale:t,translate:a});if(!c)var u=new Image,m=new o(h.data,n);var w=s([h.width,h.height],t,a),k=s([h.width,h.height],h.scale,h.translate),b=[Math.min(-a[0],-h.translate[0]),Math.min(-a[1],-h.translate[1]),Math.max(w[0],k[0]),Math.max(w[1],k[1])],j=v.getFittingImage(b);j&&(h.background=j.image,h.backgroundScale=j.scale,h.backgroundTranslate=j.translate),g.transition().duration(300).ease("linear").tween("zoom",function(){var n=g.interpolateNumber(h.scale,t),r=h.translate,i=h.scale;return function(o){h.scale=n(o);var s=[r[0]+(a[0]-r[0])/(t-i)*(n(o)-i)*t/n(o),r[1]+(a[1]-r[1])/(t-i)*(n(o)-i)*t/n(o)];h.translate=s,e.paint(),!c&&m.renderNext()}}).each("end",function(){h.scale=t,h.translate=a,c?(l.restore(),h.background=c.image,h.backgroundScale=c.scale,h.backgroundTranslate=c.translate,e.paint()):(e.paint(),m.finish(),u.onload=function(){l.restore(),v.addImage({image:u,scale:t,translate:a}),h.background=u,h.backgroundScale=t,h.backgroundTranslate=a,e.paint()},u.src=i.node().toDataURL()),f=!1})}}var e=new c(t),n=g.geo.transform({point:function(t,a,e){e>=r&&this.stream.point(t,a)}}),r=0,i=null,l=null,h=e.settings(),p=g.geo.path().projection({stream:function(t){return n.stream(h.projection.stream(t))}}),v=new u({width:h.width,height:h.height}),f=!1;h.map=this,h.zoomScale=h.zoomScale||.5,this.init=function(){e.init(),i=g.select(h.element).append("canvas"),l=i.node().getContext("2d"),r=1/h.projection.scale()/h.ratio/25,i.attr("width",h.width*h.ratio),i.attr("height",h.height*h.ratio),i.style("width",h.width+"px"),i.style("height",h.height+"px"),i.style("display","none"),l.lineJoin="round",l.lineCap="round",p.context(l),v.addImage({image:h.background,scale:h.scale,translate:h.translate})},this.paint=function(){e.paint()},this.zoom=function(t){if(!t)return void a.call(this,1,[0,0]);var e=p.bounds(t),n=e[1][0]-e[0][0],r=e[1][1]-e[0][1],i=(e[0][0]+e[1][0])/2,o=(e[0][1]+e[1][1])/2,s=h.zoomScale*Math.min(h.width/n,h.height/r),l=[-i+h.width/s/2,-o+h.height/s/2];a.call(this,s,l)}}if("undefined"!=typeof module)var g=require("d3"),v=(require("topojson"),require("rbush"));else var g=window.d3,v=(window.topojson,window.rbush);var f=.5;"undefined"!=typeof module?module.exports={StaticCanvasMap:h,ZoomableCanvasMap:p}:(window.StaticCanvasMap=h,window.ZoomableCanvasMap=p)}(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment