Adding Polygon overlays

This interactive map is rendered within the browser using SVG. The GIS raster map appears in the background.


<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/piximaps.min.css">
    <script src="js/piximaps.min.js"></script>
    <style>
      #chart { width: 740px; height: 512px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); }
      .pixi .charttitle .subtitle { font-size: 0.9em; font-style: italic; text-anchor: start }
    </style>
    <script>
      window.addEventListener('load', () => {
        'use strict';

        // Define the overlay path:
        const c1 = [[[46.45535310556133,5.310973866051086],[46.41985627804476,5.311281482754225],[46.408386551298264,5.320268300042073],[46.40290437313831,5.344767812884243],[46.39913606267916,5.353512930177601],[46.39140168713817,5.363884024428188],[46.38310700968074,5.367773184884612],[46.37365876643892,5.37025609434329],[46.360431227519086,5.375353751174686],[46.35233430288582,5.382956290600333],[46.34691804323313,5.391789298637235],[46.34275422442792,5.41387181872949],[46.33862336487633,5.426572014986533],[46.32503327686425,5.439601800182942],[46.32249543501629,5.447819573914217],[46.32029816912518,5.469111079113048],[46.31551911601434,5.473901118341956],[46.309520580410464,5.474538324883781],[46.302390453056944,5.472824458082243],[46.295106517351854,5.470341547724217],[46.286504222292024,5.468803461510532],[46.27686921234428,5.469880121770245],[46.27009064706567,5.4751535600887],[46.26616852825495,5.4825803180272885],[46.260686350094915,5.509870357930623],[46.26198273721354,5.514682369395842],[46.263839426248495,5.518461666872497],[46.266761790324296,5.520944577230523],[46.2713870341843,5.52760229251183],[46.27753937813975,5.54821264489766],[46.27965973940542,5.552717039659626],[46.282032786783674,5.556584226980505],[46.29089875407422,5.564955809063349],[46.293535472783816,5.567900145375432],[46.2954690664443,5.571789305831771],[46.29660065819374,5.576183836714705],[46.29732575637854,5.586884520804006],[46.29810578515389,5.591674560032914],[46.300017406578064,5.595409912137711],[46.30342316794486,5.5975632326570235],[46.3111245842322,5.6005075680698155],[46.314178783524,5.6029904784278415],[46.316661693882025,5.606242431443093],[46.320320141361464,5.613998780119573],[46.322473461880804,5.617404541486451],[46.331284497681395,5.62562231521764],[46.33367951729585,5.628896241368437],[46.34403962452902,5.647858644560813],[46.34156770118844,5.650649171621978],[46.31211335374826,5.6978244666258036],[46.30202790486396,5.707580326570763],[46.293293773688674,5.711469487027216],[46.28611970096347,5.710700443470728],[46.27767121425509,5.714413822439951],[46.27360627231161,5.721686772026885],[46.27123322583273,5.730541753199361],[46.26738801074808,5.839614022968789],[46.26962922201096,5.861696543061015],[46.27190339162823,5.871913828960032],[46.27547394836401,5.880922618484021],[46.29671052117362,5.915683361697717],[46.3022915761953,5.922209240863765],[46.308026439568465,5.927636487533874],[46.31314606863609,5.93429420191589],[46.31720002446161,5.94297340160125],[46.32027619598961,5.948246839020442],[46.32327546379162,5.952114027240583],[46.340480054810655,5.964836195733824],[46.34481965420366,5.968923109913618],[46.369835524489844,6.003024673449914],[46.37892121773996,6.0103195961724225],[46.38623811269875,6.017438736508524],[46.41738584201977,6.059013167851049],[46.4173832110001,6.059019361000082],[46.39649729400014,6.108184855000104],[46.38554189100006,6.12286096200009],[46.37040069600005,6.135056600000098],[46.359341940000036,6.136400187000078],[46.33177108493385,6.11860703679281],[46.30921580000012,6.104050740000076],[46.30141265900011,6.100743448000088],[46.27309397400012,6.093612101000133],[46.26229360000008,6.093095337000108],[46.253043518000055,6.094025513000133],[46.24637725900004,6.089684692000077],[46.24162302700006,6.067670532000079],[46.24115793900003,6.061882772000104],[46.241674704000076,6.055888305000082],[46.243431702000066,6.048033488000044],[46.24353505500008,6.04617313600005],[46.243431702000066,6.044519491000102],[46.243069967000054,6.042865844000062],[46.22270945200012,5.982921183000144],[46.2119607540001,5.958529907000127],[46.199920146000125,5.954809204000128],[46.186225891000106,5.965247843000071],[46.170826314000124,5.982921183000144],[46.16224802700009,5.979820597000128],[46.152171122000055,5.972172485000044],[46.13046704660144,5.958839981468003],[46.12824615923287,5.954596937598609],[46.12714752673696,5.9448191045180465],[46.12958649172319,5.92332984649525],[46.12824615923287,5.913727794901774],[46.12262115973866,5.905510021170585],[46.10589996780928,5.892963634164374],[46.09930817013597,5.88624000127507],[46.09333160766758,5.871584239121347],[46.097231754242074,5.863674082093183],[46.10504303350913,5.856928476967681],[46.111030582995056,5.845942148411382],[46.09528717446355,5.825199959910265],[46.050243226843435,5.824211190394152],[45.97057037212497,5.839108651643016],[45.93876610247358,5.84035260109161],[45.932931211106535,5.840580819349327],[45.898214412365235,5.831923592799569],[45.831856988209466,5.799557869200299],[45.81110381359014,5.791999275146452],[45.79732695797276,5.7841330634900885],[45.79507794688968,5.7838825744213125],[45.79276552640792,5.783620057819434],[45.79039510415069,5.783343295057023],[45.78797208864094,5.783050065707954],[45.785501888401484,5.782738151144798],[45.78298991285416,5.782405333639247],[45.78044156872343,5.782049392765231],[45.777862266330516,5.7816681098953495],[45.77525741239967,5.781259265502683],[45.772632415453614,5.780820641859151],[45.7699926849144,5.78035001853857],[45.76734362930503,5.779845176913426],[45.764690656248774,5.779303897456884],[45.762039175167786,5.778723962440893],[45.75939459278615,5.778103151439268],[45.75676231942555,5.777439245824496],[45.754147761809804,5.776730026969204],[45.751556330260456,5.775973275346331],[45.748993431501646,5.775166771429355],[45.7464644749555,5.774308297489966],[45.74397486914492,5.773395634001361],[45.74153002169314,5.772426560537383],[45.73913534202242,5.7713988602692154],[45.736796237756124,5.770310311871384],[45.734518117417196,5.769158697615779],[45.73230638952825,5.767941798874915],[45.73016646351152,5.76665739522258],[45.728103746090994,5.765303268930779],[45.726123646688876,5.763877199573045],[45.72423157382809,5.762376969421666],[45.72243293603117,5.760800358050062],[45.72073314092168,5.759145147730322],[45.71913759792176,5.757409118935755],[45.71765171465492,5.755590052139183],[45.716280899643806,5.7536857287133785],[45.7150305623106,5.751693929131591],[45.71390610937948,5.7496124356653695],[45.7129129511718,5.747439026989497],[45.712056495310975,5.7451714862750975],[45.71134214942063,5.742807593095932],[45.710775322922814,5.740345128824686],[45.71036142434028,5.737781874833672],[45.710105862195775,5.7351156115962],[45.710014043213505,5.732344119585463],[45.70014189553203,5.71289770936184],[45.687079151082,5.694089114521034],[45.65705351470788,5.660536867682282],[45.645770555566685,5.6408713394407926],[45.643749071162716,5.619865479608194],[45.65558134700157,5.600485595833618],[45.701361378025155,5.565922606343179],[45.71955473766104,5.547026120758886],[45.76410430007334,5.477680414919234],[45.792987357680374,5.4501926212924445],[45.83107695853474,5.433010003408896],[45.83197783820668,5.43432836276375],[45.83283477160737,5.437492425035401],[45.833680718890065,5.438964593641089],[45.83922881465804,5.434965570204952],[45.84426055298218,5.430175530976044],[45.873890681010124,5.384911857396304],[45.87995513422209,5.369047598867581],[45.879219050818506,5.3619724030040175],[45.8759231524316,5.3570725007953115],[45.873890681010124,5.347074941755125],[45.86799102316715,5.3334958398610866],[45.85402739904518,5.318752186963877],[45.799820854448825,5.272851305942993],[45.78973540466515,5.2573166372530125],[45.78565947660351,5.239167222988982],[45.788834525892696,5.219875229957921],[45.80291899911248,5.191069076077014],[45.80902739769624,5.1668991530734445],[45.82269439033385,5.133786359053204],[45.8266055230265,5.118405499614141],[45.826188042444215,5.102431377206273],[45.8206729059298,5.067384989525635],[45.81977202715734,5.050290262385744],[45.8266055230265,4.992194557332965],[45.82458403862245,4.975583228383243],[45.81561919447026,4.946930882854019],[45.81134551268528,4.91689426126112],[45.83064849183441,4.91467502313381],[45.858246149340346,4.903710666813879],[45.87416533935888,4.909093968112131],[45.8834158279781,4.8869675017488134],[45.89860992071124,4.8670822475477],[45.909673152993605,4.845944551599786],[45.90656402221188,4.820060760895416],[45.92266997983572,4.812655976092401],[45.93121734340562,4.794330779441964],[45.94020416069347,4.790177947654172],[45.94477447306346,4.784421111145434],[45.95136626983748,4.7573288249652705],[45.956903379487386,4.748539762300226],[45.966615294060546,4.746738004755116],[45.997915344417635,4.755373259068676],[46.01996490525613,4.753901090462989],[46.04047638078032,4.749660367931625],[46.059438783972695,4.749023160490509],[46.07701690930287,4.758779020435469],[46.10777862997972,4.769040251706286],[46.11810577885862,4.774159880773908],[46.141913152769746,4.790177947654172],[46.15143829883843,4.794572479436368],[46.17175202063919,4.79782443245162],[46.17899201097248,4.795187713742024],[46.18239777323865,4.7944186701854505],[46.18801178661471,4.793957244231478],[46.19227448228153,4.795187713742024],[46.203117988604276,4.801230193818412],[46.250556954939555,4.815182831822199],[46.25733552021805,4.818610566324594],[46.3375906499885,4.872751193312951],[46.341128247470664,4.874465060114403],[46.34497346255523,4.875234102771685],[46.34869782854196,4.87508029442003],[46.356036695736975,4.874157443411264],[46.35970612933437,4.874157443411264],[46.36337556293188,4.875541720374116],[46.36678132519796,4.877563204778056],[46.37553742860936,4.885934786860901],[46.39608186338728,4.899272189659797],[46.40399201951607,4.902721897297738],[46.41282502755297,4.905204807655764],[46.44719026331998,4.911884495173297],[46.45116731451992,4.913268773035497],[46.45504548885819,4.91498263983695],[46.47266755956025,4.9256833239262505],[46.476677569114514,4.927375218491591],[46.487444171711104,4.933725316170467],[46.49132234515011,4.935131566268808],[46.50051790227937,4.937153050672748],[46.501605548657125,4.937614476626834],[46.50439607661767,4.940712621290402],[46.507186603678804,4.946601293015306],[46.50951570568526,4.959982641185974],[46.50879060750049,4.973166235633215],[46.505736408208605,4.988195532997452],[46.4933108711997,5.025307351353206],[46.490904864567824,5.041435281213268],[46.492662677640425,5.064067118003152],[46.50904329361313,5.125238995483301],[46.511218586368585,5.155319563347177],[46.509405841806114,5.166481672491159],[46.505428791505494,5.178588606678886],[46.49514558799845,5.195990951421265],[46.479797686913656,5.213656967495098],[46.4687124814958,5.240375718464691],[46.45535310556133,5.310973866051086]]];
        const c2 = [[[50.0197685248975,3.89580291477273],[50.02170211855798,3.9057345553054574],[50.030765839571785,3.9218624860648674],[50.034259492581526,3.929596860706596],[50.038445283622934,3.9424728384506977],[50.0426091015288,3.9620724481849265],[50.041389619935046,3.9749264527936248],[50.03705001964266,3.983473816363528],[50.03064499047386,3.9859347535859797],[50.00981491122917,3.983473816363528],[50.003662567273636,3.984089050669155],[50.00056442260998,3.9850119025772983],[49.99823532060353,3.986857605494123],[49.994620818495946,3.9909005743020316],[49.992093963665525,3.9969430552777965],[49.97087936309211,4.081076359386543],[49.969044646293355,4.099357609765889],[49.969714812088824,4.106652531589134],[49.972252653936806,4.117550969401691],[49.97384567164042,4.121901555812201],[49.97498687771423,4.131664673627824],[49.955504863000044,4.187681925000078],[49.95302439400007,4.201117798000041],[49.95440693329218,4.215945032765973],[49.938041226521364,4.218053902465641],[49.91679366759368,4.2169992144422395],[49.90710372525672,4.224272164029173],[49.8980400042428,4.233610543391933],[49.880802454869325,4.2466403294876045],[49.8701896615236,4.250221872341541],[49.860983118276266,4.249914254739053],[49.85452315761762,4.247892770335085],[49.84207564747311,4.239191598413527],[49.824607384223356,4.22363495748732],[49.813500206569216,4.217438668160014],[49.77822310591159,4.209836128734366],[49.771411582278716,4.212648628931106],[49.76140303622111,4.2285128874598],[49.75004317245438,4.235324411092677],[49.73670576965557,4.2348629851387045],[49.72737837731023,4.230973824682252],[49.72019331846687,4.22117401936552],[49.69920943087055,4.185204779776825],[49.68722334578075,4.169801947202103],[49.68265303341079,4.161122747516828],[49.67986250634954,4.151213079220213],[49.67386397074566,4.140973821084998],[49.6651847710603,4.130426946246615],[49.648705278225975,4.117550968502428],[49.641981645336585,4.105422062078503],[49.63893843216286,4.093952335331977],[49.639454789606845,4.073627627413089],[49.63774092280531,4.063410341514043],[49.63366499474367,4.054203798266656],[49.62569990622569,4.046447450489438],[49.61872358812309,4.048622743245062],[49.60421064730349,4.056686708624682],[49.59077436764298,4.061388857110103],[49.583929885655664,4.065256045330244],[49.577074416651016,4.070529482749436],[49.5673075705879,4.073166201459003],[49.55933149595177,4.070221865147005],[49.54981733510195,4.065563662033384],[49.54167646599609,4.065871279635871],[49.53301923854704,4.06991424844378],[49.52261518594207,4.071935732847834],[49.51610029289421,4.0664865139414985],[49.50524580045334,4.048468934893492],[49.49614912018578,4.041965028863018],[49.48744794826413,4.043041688223269],[49.4796146958615,4.048468934893492],[49.4588175758704,4.067277529734184],[49.44757856210097,4.072243349550973],[49.44478803414043,4.052511903701401],[49.44029462549659,4.04350311417744],[49.43454877600519,4.037768250804078],[49.4267484828562,4.033879090347739],[49.42176068990386,4.047238466282209],[49.40729169535541,4.05528045852634],[49.3820560982104,4.054049989915086],[49.37517865696944,4.051105653603088],[49.36682904712279,4.046601258841008],[49.36195111715031,4.0408663954678445],[49.359830755884644,4.032033387430914],[49.36158856805798,4.021969910782758],[49.37005902790182,4.003337097429096],[49.37072919369729,3.996020202470362],[49.36933392971713,3.984220885885236],[49.36323651725144,3.9740035999861334],[49.36204999401204,3.9636105334993204],[49.36350018948215,3.953371275364077],[49.37662885154026,3.9249606298291724],[49.379672064713986,3.9144137540915267],[49.38117719167403,3.901867367085316],[49.381012397204415,3.8779391431768886],[49.37665082467575,3.8655245922861354],[49.371201605769414,3.859020685356313],[49.364950384952266,3.859020685356313],[49.35838056041453,3.860866389172486],[49.35212933959727,3.861042169760367],[49.34732831335094,3.857482599142628],[49.34577924101919,3.8498800606162717],[49.34024213136922,3.787653495112693],[49.32453168209145,3.7033663826523764],[49.312391788650075,3.6681661857209065],[49.30283368332775,3.6501486075722482],[49.29554974762277,3.6518624743737007],[49.28076214935368,3.662541186226804],[49.27296185620466,3.665661303126683],[49.26552411124874,3.66724333471214],[49.22273236190895,3.670978685917646],[49.215887879022375,3.673000170321586],[49.210021179533754,3.6753072991924682],[49.20564862088713,3.679811693954548],[49.20436322078601,3.688183276936684],[49.20386883557822,3.6970162849735857],[49.20172650117706,3.7052340587048604],[49.196584899873216,3.711122730429679],[49.190509459643835,3.716857593802928],[49.18570843429677,3.724987477689922],[49.17927044587432,3.741730641855611],[49.175293394674384,3.745597830075752],[49.16969036741651,3.746674489436174],[49.16067059177439,3.742345876161238],[49.1541337264903,3.733952321842196],[49.149354673379435,3.7237350359431787],[49.147333188975495,3.71329802408448],[49.14630047408758,3.7025973399952647],[49.15118939017819,3.6595968499147205],[49.150563169754406,3.649225755664105],[49.14666302317991,3.6358663797296344],[49.143048521072444,3.6295382551863327],[49.13840130407695,3.6254952863783387],[49.132556576824555,3.6239572001646536],[49.12643719212272,3.623319992723424],[49.11969158609787,3.624396652983137],[49.106332211062664,3.6290548560967864],[49.09881756238059,3.6292306375839303],[49.0903361164186,3.626110520684051],[49.07943767860604,3.618200363655802],[49.07121990487468,3.6085323944544143],[49.06677044160253,3.6009518281643693],[49.06031048094394,3.58638395675419],[49.05470745278669,3.58436247235025],[49.04945598760372,3.5838790732606753],[49.044556085395016,3.5838790732606753],[49.04132610461602,3.584823897404931],[49.03679973761783,3.587460617013903],[49.033339043861815,3.5947335657014605],[49.03184490301982,3.604203781179592],[49.034272881887915,3.6368112047732666],[49.034163018908146,3.6472042712600796],[49.03303142715859,3.6569601312051248],[49.02972454175415,3.6651779049363995],[49.02434124045581,3.6712863035201337],[49.015508232418995,3.6708029053298787],[49.00883953101953,3.6657931392420267],[49.003412285248686,3.657575365510752],[48.99912761644637,3.6481271231681944],[48.98794353416679,3.6313839581032425],[48.97406780168768,3.6199142313567165],[48.966003836307976,3.601874680072399],[48.958972585816156,3.590558761677471],[48.951688650111095,3.5860763391517025],[48.94166911883477,3.581725752741363],[48.93345134510349,3.5741232133157155],[48.89267009315023,3.511764812596084],[48.88435344255734,3.5030636406744406],[48.871279711989075,3.492340984348914],[48.8500980697701,3.477904948154844],[48.8469449936166,3.4495382479917964],[48.84838420296856,3.435212075676759],[48.85285563847691,3.418644692098866],[48.87076335454515,3.383092933092371],[48.880475268219044,3.3745675417586654],[48.88727580573385,3.3728536749571276],[48.89949260290126,3.3712936165071596],[48.914840503986056,3.367272619935534],[48.92047649049758,3.3632296511275115],[48.92473918616443,3.356418127494578],[48.923783375902104,3.3483541621149584],[48.91743327822323,3.3319186146523805],[48.919905201563836,3.3199435165800253],[49.004346123274985,3.175956694345956],[49.01034465797957,3.1691451707130227],[49.01904583080042,3.1657394093463154],[49.02372600615027,3.1655636278591714],[49.02966961026431,3.168200346568767],[49.03618450331217,3.1723971246275937],[49.04610515772677,3.175649077642845],[49.055663263948475,3.1740890191928486],[49.07814129148741,3.1590157764569256],[49.08705120414973,3.1490841350248218],[49.09314861661534,3.140866361293547],[49.10620037494732,3.07973842918517],[49.11371502362948,3.094130520007468],[49.12587688930702,3.10973110630556],[49.140653501457905,3.1230685091044563],[49.15601238866074,3.1307149939018757],[49.170547300817276,3.1286495641261354],[49.18111614879123,3.117619290198121],[49.1883781122601,3.1025899928338845],[49.19713421657087,3.0675436042538706],[49.1973759156659,3.04757045930927],[49.18757611034917,2.99459438332417],[49.18737835662591,2.985190085454036],[49.19126751708225,2.977323874697049],[49.20088055389442,2.969655417663404],[49.224369324984366,2.965238912745633],[49.23463055535581,2.982970847326726],[49.24352948190008,3.00656948139644],[49.262920351792786,3.0198189934518496],[49.27515912119648,3.017841454419596],[49.284167910720555,3.0107882316915777],[49.31609418150123,2.9657223118352647],[49.32133466056615,2.964250143229492],[49.335254338416945,2.9916280747757753],[49.33771527653877,3.0416378422126513],[49.350789007106954,3.0705099137015566],[49.370081000138015,3.083122218315765],[49.41894818970721,3.100436672314572],[49.428824898750094,3.11884975880929],[49.42704511344118,3.1277926307253665],[49.42035443980552,3.1446896032426253],[49.42062909815431,3.154313627072213],[49.42707807269491,3.165058256533314],[49.43729535859384,3.1693868698082497],[49.448962839063796,3.1679147021018252],[49.45976240001474,3.1612569868205185],[49.4656400856214,3.1525997602707605],[49.47167158047901,3.1355050331307837],[49.48052656075214,3.1276607946099944],[49.49177656153907,3.122870755381001],[49.50343305589078,3.120871243213344],[49.515320263219564,3.121398586775314],[49.56245161285162,3.1326485875622723],[49.580161574297136,3.132340969959756],[49.59706953383193,3.126056790788226],[49.617251419517316,3.109972805400588],[49.62619429143339,3.1073800320627925],[49.636345658825036,3.1078194848812757],[49.68622359014657,3.1209591339568306],[49.69692427423587,3.1212887237955442],[49.70576826839084,3.118564114342462],[49.72094038888787,3.1103023952393016],[49.75400923753625,3.105248683779763],[49.76587447262881,3.100392726942772],[49.769379110857244,3.094943508036465],[49.77053267574237,3.0752120621868926],[49.77845381888858,3.05675503032046],[49.788264609424175,3.057018701651799],[49.794603720984924,3.063764307676678],[49.80517256985823,3.0808370616810805],[49.8142692492265,3.0849898943681353],[49.82456343975096,3.0849898943681353],[49.84632735612254,3.081232570027055],[49.861081995137994,3.0840670424601058],[49.86897017903047,3.093581203309924],[49.87463912479572,3.1059737819644795],[49.882692104057384,3.1175094272183514],[49.941337125807735,3.1533468306916745],[49.96940719448642,3.187668121086972],[49.975581511577445,3.193073394621507],[49.98608444194349,3.186723296942631],[50.018680878519746,3.156994291153609],[50.02898605426296,3.225944490445812],[50.02831588846749,3.257101718569487],[50.018296357191076,3.316208165374519],[50.0197685248975,3.330050939499273],[50.02392135668529,3.3416964477329145],[50.02857956069812,3.3505294557697596],[50.03244674801897,3.3619991834155485],[50.0322929396674,3.372546058253988],[50.03007370154009,3.3837081682973746],[50.02239425748894,3.4077902005573435],[50.015373993115304,3.4486153969830298],[50.01637374964875,3.4645675462552106],[50.0190653998483,3.4779049490541922],[50.02376754833364,3.4861227227853817],[50.027491914320336,3.4946481141191725],[50.02955734409619,3.5010421571698487],[50.03322677769361,3.5173458685170544],[50.03626998996805,3.5267941108594982],[50.049453584415375,3.554743331339637],[50.050101777974646,3.56436735516931],[50.048937226971475,3.5735079799093796],[50.04004928744462,3.5970626686072933],[50.03668747055033,3.6161788801512387],[50.03802780304065,3.6295382560857092],[50.042367402433655,3.642084643091806],[50.04857467877841,3.653554369838332],[50.05931930734022,3.6832174571200085],[50.06009933701475,3.6968624775213925],[50.05922043047849,3.708332204267805],[50.051211397487975,3.751640311051517],[50.043048555246656,3.853901057188068],[50.03968673835226,3.863371272666086],[50.03389694348917,3.870182796299048],[50.02712936522801,3.8760714680238664],[50.02092208978263,3.886134945571257],[50.0197685248975,3.89580291477273]]];
        /* ... */
        const c95 = [[[49.16780071912791,1.8857002973308568],[49.173953063083445,1.920417096072157],[49.17493084648132,1.967614363312208],[49.1774686883293,1.9875215906489245],[49.18244549516348,2.0020674898227924],[49.20361615036501,2.044760362300849],[49.208516052573714,2.0571749140909787],[49.21193280095801,2.071588977149588],[49.21069134532931,2.0810372194921456],[49.206351745936246,2.0889473756209043],[49.20061688256308,2.0959346807409247],[49.19425579786676,2.108678821470477],[49.18496136387577,2.134562612174875],[49.185477721319785,2.149767691026142],[49.181962096073846,2.1738497223867626],[49.16309857064249,2.2377901546918793],[49.16139568905979,2.2529732613069484],[49.16185711501387,2.2665084178292147],[49.176381041951515,2.3006099813655965],[49.17957806347681,2.318737423393401],[49.176381041951515,2.3349312717608086],[49.11256145874435,2.509196415582096],[49.11224285592306,2.5187764940399973],[49.11782391004539,2.53569543969283],[49.11503338298422,2.5434298152337362],[49.110133480775545,2.549230596214983],[49.10455242575384,2.553273565023005],[49.09607097979185,2.5621065739592837],[49.08454632155551,2.583332160650741],[49.06755047127726,2.572038214492011],[49.02955974728451,2.566391241862334],[49.00978435516387,2.5531197566714354],[48.99845745065079,2.524972783367332],[48.96259807404189,2.4735128204602574],[48.955445974452175,2.4411910413334965],[48.9723209756325,2.346269163291254],[48.95812663853354,2.318847287272547],[48.95673137455327,2.2946773642688925],[48.94488811259629,2.2546431827367144],[48.928287770664014,2.229242791121976],[48.92077312198202,2.2138619316828283],[48.91767497731837,2.19628380545322],[48.912906910325574,2.1837374184470946],[48.89049480039472,2.1628414215943224],[48.88288127485092,2.1516133939429665],[48.88617717323794,2.124894642973402],[48.910709644434576,2.1217305798024597],[48.93854900103554,2.1362325336045274],[48.954116628979165,2.166510855191831],[48.96002727383967,2.172267691700597],[48.96783855310673,2.17701378555779],[48.975649832373875,2.1789473792181866],[48.984977225618394,2.17738732076819],[48.98859172772606,2.17310265286514],[48.9900529093143,2.166642691307203],[48.997183036667735,2.1452632962640905],[49.000193290587816,2.0932540166595572],[48.99518352449999,2.0727535272534965],[48.98297771345074,2.060932238432059],[48.95177654085467,2.041750108380768],[48.94281169670239,2.0244136821456493],[48.94664592566889,2.0083077245218988],[48.95982951921695,2.0002437591421938],[48.97906658075809,2.007714462452469],[49.00141277308094,1.9899825278713763],[49.009542656068646,1.9779415121910233],[49.01386028322551,1.9598580155349907],[49.013618584130285,1.9410713938297874],[48.99836955990722,1.8811519580963818],[49.01826580112578,1.8666280311587116],[49.05583904453624,1.8547188515937307],[49.06177166253221,1.8505001012986497],[49.06750652590537,1.8414473664028321],[49.07254925034766,1.823166116023458],[49.072659114226724,1.8026216812456255],[49.069121515845296,1.782143164975139],[49.046577569798984,1.724069432158558],[49.047115900378486,1.7049971659864127],[49.06540813687599,1.6972188450736212],[49.069033625101724,1.6991084933623029],[49.076361506178586,1.6747188443991945],[49.078196222977255,1.6534712845721344],[49.082590754759536,1.6198750923616103],[49.19074017262082,1.6681490198613744],[49.230664491173314,1.6980538062381925],[49.221512879415826,1.7125337869047712],[49.214184998338965,1.7154781232168546],[49.20356121797582,1.7185762678804508],[49.1958048701986,1.7253877915133842],[49.189454772519696,1.7374947257010263],[49.18712567051324,1.7489644524475239],[49.18593914727384,1.7601265624909104],[49.18586224354772,1.7921187508796663],[49.175447203925245,1.8389864291803804],[49.17276653984396,1.867990335885338],[49.16780071912791,1.8857002973308568]]];

        // Set the map attributes:
        const map = {
          type: 'raster',
          url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: ['a', 'b', 'c'],
          zoom: 5,
          coordinates: [46.766616, 2.431521]
        };

        // Define the chart options:
        const opts = {
          chart: {
            width: window.innerWidth < (740 * 0.8) ? (window.innerWidth * 0.8) : 740,
            height: window.innerHeight < 512 ? window.innerHeight : 512,
          },
        };

        // Set the overlay attributes:
        const zoi = [
          {'1': { title: 'Ain', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c1 }, properties: { Population: '612,191', Area: '5,762 km²' }}},
          {'2': { title: 'Aisne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c2 }, properties: { Population: '540,067', Area: '7,369 km²' }}},
          {'3': { title: 'Allier', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c3 }, properties: { Population: '343,431', Area: '7,340 km²' }}},
          {'4': { title: 'Alpes-de-Haute-Provence', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c4 }, properties: { Population: '161,916', Area: '6,925 km²' }}},
          {'5': { title: 'Hautes-Alpes', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c5 }, properties: { Population: '139,279', Area: '5,549 km²' }}},
          {'6': { title: 'Alpes-Maritimes', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c6 }, properties: { Population: '1,080,771', Area: '4,299 km²' }}},
          {'7': { title: 'Ardèche', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c7 }, properties: { Population: '320,379', Area: '5,529 km²' }}},
          {'8': { title: 'Ardennes', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c8 }, properties: { Population: '280,907', Area: '5,229 km²' }}},
          {'9': { title: 'Ariège', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c9 }, properties: { Population: '152,684', Area: '4,890 km²' }}},
          {'10': { title: 'Aube', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c10 }, properties: { Population: '306,581', Area: '6,004 km²' }}},
          {'11': { title: 'Aude', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c11 }, properties: { Population: '364,877', Area: '6,139 km²' }}},
          {'12': { title: 'Aveyron', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c12 }, properties: { Population: '277,740', Area: '8,735 km²' }}},
          {'13': { title: 'Bouches-du-Rhône', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c13 }, properties: { Population: '1,993,177', Area: '5,087 km²' }}},
          {'14': { title: 'Calvados', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c14 }, properties: { Population: '689,945', Area: '5,548 km²' }}},
          {'15': { title: 'Cantal', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c15 }, properties: { Population: '147,035', Area: '5,726 km²' }}},
          {'16': { title: 'Charente', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c16 }, properties: { Population: '353,482', Area: '5,956 km²' }}},
          {'17': { title: 'Charente-Maritime', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c17 }, properties: { Population: '633,417', Area: '6,864 km²' }}},
          {'18': { title: 'Cher', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c18 }, properties: { Population: '311,650', Area: '7,235 km²' }}},
          {'19': { title: 'Corrèze', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c19 }, properties: { Population: '240,781', Area: '5,857 km²' }}},
          {'2A': { title: 'Corse-du-Sud', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c2A }, properties: { Population: '149,234', Area: '4,014 km²' }}},
          {'2B': { title: 'Haute-Corse', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c2B }, properties: { Population: '170,974', Area: '4,666 km²' }}},
          {'21': { title: 'Côte-d\'Or', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c21 }, properties: { Population: '529,761', Area: '8,763 km²' }}},
          {'22': { title: 'Côtes-d\'Armor', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c22 }, properties: { Population: '597,085', Area: '6,878 km²' }}},
          {'23': { title: 'Creuse', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c23 }, properties: { Population: '120,872', Area: '5,565 km²' }}},
          {'24': { title: 'Dordogne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c24 }, properties: { Population: '416,909', Area: '9,060 km²' }}},
          {'25': { title: 'Doubs', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c25 }, properties: { Population: '533,320', Area: '5,234 km²' }}},
          {'26': { title: 'Drôme', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c26 }, properties: { Population: '494,712', Area: '6,530 km²' }}},
          {'27': { title: 'Eure', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c27 }, properties: { Population: '595,043', Area: '6,040 km²' }}},
          {'28': { title: 'Eure-et-Loir', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c28 }, properties: { Population: '432,967', Area: '5,880 km²' }}},
          {'29': { title: 'Finistère', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c29 }, properties: { Population: '903,921', Area: '6,733 km²' }}},
          {'30': { title: 'Gard', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c30 }, properties: { Population: '733,201', Area: '5,853 km²' }}},
          {'31': { title: 'Haute-Garonne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c31 }, properties: { Population: '1,298,562', Area: '6,309 km²' }}},
          {'32': { title: 'Gers', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c32 }, properties: { Population: '190,276', Area: '6,257 km²' }}},
          {'33': { title: 'Gironde', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c33 }, properties: { Population: '1,505,517', Area: '10,725 km²' }}},
          {'34': { title: 'Hérault', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c34 }, properties: { Population: '1,092,331', Area: '6,224 km²' }}},
          {'35': { title: 'Ille-et-Vilaine', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c35 }, properties: { Population: '1,019,923', Area: '6,775 km²' }}},
          {'36': { title: 'Indre', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c36 }, properties: { Population: '228,091', Area: '6,784.52 km²' }}},
          {'37': { title: 'Indre-et-Loire', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c37 }, properties: { Population: '600,252', Area: '6,127 km²' }}},
          {'38': { title: 'Isère', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c38 }, properties: { Population: '1,235,387', Area: '7,431 km²' }}},
          {'39': { title: 'Jura', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c39 }, properties: { Population: '260,502', Area: '4,999 km²' }}},
          {'40': { title: 'Landes', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c40 }, properties: { Population: '397,226', Area: '9,243 km²' }}},
          {'41': { title: 'Loir-et-Cher', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c41 }, properties: { Population: '332,001', Area: '6,343 km²' }}},
          {'42': { title: 'Loire', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c42 }, properties: { Population: '756,715', Area: '4,781 km²' }}},
          {'43': { title: 'Haute-Loire', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c43 }, properties: { Population: '226,203', Area: '4,977 km²' }}},
          {'44': { title: 'Loire-Atlantique', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c44 }, properties: { Population: '1,327,643', Area: '6,809.10 km²' }}},
          {'45': { title: 'Loiret', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c45 }, properties: { Population: '665,587', Area: '6,775 km²' }}},
          {'46': { title: 'Lot', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c46 }, properties: { Population: '173,758', Area: '5,217 km²' }}},
          {'47': { title: 'Lot-et-Garonne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c47 }, properties: { Population: '333,180', Area: '5,361 km²' }}},
          {'48': { title: 'Lozère', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c48 }, properties: { Population: '76,607', Area: '5,167 km²' }}},
          {'49': { title: 'Maine-et-Loire', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c49 }, properties: { Population: '801,168', Area: '7,171.90 km²' }}},
          {'50': { title: 'Manche', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c50 }, properties: { Population: '499,919', Area: '5,938 km²' }}},
          {'51': { title: 'Marne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c51 }, properties: { Population: '569,999', Area: '8,162 km²' }}},
          {'52': { title: 'Haute-Marne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c52 }, properties: { Population: '181,521', Area: '6,211 km²' }}},
          {'53': { title: 'Mayenne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, geometry: { type: 'Polygon', coordinates: c53 }, properties: { Population: '307,500', Area: '5,175.2 km²' }}},
          {'54': { title: 'Meurthe-et-Moselle', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c54 }, properties: { Population: '731,004', Area: '5,246 km²' }}},
          {'55': { title: 'Meuse', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c55 }, properties: { Population: '192,094', Area: '6,211 km²' }}},
          {'56': { title: 'Morbihan', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c56 }, properties: { Population: '737,778', Area: '6,823 km²' }}},
          {'57': { title: 'Moselle', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c57 }, properties: { Population: '1,046,873', Area: '6,216 km²' }}},
          {'58': { title: 'Nièvre', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c58 }, properties: { Population: '214,303', Area: '6,817 km2' }}},
          {'59': { title: 'Nord', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c59 }, properties: { Population: '2,587,128', Area: '5,743 km²' }}},
          {'60': { title: 'Oise', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c60 }, properties: { Population: '815,400', Area: '5,860 km²' }}},
          {'61': { title: 'Orne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c61 }, properties: { Population: '288,848', Area: '6,103 km²' }}},
          {'62': { title: 'Pas-de-Calais', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c62 }, properties: { Population: '1,465,205', Area: '6,671 km²' }}},
          {'63': { title: 'Puy-de-Dôme', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c63 }, properties: { Population: '640,999', Area: '7,970 km²' }}},
          {'64': { title: 'Pyrénées-Atlantiques', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c64 }, properties: { Population: '664,057', Area: '7,645 km²' }}},
          {'65': { title: 'Hautes-Pyrénées', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c65 }, properties: { Population: '227,926', Area: '4,464 km2' }}},
          {'66': { title: 'Pyrénées-Orientales', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c66 }, properties: { Population: '462,705', Area: '4,116 km²' }}},
          {'67': { title: 'Bas-Rhin', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c67 }, properties: { Population: '1,104,667', Area: '4,755 km²' }}},
          {'68': { title: 'Haut-Rhin', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c68 }, properties: { Population: '758,723', Area: '3,525.17 km²' }}},
          {'69': { title: 'Rhône', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c69 }, properties: { Population: '442,851', Area: '2,715 km²' }}},
          {'70': { title: 'Haute-Saône', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c70 }, properties: { Population: '238,956', Area: '5,360 km²' }}},
          {'71': { title: 'Saône-et-Loire', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c71 }, properties: { Population: '556,222', Area: '8,575 km²' }}},
          {'72': { title: 'Sarthe', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c72 }, properties: { Population: '567,382', Area: '6,206 km²' }}},
          {'73': { title: 'Savoie', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c73 }, properties: { Population: '423,715', Area: '6,028 km²' }}},
          {'74': { title: 'Haute-Savoie', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c74 }, properties: { Population: '769,677', Area: '4 388 km²' }}},
          {'75': { title: 'Paris', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c75 }, properties: { Population: '2,240,621', Area: '105.4 km²' }}},
          {'76': { title: 'Seine-Maritime', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c76 }, properties: { Population: '1,254,609', Area: '6,278 km²' }}},
          {'77': { title: 'Seine-et-Marne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c77 }, properties: { Population: '1,365,200', Area: '5,915 km²' }}},
          {'78': { title: 'Yvelines', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon'  , coordinates: c78 }, properties: { Population: '1,412,356', Area: '2,284,4 km²' }}},
          {'79': { title: 'Deux-Sèvres', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c79 }, properties: { Population: '371,632', Area: '5,999 km²' }}},
          {'80': { title: 'Somme', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c80 }, properties: { Population: '571,675', Area: '6,170 km²' }}},
          {'81': { title: 'Tarn', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c81 }, properties: { Population: '393,872', Area: '5,758 km²' }}},
          {'82': { title: 'Tarn-et-Garonne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c82 }, properties: { Population: '250,342', Area: '3,717 km²' }}},
          {'83': { title: 'Var', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c83 }, properties: { Population: '1,021,669', Area: '5,973 km²' }}},
          {'84': { title: 'Vaucluse', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c84 }, properties: { Population: '558,861', Area: '3,567 km²' }}},
          {'85': { title: 'Vendée', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c85 }, properties: { Population: '655,506', Area: '6,719.59 km²' }}},
          {'86': { title: 'Vienne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c86 }, properties: { Population: '431,248', Area: '6,990 km²' }}},
          {'87': { title: 'Haute-Vienne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c87 }, properties: { Population: '375,856', Area: '5,520 km²' }}},
          {'88': { title: 'Vosges', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c88 }, properties: { Population: '375,226', Area: '5,874 km²' }}},
          {'89': { title: 'Yonne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c89 }, properties: { Population: '341,902', Area: '7,427 km²' }}},
          {'90': { title: 'Territoire de Belfort', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c90 }, properties: { Population: '143,348', Area: '609 km²' }}},
          {'91': { title: 'Essonne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c91 }, properties: { Population: '1,257,141', Area: '1,804 km2' }}},
          {'92': { title: 'Hauts-de-Seine', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c92 }, properties: { Population: '1,586,434', Area: '176 km2' }}},
          {'93': { title: 'Seine-Saint-Denis', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c93 }, properties: { Population: '1,552,482', Area: '236 km2' }}},
          {'94': { title: 'Val-de-Marne', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c94 }, properties: { Population: '1,354,005', Area: '245 km2' }}},
          {'95': { title: 'Val-d’Oise', style: { fillColor: 'red', fillOpacity: 0.1, strokeColor: 'red', strokeOpacity: 0.2, strokeWidth: 1 }, over: { fillOpacity: 1 }, geometry: { type: 'Polygon', coordinates: c95 }, properties: { Population: '1,197,264', Area: '1,246 km2' }}},
        ];

        // Fix the chart dimensions:
        const el = document.getElementById('chart');
        el.style.width = opts.chart.width + 'px';
        el.style.height = opts.chart.height + 'px';

        // Draw the chart:
        const chart = Pixi.Map('#chart', map, opts);

        // Add the polygons one by one:
        let i = 0;
        const timer = setInterval(() => {
          chart.overlayAppend(zoi[i++]);
          if (i >= zoi.length) {
            clearInterval(timer);
          }
        }, 100);
      });
    </script>
  </head>
  <body>
    <div id="chart" class="pixi"></div>
  </body>
</html>
          

Methods

Map Methods

Name Return Description
.Map (id, map, options) this Creates and returns the map object.
.moveTo (id, zoom) this Moves the map to get the overlay at the center of the chart (if the zoom parameter is omitted, the map doesn't scale; if the zoom is 'auto', the map is scaled to best fit).
.moveTo ([φ, λ], zoom) this Moves the map to get these coordinates at the center of the chart (if the zoom parameter is omitted, the map doesn't scale; if the zoom is 'auto', the map is scaled to best fit).

Overlay Methods

Name Return Description
.overlayAppend (overlays) this Appends one or more overlays.
.overlayUpdate (overlays) this Updates one or more overlays.
.overlayRemove ([ids]) this Removes one or more overlays.
.overlayDelete () this Removes all the overlays.
.overlayBlink ([ids]) this Starts one or more overlays.
.overlayUnblink ([ids]) this Stops one or more overlays.
.overlaySetVisible ([ids]) this Sets one or more overlays, identified by their id, visible.
.overlaySetInvisible ([ids]) this Sets one or more overlays, identified by their id, invisible.
.overlayAttachTooltip (id, xmlString, width, height) this Attachs a user defined tooltip to a given overlay. The user defined HTML5 tooltip is included in a SVG foreignObject element.

Event Methods

Name Return Description
.addEventListener (type, listener) this Registers the specified listener on the EventTarget it's called on.
.addOneTimeEventListener (type, listener) this Registers the specified listener on the EventTarget it's called on for a one-time event.
.removeEventListener (type, listener) this Removes the event listener previously registered with addEventListener ().
.on (type, listener) this Alias on addEventListener ().
.one (type, listener) this Alias on addOneTimeEventListener ().
.off (type, listener) this Alias on removeEventListener ().

Event Types

Attribute Type Object Info
'overlayover' String OverEvent Fired when the mouse enters on the overlay.
'overlayout' String OverEvent Fired when the mouse leaves the overlay.
'click' String ClickEvent Fired when the mouse clicks the overlay or the map.
'dblclick' String ClickEvent Fired when the mouse double clicks the overlay or the map.

Event Objects

OverEvent
Attribute Type Info
id String The id of the overlay that fired the event.
title String The title of this overlay.
style Object The style applied to this overlay. See the section 'Overlay Attributes' for the detail of the style attributes.
properties Object/Array The data displayed by the tooltip when the mouse goes over or leaves this overlay.
geometry Object The geometry of this overlay. See the section 'Overlay Attributes' for the detail of the geometry attributes.
ClickEvent
Attribute Type Info
overlay Object The OverEvent object of the (double) clicked overlay or null (user clicks the map).
cursor Array The coordinates of the point (double) clicked on the map ([latitude, longitude]).

Map Attributes

map is an object with the following attributes:

Attribute Type Default Info
url String null The url of the tile server. The url looks like 'http://{s}.title.server.org/{z}/{x}/{y}{retina}.png'.

'{s}' means this tile server has several subdomains (optional),
'{z}' is the zoom factor (mandatory),
'{x}' is the tile number on the x-axis (mandatory),
'{y}' is the tile number on the y-axis (mandatory),
'{retina}' means the screen supports double size tiles (optional).
subdomains Array null The available subdomains of the tile server. If the url contains '{s}', a list of subdomains must be provided.
retina String undefined The pattern for requesting 'retina' tiles from the server.
coordinates Array [0, 0] The coordinates of the center of the map (latitude and longitude in decimal units).
zoom Number 0 The zoom factor.
maxZoom Number 19 The maximum zoom level which will be displayed on the map.
minZoom Number 0 The minimum zoom level which will be displayed on the map.
draggable Boolean true Authorizes (true) or prevents (false) the map from being dragged.
scrollwheel Boolean true Enables (true) or disables (false) scrollwheel zooming on the map.
keypad Boolean true Enables (true) or disables (false) the keypad.

If the map object is undefined, the following default map object is processed:

map = { url: '../maps/worldmap.json', origin: { x: 0, y: 50 }, scale: 1 };

Series Options

Not Applicable.

Chart Options

Attribute Type Default Info
chart Object The chart attributes.
chart.type String map The type of map (currently, 'map' is the only option).
chart.width Number 600 The outer width of the chart.
chart.height Number 420 The outer height of the chart.
tooltip Object The tooltip attributes.
tooltip.enabled Boolean true Enables (true) or disables (false) the tooltip.
tooltip.animated Boolean true smoothly moves (true) or not (false) the tooltip from previous item to current.

- means a computed value.

Overlay Attributes

The overlays are specified in an object. The overlays object has the following attributes:

Attribute Type Default Info
'id' String or Number The overlay Id.
'id'.title String undefined The name of the overlay.
'id'.style Object undefined The style applied to the overlay. By default, the css style is applied.
'id'.style.fillColor String undefined The color of the overlay.
'id'.style.fillOpacity String undefined The opacity of the overlay.
'id'.style.strokeColor String undefined The color of the overlay stroke.
'id'.style.strokeOpacity String undefined The opacity of the overlay stroke.
'id'.style.strokeWidth Number undefined The width of the overlay stroke.
'id'.style.backgroundColor String undefined The color of the background. It applies to Icon overlay only.
'id'.style.backgroundOpacity Number undefined The opacity of the background. It applies to Icon overlay only.
'id'.over Object undefined The style to apply to the SVG elements that belong to the serie when the mouse is over the element. By default, the css style is applied.
'id'.over.fillColor String undefined The fill color attribute.
'id'.over.fillOpacity Number undefined The color opacity attribute.
'id'.over.stroke String undefined The stroke color attribute.
'id'.over.strokeOpacity Number undefined The stroke color opacity attribute.
'id'.over.strokeWidth Number undefined The stroke width attribute.
'id'.over.backgroundColor String undefined The color of the background. It applies to Icon overlay only.
'id'.over.backgroundOpacity Number undefined The opacity of the background. It applies to Icon overlay only.
'id'.properties Object/Array null A set of data displayed by the tooltip when the mouse goes over the overlay.
'id'.properties[n] String ' ' If properties is an array of string, each string is a line of text displayed by the tooltip over the overlay.
'id'.properties[n] String ' ' If properties is an object, each pair of key/value is a list of items displayed by the tooltip over the overlay.
'id'.visibilityRange Object undefined defines a zoom range that turn the overlay visible. By default, all the zoom range. This visibility restriction applies to 'Icon' overlay only.
'id'.visibilityRange.minZoom Number undefined minimum zoom value that turns the overlay visisble.
'id'.visibilityRange.maxZoom Number undefined maximum zoom value that turns the overlay visisble.
'id'.geometry Object The geometry of the overlay. It looks like to the GeoJSON specification. See details below for each type of overlay.

Point

The overlay Point has the following geometry attributes:

Attribute Type Default Info
'id'.geometry Object The geometry of the overlay (similar to the GeoJSON specification).
'id'.geometry.type String 'Point' The type of the overlay. Here a 'Point'.
'id'.geometry.radius Number 0 The radius of the 'Point' overlay (not in the GeoJSON specification).
'id'.geometry.coordinates Array [ ] The coordinates [φ, λ] of the center of the 'Point' overlay.

Polyline

The overlay Polyline has the following geometry attributes:

Attribute Type Default Info
'id'.geometry Object The geometry of the overlay (similar to the GeoJSON specification).
'id'.geometry.type String 'Polyline' The type of the overlay. Here a 'Polyline'.
'id'.geometry.coordinates Array [ ] The coordinates [φ, λ] must be an array of LineString coordinate arrays.

Polygon

The overlay Polygon has the following geometry attributes:

Attribute Type Default Info
'id'.geometry Object The geometry of the overlay (similar to the GeoJSON specification).
'id'.geometry.type String 'Polygon' The type of the overlay. Here a 'Polygon'.
'id'.geometry.coordinates Array [ ] The coordinates [φ, λ] must be an array of LinearRing coordinate arrays.

Icon

The overlay Icon has the following geometry attributes:

Attribute Type Default Info
'id'.geometry Object The geometry of the overlay (similar to the GeoJSON specification).
'id'.geometry.type String 'Icon' The type of the overlay. Here a 'Icon' (that is not a GeoJSON object).
'id'.geometry.shape Object Undefined The 'Icon' overlay is a SVG object described thanks to a SVG path.
'id'.geometry.shape.width Number Undefined The width of the icon.
'id'.geometry.shape.height Number Undefined The height of the icon.
'id'.geometry.shape.path String Undefined The SVG path of the icon.
'id'.geometry.coordinates Array [ ] The coordinates [φ, λ] must be an array of LinearRing coordinate arrays.