Skip to content

Instantly share code, notes, and snippets.

@rveciana
Last active December 8, 2019 21:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rveciana/4071d3c6a0b58f98893fb311306b038c to your computer and use it in GitHub Desktop.
Save rveciana/4071d3c6a0b58f98893fb311306b038c to your computer and use it in GitHub Desktop.
Mapping with Svelte
licence: mit

First example of a map drawn with Svelte and the d3 projections.

Check this blog post from Geoexamples for more explanations.

To test it, clone the standard svelte template by

npx degit sveltejs/template svelte-app
cd svelte-app

And copy the App.svelte file into the src directory.

<script>
import { geoAlbers, geoPath } from "d3-geo";
import { onMount } from "svelte";
import { feature } from "topojson";
let data;
const projection = geoAlbers();
const path = geoPath().projection(projection);
onMount(async function() {
const response = await fetch(
"https://gist.githubusercontent.com/rveciana/a2a1c21ca1c71cd3ec116cc911e5fce9/raw/79564dfa2c56745ebd62f5655a6cc19d2cffa1ea/us.json"
);
const json = await response.json();
const land = feature(json, json.objects.land);
data = path(land);
});
</script>
<style>
svg {
width: 960px;
height: 500px;
}
.border {
stroke: #444444;
fill: #cccccc;
}
</style>
<svg width="960" height="500">
<path d={data} class="border" />
</svg>
svg.svelte-n55sv5 {
width: 960px;
height: 500px;
}
.border.svelte-n55sv5 {
stroke: #444444;
fill: #cccccc;
}
/*# sourceMappingURL=bundle.css.map */
var app=function(){"use strict";function n(){}function t(n){return n()}function r(){return Object.create(null)}function i(n){n.forEach(t)}function e(n){return"function"==typeof n}function o(n,t){return n!=n?t==t:n!==t||n&&"object"==typeof n||"function"==typeof n}function u(n){return document.createElementNS("http://www.w3.org/2000/svg",n)}function c(n,t,r){null==r?n.removeAttribute(t):n.getAttribute(t)!==r&&n.setAttribute(t,r)}let a;function l(n){a=n}function f(n){(function(){if(!a)throw new Error("Function called outside component initialization");return a})().$$.on_mount.push(n)}const s=[],p=[],h=[],d=[],v=Promise.resolve();let g=!1;function y(n){h.push(n)}function m(){const n=new Set;do{for(;s.length;){const n=s.shift();l(n),E(n.$$)}for(;p.length;)p.pop()();for(let t=0;t<h.length;t+=1){const r=h[t];n.has(r)||(r(),n.add(r))}h.length=0}while(s.length);for(;d.length;)d.pop()();g=!1}function E(n){null!==n.fragment&&(n.update(),i(n.before_update),n.fragment&&n.fragment.p(n.ctx,n.dirty),n.dirty=[-1],n.after_update.forEach(y))}const S=new Set;function _(n,t){-1===n.$$.dirty[0]&&(s.push(n),g||(g=!0,v.then(m)),n.$$.dirty.fill(0)),n.$$.dirty[t/31|0]|=1<<t%31}function x(o,u,c,f,s,p,h=[-1]){const d=a;l(o);const v=u.props||{},g=o.$$={fragment:null,ctx:null,props:p,update:n,not_equal:s,bound:r(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(d?d.$$.context:[]),callbacks:r(),dirty:h};let E=!1;var x,b,w;g.ctx=c?c(o,v,(n,t,r=t)=>(g.ctx&&s(g.ctx[n],g.ctx[n]=r)&&(g.bound[n]&&g.bound[n](r),E&&_(o,n)),t)):[],g.update(),E=!0,i(g.before_update),g.fragment=!!f&&f(g.ctx),u.target&&(u.hydrate?g.fragment&&g.fragment.l((w=u.target,Array.from(w.childNodes))):g.fragment&&g.fragment.c(),u.intro&&((x=o.$$.fragment)&&x.i&&(S.delete(x),x.i(b))),function(n,r,o){const{fragment:u,on_mount:c,on_destroy:a,after_update:l}=n.$$;u&&u.m(r,o),y(()=>{const r=c.map(t).filter(e);a?a.push(...r):i(r),n.$$.on_mount=[]}),l.forEach(y)}(o,u.target,u.anchor),m()),l(d)}class b{$destroy(){!function(n,t){const r=n.$$;null!==r.fragment&&(i(r.on_destroy),r.fragment&&r.fragment.d(t),r.on_destroy=r.fragment=null,r.ctx=[])}(this,1),this.$destroy=n}$on(n,t){const r=this.$$.callbacks[n]||(this.$$.callbacks[n]=[]);return r.push(t),()=>{const n=r.indexOf(t);-1!==n&&r.splice(n,1)}}$set(){}}function w(){return new $}function $(){this.reset()}$.prototype={constructor:$,reset:function(){this.s=this.t=0},add:function(n){N(M,n,this.t),N(this,M.s,this.s),this.s?this.t+=M.t:this.s=M.t},valueOf:function(){return this.s}};var M=new $;function N(n,t,r){var i=n.s=t+r,e=i-t,o=i-e;n.t=t-o+(r-e)}var k=1e-6,P=Math.PI,j=P/2,z=P/4,A=2*P,C=180/P,F=P/180,R=Math.abs,L=Math.atan,O=Math.atan2,G=Math.cos,T=Math.sin,q=Math.sign||function(n){return n>0?1:n<0?-1:0},B=Math.sqrt;function H(n){return n>1?j:n<-1?-j:Math.asin(n)}function I(){}function W(n,t){n&&D.hasOwnProperty(n.type)&&D[n.type](n,t)}var Z={Feature:function(n,t){W(n.geometry,t)},FeatureCollection:function(n,t){for(var r=n.features,i=-1,e=r.length;++i<e;)W(r[i].geometry,t)}},D={Sphere:function(n,t){t.sphere()},Point:function(n,t){n=n.coordinates,t.point(n[0],n[1],n[2])},MultiPoint:function(n,t){for(var r=n.coordinates,i=-1,e=r.length;++i<e;)n=r[i],t.point(n[0],n[1],n[2])},LineString:function(n,t){J(n.coordinates,t,0)},MultiLineString:function(n,t){for(var r=n.coordinates,i=-1,e=r.length;++i<e;)J(r[i],t,0)},Polygon:function(n,t){K(n.coordinates,t)},MultiPolygon:function(n,t){for(var r=n.coordinates,i=-1,e=r.length;++i<e;)K(r[i],t)},GeometryCollection:function(n,t){for(var r=n.geometries,i=-1,e=r.length;++i<e;)W(r[i],t)}};function J(n,t,r){var i,e=-1,o=n.length-r;for(t.lineStart();++e<o;)i=n[e],t.point(i[0],i[1],i[2]);t.lineEnd()}function K(n,t){var r=-1,i=n.length;for(t.polygonStart();++r<i;)J(n[r],t,1);t.polygonEnd()}function Q(n,t){n&&Z.hasOwnProperty(n.type)?Z[n.type](n,t):W(n,t)}function U(n){return[O(n[1],n[0]),H(n[2])]}function V(n){var t=n[0],r=n[1],i=G(r);return[i*G(t),i*T(t),T(r)]}function X(n,t){return n[0]*t[0]+n[1]*t[1]+n[2]*t[2]}function Y(n,t){return[n[1]*t[2]-n[2]*t[1],n[2]*t[0]-n[0]*t[2],n[0]*t[1]-n[1]*t[0]]}function nn(n,t){n[0]+=t[0],n[1]+=t[1],n[2]+=t[2]}function tn(n,t){return[n[0]*t,n[1]*t,n[2]*t]}function rn(n){var t=B(n[0]*n[0]+n[1]*n[1]+n[2]*n[2]);n[0]/=t,n[1]/=t,n[2]/=t}function en(n,t){function r(r,i){return r=n(r,i),t(r[0],r[1])}return n.invert&&t.invert&&(r.invert=function(r,i){return(r=t.invert(r,i))&&n.invert(r[0],r[1])}),r}function on(n,t){return[R(n)>P?n+Math.round(-n/A)*A:n,t]}function un(n){return function(t,r){return[(t+=n)>P?t-A:t<-P?t+A:t,r]}}function cn(n){var t=un(n);return t.invert=un(-n),t}function an(n,t){var r=G(n),i=T(n),e=G(t),o=T(t);function u(n,t){var u=G(t),c=G(n)*u,a=T(n)*u,l=T(t),f=l*r+c*i;return[O(a*e-f*o,c*r-l*i),H(f*e+a*o)]}return u.invert=function(n,t){var u=G(t),c=G(n)*u,a=T(n)*u,l=T(t),f=l*e-a*o;return[O(a*e+l*o,c*r+f*i),H(f*r-c*i)]},u}function ln(n,t){(t=V(t))[0]-=n,rn(t);var r,i=(r=-t[1])>1?0:r<-1?P:Math.acos(r);return((-t[2]<0?-i:i)+A-k)%A}function fn(){var n,t=[];return{point:function(t,r){n.push([t,r])},lineStart:function(){t.push(n=[])},lineEnd:I,rejoin:function(){t.length>1&&t.push(t.pop().concat(t.shift()))},result:function(){var r=t;return t=[],n=null,r}}}function sn(n,t){return R(n[0]-t[0])<k&&R(n[1]-t[1])<k}function pn(n,t,r,i){this.x=n,this.z=t,this.o=r,this.e=i,this.v=!1,this.n=this.p=null}function hn(n,t,r,i,e){var o,u,c=[],a=[];if(n.forEach((function(n){if(!((t=n.length-1)<=0)){var t,r,i=n[0],u=n[t];if(sn(i,u)){for(e.lineStart(),o=0;o<t;++o)e.point((i=n[o])[0],i[1]);e.lineEnd()}else c.push(r=new pn(i,n,null,!0)),a.push(r.o=new pn(i,null,r,!1)),c.push(r=new pn(u,n,null,!1)),a.push(r.o=new pn(u,null,r,!0))}})),c.length){for(a.sort(t),dn(c),dn(a),o=0,u=a.length;o<u;++o)a[o].e=r=!r;for(var l,f,s=c[0];;){for(var p=s,h=!0;p.v;)if((p=p.n)===s)return;l=p.z,e.lineStart();do{if(p.v=p.o.v=!0,p.e){if(h)for(o=0,u=l.length;o<u;++o)e.point((f=l[o])[0],f[1]);else i(p.x,p.n.x,1,e);p=p.n}else{if(h)for(l=p.p.z,o=l.length-1;o>=0;--o)e.point((f=l[o])[0],f[1]);else i(p.x,p.p.x,-1,e);p=p.p}l=(p=p.o).z,h=!h}while(!p.v);e.lineEnd()}}}function dn(n){if(t=n.length){for(var t,r,i=0,e=n[0];++i<t;)e.n=r=n[i],r.p=e,e=r;e.n=r=n[0],r.p=e}}on.invert=on;var vn=w();function gn(n){return R(n[0])<=P?n[0]:q(n[0])*((R(n[0])+P)%A-P)}function yn(n,t){return n<t?-1:n>t?1:n>=t?0:NaN}var mn,En;1===(mn=yn).length&&(En=mn,mn=function(n,t){return yn(En(n),t)});function Sn(n){for(var t,r,i,e=n.length,o=-1,u=0;++o<e;)u+=n[o].length;for(r=new Array(u);--e>=0;)for(t=(i=n[e]).length;--t>=0;)r[--u]=i[t];return r}function _n(n,t,r,i){return function(e){var o,u,c,a=t(e),l=fn(),f=t(l),s=!1,p={point:h,lineStart:v,lineEnd:g,polygonStart:function(){p.point=y,p.lineStart=m,p.lineEnd=E,u=[],o=[]},polygonEnd:function(){p.point=h,p.lineStart=v,p.lineEnd=g,u=Sn(u);var n=function(n,t){var r=gn(t),i=t[1],e=T(i),o=[T(r),-G(r),0],u=0,c=0;vn.reset(),1===e?i=j+k:-1===e&&(i=-j-k);for(var a=0,l=n.length;a<l;++a)if(s=(f=n[a]).length)for(var f,s,p=f[s-1],h=gn(p),d=p[1]/2+z,v=T(d),g=G(d),y=0;y<s;++y,h=E,v=_,g=x,p=m){var m=f[y],E=gn(m),S=m[1]/2+z,_=T(S),x=G(S),b=E-h,w=b>=0?1:-1,$=w*b,M=$>P,N=v*_;if(vn.add(O(N*w*T($),g*x+N*G($))),u+=M?b+w*A:b,M^h>=r^E>=r){var C=Y(V(p),V(m));rn(C);var F=Y(o,C);rn(F);var R=(M^b>=0?-1:1)*H(F[2]);(i>R||i===R&&(C[0]||C[1]))&&(c+=M^b>=0?1:-1)}}return(u<-k||u<k&&vn<-k)^1&c}(o,i);u.length?(s||(e.polygonStart(),s=!0),hn(u,bn,n,r,e)):n&&(s||(e.polygonStart(),s=!0),e.lineStart(),r(null,null,1,e),e.lineEnd()),s&&(e.polygonEnd(),s=!1),u=o=null},sphere:function(){e.polygonStart(),e.lineStart(),r(null,null,1,e),e.lineEnd(),e.polygonEnd()}};function h(t,r){n(t,r)&&e.point(t,r)}function d(n,t){a.point(n,t)}function v(){p.point=d,a.lineStart()}function g(){p.point=h,a.lineEnd()}function y(n,t){c.push([n,t]),f.point(n,t)}function m(){f.lineStart(),c=[]}function E(){y(c[0][0],c[0][1]),f.lineEnd();var n,t,r,i,a=f.clean(),p=l.result(),h=p.length;if(c.pop(),o.push(c),c=null,h)if(1&a){if((t=(r=p[0]).length-1)>0){for(s||(e.polygonStart(),s=!0),e.lineStart(),n=0;n<t;++n)e.point((i=r[n])[0],i[1]);e.lineEnd()}}else h>1&&2&a&&p.push(p.pop().concat(p.shift())),u.push(p.filter(xn))}return p}}function xn(n){return n.length>1}function bn(n,t){return((n=n.x)[0]<0?n[1]-j-k:j-n[1])-((t=t.x)[0]<0?t[1]-j-k:j-t[1])}var wn=_n((function(){return!0}),(function(n){var t,r=NaN,i=NaN,e=NaN;return{lineStart:function(){n.lineStart(),t=1},point:function(o,u){var c=o>0?P:-P,a=R(o-r);R(a-P)<k?(n.point(r,i=(i+u)/2>0?j:-j),n.point(e,i),n.lineEnd(),n.lineStart(),n.point(c,i),n.point(o,i),t=0):e!==c&&a>=P&&(R(r-e)<k&&(r-=e*k),R(o-c)<k&&(o-=c*k),i=function(n,t,r,i){var e,o,u=T(n-r);return R(u)>k?L((T(t)*(o=G(i))*T(r)-T(i)*(e=G(t))*T(n))/(e*o*u)):(t+i)/2}(r,i,o,u),n.point(e,i),n.lineEnd(),n.lineStart(),n.point(c,i),t=0),n.point(r=o,i=u),e=c},lineEnd:function(){n.lineEnd(),r=i=NaN},clean:function(){return 2-t}}}),(function(n,t,r,i){var e;if(null==n)e=r*j,i.point(-P,e),i.point(0,e),i.point(P,e),i.point(P,0),i.point(P,-e),i.point(0,-e),i.point(-P,-e),i.point(-P,0),i.point(-P,e);else if(R(n[0]-t[0])>k){var o=n[0]<t[0]?P:-P;e=r*o/2,i.point(-o,e),i.point(0,e),i.point(o,e)}else i.point(t[0],t[1])}),[-P,-j]);function $n(n){var t=G(n),r=6*F,i=t>0,e=R(t)>k;function o(n,r){return G(n)*G(r)>t}function u(n,r,i){var e=[1,0,0],o=Y(V(n),V(r)),u=X(o,o),c=o[0],a=u-c*c;if(!a)return!i&&n;var l=t*u/a,f=-t*c/a,s=Y(e,o),p=tn(e,l);nn(p,tn(o,f));var h=s,d=X(p,h),v=X(h,h),g=d*d-v*(X(p,p)-1);if(!(g<0)){var y=B(g),m=tn(h,(-d-y)/v);if(nn(m,p),m=U(m),!i)return m;var E,S=n[0],_=r[0],x=n[1],b=r[1];_<S&&(E=S,S=_,_=E);var w=_-S,$=R(w-P)<k;if(!$&&b<x&&(E=x,x=b,b=E),$||w<k?$?x+b>0^m[1]<(R(m[0]-S)<k?x:b):x<=m[1]&&m[1]<=b:w>P^(S<=m[0]&&m[0]<=_)){var M=tn(h,(-d+y)/v);return nn(M,p),[m,U(M)]}}}function c(t,r){var e=i?n:P-n,o=0;return t<-e?o|=1:t>e&&(o|=2),r<-e?o|=4:r>e&&(o|=8),o}return _n(o,(function(n){var t,r,a,l,f;return{lineStart:function(){l=a=!1,f=1},point:function(s,p){var h,d=[s,p],v=o(s,p),g=i?v?0:c(s,p):v?c(s+(s<0?P:-P),p):0;if(!t&&(l=a=v)&&n.lineStart(),v!==a&&(!(h=u(t,d))||sn(t,h)||sn(d,h))&&(d[0]+=k,d[1]+=k,v=o(d[0],d[1])),v!==a)f=0,v?(n.lineStart(),h=u(d,t),n.point(h[0],h[1])):(h=u(t,d),n.point(h[0],h[1]),n.lineEnd()),t=h;else if(e&&t&&i^v){var y;g&r||!(y=u(d,t,!0))||(f=0,i?(n.lineStart(),n.point(y[0][0],y[0][1]),n.point(y[1][0],y[1][1]),n.lineEnd()):(n.point(y[1][0],y[1][1]),n.lineEnd(),n.lineStart(),n.point(y[0][0],y[0][1])))}!v||t&&sn(t,d)||n.point(d[0],d[1]),t=d,a=v,r=g},lineEnd:function(){a&&n.lineEnd(),t=null},clean:function(){return f|(l&&a)<<1}}}),(function(t,i,e,o){!function(n,t,r,i,e,o){if(r){var u=G(t),c=T(t),a=i*r;null==e?(e=t+i*A,o=t-a/2):(e=ln(u,e),o=ln(u,o),(i>0?e<o:e>o)&&(e+=i*A));for(var l,f=e;i>0?f>o:f<o;f-=a)l=U([u,-c*G(f),-c*T(f)]),n.point(l[0],l[1])}}(o,n,r,e,t,i)}),i?[0,-n]:[-P,n-P])}var Mn=1e9,Nn=-Mn;function kn(n,t,r,i){function e(e,o){return n<=e&&e<=r&&t<=o&&o<=i}function o(e,o,c,l){var f=0,s=0;if(null==e||(f=u(e,c))!==(s=u(o,c))||a(e,o)<0^c>0)do{l.point(0===f||3===f?n:r,f>1?i:t)}while((f=(f+c+4)%4)!==s);else l.point(o[0],o[1])}function u(i,e){return R(i[0]-n)<k?e>0?0:3:R(i[0]-r)<k?e>0?2:1:R(i[1]-t)<k?e>0?1:0:e>0?3:2}function c(n,t){return a(n.x,t.x)}function a(n,t){var r=u(n,1),i=u(t,1);return r!==i?r-i:0===r?t[1]-n[1]:1===r?n[0]-t[0]:2===r?n[1]-t[1]:t[0]-n[0]}return function(u){var a,l,f,s,p,h,d,v,g,y,m,E=u,S=fn(),_={point:x,lineStart:function(){_.point=b,l&&l.push(f=[]);y=!0,g=!1,d=v=NaN},lineEnd:function(){a&&(b(s,p),h&&g&&S.rejoin(),a.push(S.result()));_.point=x,g&&E.lineEnd()},polygonStart:function(){E=S,a=[],l=[],m=!0},polygonEnd:function(){var t=function(){for(var t=0,r=0,e=l.length;r<e;++r)for(var o,u,c=l[r],a=1,f=c.length,s=c[0],p=s[0],h=s[1];a<f;++a)o=p,u=h,s=c[a],p=s[0],h=s[1],u<=i?h>i&&(p-o)*(i-u)>(h-u)*(n-o)&&++t:h<=i&&(p-o)*(i-u)<(h-u)*(n-o)&&--t;return t}(),r=m&&t,e=(a=Sn(a)).length;(r||e)&&(u.polygonStart(),r&&(u.lineStart(),o(null,null,1,u),u.lineEnd()),e&&hn(a,c,t,o,u),u.polygonEnd());E=u,a=l=f=null}};function x(n,t){e(n,t)&&E.point(n,t)}function b(o,u){var c=e(o,u);if(l&&f.push([o,u]),y)s=o,p=u,h=c,y=!1,c&&(E.lineStart(),E.point(o,u));else if(c&&g)E.point(o,u);else{var a=[d=Math.max(Nn,Math.min(Mn,d)),v=Math.max(Nn,Math.min(Mn,v))],S=[o=Math.max(Nn,Math.min(Mn,o)),u=Math.max(Nn,Math.min(Mn,u))];!function(n,t,r,i,e,o){var u,c=n[0],a=n[1],l=0,f=1,s=t[0]-c,p=t[1]-a;if(u=r-c,s||!(u>0)){if(u/=s,s<0){if(u<l)return;u<f&&(f=u)}else if(s>0){if(u>f)return;u>l&&(l=u)}if(u=e-c,s||!(u<0)){if(u/=s,s<0){if(u>f)return;u>l&&(l=u)}else if(s>0){if(u<l)return;u<f&&(f=u)}if(u=i-a,p||!(u>0)){if(u/=p,p<0){if(u<l)return;u<f&&(f=u)}else if(p>0){if(u>f)return;u>l&&(l=u)}if(u=o-a,p||!(u<0)){if(u/=p,p<0){if(u>f)return;u>l&&(l=u)}else if(p>0){if(u<l)return;u<f&&(f=u)}return l>0&&(n[0]=c+l*s,n[1]=a+l*p),f<1&&(t[0]=c+f*s,t[1]=a+f*p),!0}}}}}(a,S,n,t,r,i)?c&&(E.lineStart(),E.point(o,u),m=!1):(g||(E.lineStart(),E.point(a[0],a[1])),E.point(S[0],S[1]),c||E.lineEnd(),m=!1)}d=o,v=u,g=c}return _}}function Pn(n){return n}var jn,zn,An,Cn,Fn=w(),Rn=w(),Ln={point:I,lineStart:I,lineEnd:I,polygonStart:function(){Ln.lineStart=On,Ln.lineEnd=qn},polygonEnd:function(){Ln.lineStart=Ln.lineEnd=Ln.point=I,Fn.add(R(Rn)),Rn.reset()},result:function(){var n=Fn/2;return Fn.reset(),n}};function On(){Ln.point=Gn}function Gn(n,t){Ln.point=Tn,jn=An=n,zn=Cn=t}function Tn(n,t){Rn.add(Cn*n-An*t),An=n,Cn=t}function qn(){Tn(jn,zn)}var Bn=1/0,Hn=Bn,In=-Bn,Wn=In,Zn={point:function(n,t){n<Bn&&(Bn=n);n>In&&(In=n);t<Hn&&(Hn=t);t>Wn&&(Wn=t)},lineStart:I,lineEnd:I,polygonStart:I,polygonEnd:I,result:function(){var n=[[Bn,Hn],[In,Wn]];return In=Wn=-(Hn=Bn=1/0),n}};var Dn,Jn,Kn,Qn,Un=0,Vn=0,Xn=0,Yn=0,nt=0,tt=0,rt=0,it=0,et=0,ot={point:ut,lineStart:ct,lineEnd:ft,polygonStart:function(){ot.lineStart=st,ot.lineEnd=pt},polygonEnd:function(){ot.point=ut,ot.lineStart=ct,ot.lineEnd=ft},result:function(){var n=et?[rt/et,it/et]:tt?[Yn/tt,nt/tt]:Xn?[Un/Xn,Vn/Xn]:[NaN,NaN];return Un=Vn=Xn=Yn=nt=tt=rt=it=et=0,n}};function ut(n,t){Un+=n,Vn+=t,++Xn}function ct(){ot.point=at}function at(n,t){ot.point=lt,ut(Kn=n,Qn=t)}function lt(n,t){var r=n-Kn,i=t-Qn,e=B(r*r+i*i);Yn+=e*(Kn+n)/2,nt+=e*(Qn+t)/2,tt+=e,ut(Kn=n,Qn=t)}function ft(){ot.point=ut}function st(){ot.point=ht}function pt(){dt(Dn,Jn)}function ht(n,t){ot.point=dt,ut(Dn=Kn=n,Jn=Qn=t)}function dt(n,t){var r=n-Kn,i=t-Qn,e=B(r*r+i*i);Yn+=e*(Kn+n)/2,nt+=e*(Qn+t)/2,tt+=e,rt+=(e=Qn*n-Kn*t)*(Kn+n),it+=e*(Qn+t),et+=3*e,ut(Kn=n,Qn=t)}function vt(n){this._context=n}vt.prototype={_radius:4.5,pointRadius:function(n){return this._radius=n,this},polygonStart:function(){this._line=0},polygonEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){0===this._line&&this._context.closePath(),this._point=NaN},point:function(n,t){switch(this._point){case 0:this._context.moveTo(n,t),this._point=1;break;case 1:this._context.lineTo(n,t);break;default:this._context.moveTo(n+this._radius,t),this._context.arc(n,t,this._radius,0,A)}},result:I};var gt,yt,mt,Et,St,_t=w(),xt={point:I,lineStart:function(){xt.point=bt},lineEnd:function(){gt&&wt(yt,mt),xt.point=I},polygonStart:function(){gt=!0},polygonEnd:function(){gt=null},result:function(){var n=+_t;return _t.reset(),n}};function bt(n,t){xt.point=wt,yt=Et=n,mt=St=t}function wt(n,t){Et-=n,St-=t,_t.add(B(Et*Et+St*St)),Et=n,St=t}function $t(){this._string=[]}function Mt(n){return"m0,"+n+"a"+n+","+n+" 0 1,1 0,"+-2*n+"a"+n+","+n+" 0 1,1 0,"+2*n+"z"}function Nt(n){return function(t){var r=new kt;for(var i in n)r[i]=n[i];return r.stream=t,r}}function kt(){}function Pt(n,t,r){var i=n.clipExtent&&n.clipExtent();return n.scale(150).translate([0,0]),null!=i&&n.clipExtent(null),Q(r,n.stream(Zn)),t(Zn.result()),null!=i&&n.clipExtent(i),n}function jt(n,t,r){return Pt(n,(function(r){var i=t[1][0]-t[0][0],e=t[1][1]-t[0][1],o=Math.min(i/(r[1][0]-r[0][0]),e/(r[1][1]-r[0][1])),u=+t[0][0]+(i-o*(r[1][0]+r[0][0]))/2,c=+t[0][1]+(e-o*(r[1][1]+r[0][1]))/2;n.scale(150*o).translate([u,c])}),r)}$t.prototype={_radius:4.5,_circle:Mt(4.5),pointRadius:function(n){return(n=+n)!==this._radius&&(this._radius=n,this._circle=null),this},polygonStart:function(){this._line=0},polygonEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){0===this._line&&this._string.push("Z"),this._point=NaN},point:function(n,t){switch(this._point){case 0:this._string.push("M",n,",",t),this._point=1;break;case 1:this._string.push("L",n,",",t);break;default:null==this._circle&&(this._circle=Mt(this._radius)),this._string.push("M",n,",",t,this._circle)}},result:function(){if(this._string.length){var n=this._string.join("");return this._string=[],n}return null}},kt.prototype={constructor:kt,point:function(n,t){this.stream.point(n,t)},sphere:function(){this.stream.sphere()},lineStart:function(){this.stream.lineStart()},lineEnd:function(){this.stream.lineEnd()},polygonStart:function(){this.stream.polygonStart()},polygonEnd:function(){this.stream.polygonEnd()}};var zt=16,At=G(30*F);function Ct(n,t){return+t?function(n,t){function r(i,e,o,u,c,a,l,f,s,p,h,d,v,g){var y=l-i,m=f-e,E=y*y+m*m;if(E>4*t&&v--){var S=u+p,_=c+h,x=a+d,b=B(S*S+_*_+x*x),w=H(x/=b),$=R(R(x)-1)<k||R(o-s)<k?(o+s)/2:O(_,S),M=n($,w),N=M[0],P=M[1],j=N-i,z=P-e,A=m*j-y*z;(A*A/E>t||R((y*j+m*z)/E-.5)>.3||u*p+c*h+a*d<At)&&(r(i,e,o,u,c,a,N,P,$,S/=b,_/=b,x,v,g),g.point(N,P),r(N,P,$,S,_,x,l,f,s,p,h,d,v,g))}}return function(t){var i,e,o,u,c,a,l,f,s,p,h,d,v={point:g,lineStart:y,lineEnd:E,polygonStart:function(){t.polygonStart(),v.lineStart=S},polygonEnd:function(){t.polygonEnd(),v.lineStart=y}};function g(r,i){r=n(r,i),t.point(r[0],r[1])}function y(){f=NaN,v.point=m,t.lineStart()}function m(i,e){var o=V([i,e]),u=n(i,e);r(f,s,l,p,h,d,f=u[0],s=u[1],l=i,p=o[0],h=o[1],d=o[2],zt,t),t.point(f,s)}function E(){v.point=g,t.lineEnd()}function S(){y(),v.point=_,v.lineEnd=x}function _(n,t){m(i=n,t),e=f,o=s,u=p,c=h,a=d,v.point=m}function x(){r(f,s,l,p,h,d,e,o,i,u,c,a,zt,t),v.lineEnd=E,E()}return v}}(n,t):function(n){return Nt({point:function(t,r){t=n(t,r),this.stream.point(t[0],t[1])}})}(n)}var Ft=Nt({point:function(n,t){this.stream.point(n*F,t*F)}});function Rt(n,t,r){function i(i,e){return[t+n*i,r-n*e]}return i.invert=function(i,e){return[(i-t)/n,(r-e)/n]},i}function Lt(n,t,r,i){var e=G(i),o=T(i),u=e*n,c=o*n,a=e/n,l=o/n,f=(o*r-e*t)/n,s=(o*t+e*r)/n;function p(n,i){return[u*n-c*i+t,r-c*n-u*i]}return p.invert=function(n,t){return[a*n-l*t+f,s-l*n-a*t]},p}function Ot(n){var t,r,i,e,o,u,c,a,l,f,s=150,p=480,h=250,d=0,v=0,g=0,y=0,m=0,E=0,S=null,_=wn,x=null,b=Pn,w=.5;function $(n){return a(n[0]*F,n[1]*F)}function M(n){return(n=a.invert(n[0],n[1]))&&[n[0]*C,n[1]*C]}function N(){var n=Lt(s,0,0,E).apply(null,t(d,v)),i=(E?Lt:Rt)(s,p-n[0],h-n[1],E);return r=function(n,t,r){return(n%=A)?t||r?en(cn(n),an(t,r)):cn(n):t||r?an(t,r):on}(g,y,m),c=en(t,i),a=en(r,c),u=Ct(c,w),k()}function k(){return l=f=null,$}return $.stream=function(n){return l&&f===n?l:l=Ft(function(n){return Nt({point:function(t,r){var i=n(t,r);return this.stream.point(i[0],i[1])}})}(r)(_(u(b(f=n)))))},$.preclip=function(n){return arguments.length?(_=n,S=void 0,k()):_},$.postclip=function(n){return arguments.length?(b=n,x=i=e=o=null,k()):b},$.clipAngle=function(n){return arguments.length?(_=+n?$n(S=n*F):(S=null,wn),k()):S*C},$.clipExtent=function(n){return arguments.length?(b=null==n?(x=i=e=o=null,Pn):kn(x=+n[0][0],i=+n[0][1],e=+n[1][0],o=+n[1][1]),k()):null==x?null:[[x,i],[e,o]]},$.scale=function(n){return arguments.length?(s=+n,N()):s},$.translate=function(n){return arguments.length?(p=+n[0],h=+n[1],N()):[p,h]},$.center=function(n){return arguments.length?(d=n[0]%360*F,v=n[1]%360*F,N()):[d*C,v*C]},$.rotate=function(n){return arguments.length?(g=n[0]%360*F,y=n[1]%360*F,m=n.length>2?n[2]%360*F:0,N()):[g*C,y*C,m*C]},$.angle=function(n){return arguments.length?(E=n%360*F,N()):E*C},$.precision=function(n){return arguments.length?(u=Ct(c,w=n*n),k()):B(w)},$.fitExtent=function(n,t){return jt($,n,t)},$.fitSize=function(n,t){return function(n,t,r){return jt(n,[[0,0],t],r)}($,n,t)},$.fitWidth=function(n,t){return function(n,t,r){return Pt(n,(function(r){var i=+t,e=i/(r[1][0]-r[0][0]),o=(i-e*(r[1][0]+r[0][0]))/2,u=-e*r[0][1];n.scale(150*e).translate([o,u])}),r)}($,n,t)},$.fitHeight=function(n,t){return function(n,t,r){return Pt(n,(function(r){var i=+t,e=i/(r[1][1]-r[0][1]),o=-e*r[0][0],u=(i-e*(r[1][1]+r[0][1]))/2;n.scale(150*e).translate([o,u])}),r)}($,n,t)},function(){return t=n.apply(this,arguments),$.invert=t.invert&&M,N()}}function Gt(n,t){var r=T(n),i=(r+T(t))/2;if(R(i)<k)return function(n){var t=G(n);function r(n,r){return[n*t,T(r)/t]}return r.invert=function(n,r){return[n/t,H(r*t)]},r}(n);var e=1+r*(2*i-r),o=B(e)/i;function u(n,t){var r=B(e-2*i*T(t))/i;return[r*T(n*=i),o-r*G(n)]}return u.invert=function(n,t){var r=o-t;return[O(n,R(r))/i*q(r),H((e-(n*n+r*r)*i*i)/(2*i))]},u}function Tt(){return(n=Gt,t=0,r=P/3,i=Ot(n),e=i(t,r),e.parallels=function(n){return arguments.length?i(t=n[0]*F,r=n[1]*F):[t*C,r*C]},e).scale(155.424).center([0,33.6442]);var n,t,r,i,e}function qt(n){return n}function Bt(n,t){var r=t.id,i=t.bbox,e=null==t.properties?{}:t.properties,o=function(n,t){var r=function(n){if(null==n)return qt;var t,r,i=n.scale[0],e=n.scale[1],o=n.translate[0],u=n.translate[1];return function(n,c){c||(t=r=0);var a=2,l=n.length,f=new Array(l);for(f[0]=(t+=n[0])*i+o,f[1]=(r+=n[1])*e+u;a<l;)f[a]=n[a],++a;return f}}(n.transform),i=n.arcs;function e(n,t){t.length&&t.pop();for(var e=i[n<0?~n:n],o=0,u=e.length;o<u;++o)t.push(r(e[o],o));n<0&&function(n,t){for(var r,i=n.length,e=i-t;e<--i;)r=n[e],n[e++]=n[i],n[i]=r}(t,u)}function o(n){return r(n)}function u(n){for(var t=[],r=0,i=n.length;r<i;++r)e(n[r],t);return t.length<2&&t.push(t[0]),t}function c(n){for(var t=u(n);t.length<4;)t.push(t[0]);return t}function a(n){return n.map(c)}return function n(t){var r,i=t.type;switch(i){case"GeometryCollection":return{type:i,geometries:t.geometries.map(n)};case"Point":r=o(t.coordinates);break;case"MultiPoint":r=t.coordinates.map(o);break;case"LineString":r=u(t.arcs);break;case"MultiLineString":r=t.arcs.map(u);break;case"Polygon":r=a(t.arcs);break;case"MultiPolygon":r=t.arcs.map(a);break;default:return null}return{type:i,coordinates:r}}(t)}(n,t);return null==r&&null==i?{type:"Feature",properties:e,geometry:o}:null==i?{type:"Feature",id:r,properties:e,geometry:o}:{type:"Feature",id:r,bbox:i,properties:e,geometry:o}}function Ht(t){let r,i;return{c(){r=u("svg"),i=u("path"),c(i,"d",t[0]),c(i,"class","border svelte-n55sv5"),c(r,"width","960"),c(r,"height","500"),c(r,"class","svelte-n55sv5")},m(n,t){!function(n,t,r){n.insertBefore(t,r||null)}(n,r,t),function(n,t){n.appendChild(t)}(r,i)},p(n,[t]){1&t&&c(i,"d",n[0])},i:n,o:n,d(n){var t;n&&(t=r).parentNode.removeChild(t)}}}function It(n,t,r){let i;const e=Tt().parallels([29.5,45.5]).scale(1070).translate([480,250]).rotate([96,0]).center([-.6,38.7]),o=function(n,t){var r,i,e=4.5;function o(n){return n&&("function"==typeof e&&i.pointRadius(+e.apply(this,arguments)),Q(n,r(i))),i.result()}return o.area=function(n){return Q(n,r(Ln)),Ln.result()},o.measure=function(n){return Q(n,r(xt)),xt.result()},o.bounds=function(n){return Q(n,r(Zn)),Zn.result()},o.centroid=function(n){return Q(n,r(ot)),ot.result()},o.projection=function(t){return arguments.length?(r=null==t?(n=null,Pn):(n=t).stream,o):n},o.context=function(n){return arguments.length?(i=null==n?(t=null,new $t):new vt(t=n),"function"!=typeof e&&i.pointRadius(e),o):t},o.pointRadius=function(n){return arguments.length?(e="function"==typeof n?n:(i.pointRadius(+n),+n),o):e},o.projection(n).context(t)}().projection(e);return f((async function(){const n=await fetch("https://gist.githubusercontent.com/rveciana/a2a1c21ca1c71cd3ec116cc911e5fce9/raw/79564dfa2c56745ebd62f5655a6cc19d2cffa1ea/us.json"),t=await n.json(),e=(u=t,"GeometryCollection"===(c=t.objects.land).type?{type:"FeatureCollection",features:c.geometries.map((function(n){return Bt(u,n)}))}:Bt(u,c));var u,c;r(0,i=o(e))})),[i]}return new class extends b{constructor(n){super(),x(this,n,It,Ht,o,{})}}({target:document.body})}();
//# sourceMappingURL=bundle.js.map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Svelte app</title>
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="bundle.css" />
<script defer src="bundle.js"></script>
</head>
<body></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment