Create a Custom Map Content Source
Create a custom map content source and add it to an interactive map. The following example will setup a vector content source that loads airport observations and renders their latest flight rules as point markers on an interactive map.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Xweather JavaScript SDK - Custom Interactive Map Data Source</title>
<script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
<link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">
<style>
#map {
height: 400px;
margin: 30px auto;
width: 800px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const colors = {
flightrule: {
VFR: '#1bbe08',
MVFR: '#1c56cf',
IFR: '#fa0708',
LIFR: '#fb06ff'
}
};
function flightRuleColor(code) {
code = code.toUpperCase();
return colors.flightrule || '#999999';
}
window.onload = () => {
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
const utils = aeris.utils;
aeris.views().then(views => {
const map = new views.InteractiveMap(document.getElementById('map'), {
center: {
lat: 39.0,
lon: -95.5
},
zoom: 4
});
// add vector source showing airport flight rules as markers
const ids = 'id:AYPY;id:BIKF;id:BKPR;id:CYEG;id:CYHZ;id:CYOW;id:CYQB;id:CYUL;id:CYVR;id:CYWG;id:CYXU;id:CYYC;id:CYYJ;id:CYYT;id:CYYZ;id:DAAG;id:DGAA;id:DNAA;id:DNMM;id:DTTA;id:EBBR;id:EBLG;id:EDDB;id:EDDC;id:EDDF;id:EDDG;id:EDDH;id:EDDK;id:EDDL;id:EDDM;id:EDDN;id:EDDP;id:EDDS;id:EDDT;id:EDDV;id:EDDW;id:EDLW;id:EDSB;id:EETN;id:EFHK;id:EGAA;id:EGAC;id:EGBB;id:EGCC;id:EGCN;id:EGFF;id:EGGD;id:EGGP;id:EGGW;id:EGHH;id:EGHI;id:EGKK;id:EGLC;id:EGLL;id:EGNM;id:EGNT;id:EGNX;id:EGPD;id:EGPF;id:EGPH;id:EGSH;id:EGSS;id:EGTE;id:EGUL;id:EGUN;id:EGVA;id:EGVN;id:EHAM;id:EHBK;id:EHEH;id:EICK;id:EIDW;id:EINN;id:EKBI;id:EKCH;id:EKYT;id:ELLX;id:ENBO;id:ENBR;id:ENGM;id:ENTC;id:ENVA;id:ENZV;id:EPGD;id:EPKK;id:EPKT;id:EPMO;id:EPPO;id:EPWA;id:EPWR;id:ESGG;id:ESMS;id:ESPA;id:ESSA;id:ETAR;id:EVRA;id:EYVI;id:FACT;id:FAGG;id:FAJS;id:FALE;id:GCLP;id:GCTS;id:GCXO;id:GMMN;id:GOOY;id:HAAB;id:HECA;id:HEGN;id:HKJK;id:HKMO;id:HLLT;id:HSSS;id:KABQ;id:KADW;id:KAFW;id:KAGS;id:KAMA;id:KATL;id:KAUS;id:KAVL;id:KBAB;id:KBAD;id:KBDL;id:KBFI;id:KBGR;id:KBHM;id:KBIL;id:KBLV;id:KBMI;id:KBNA;id:KBOI;id:KBOS;id:KBTR;id:KBUF;id:KBWI;id:KCAE;id:KCBM;id:KCHA;id:KCHS;id:KCID;id:KCLE;id:KCLT;id:KCMH;id:KCOF;id:KCOS;id:KCPR;id:KCRP;id:KCRW;id:KCVG;id:KCVS;id:KDAL;id:KDAY;id:KDBQ;id:KDCA;id:KDEN;id:KDFW;id:KDLF;id:KDLH;id:KDOV;id:KDSM;id:KDTW;id:KDYS;id:KEDW;id:KEND;id:KERI;id:KEWR;id:KFFO;id:KFLL;id:KFSM;id:KFTW;id:KFWA;id:KGEG;id:KGPT;id:KGRB;id:KGSB;id:KGSO;id:KGSP;id:KGUS;id:KHIB;id:KHMN;id:KHOU;id:KHSV;id:KHTS;id:KIAD;id:KIAH;id:KICT;id:KIND;id:KJAN;id:KJAX;id:KJFK;id:KJLN;id:KLAS;id:KLAX;id:KLBB;id:KLCK;id:KLEX;id:KLFI;id:KLFT;id:KLGA;id:KLIT;id:KLTS;id:KLUF;id:KMBS;id:KMCF;id:KMCI;id:KMCO;id:KMDW;id:KMEM;id:KMGE;id:KMGM;id:KMHT;id:KMIA;id:KMKE;id:KMLI;id:KMLU;id:KMOB;id:KMSN;id:KMSP;id:KMSY;id:KMUO;id:KMYR;id:KOAK;id:KOKC;id:KONT;id:KORD;id:KORF;id:KPAM;id:KPBI;id:KPDX;id:KPHF;id:KPHL;id:KPHX;id:KPIA;id:KPIT;id:KPWM;id:KRDU;id:KRFD;id:KRIC;id:KRND;id:KRNO;id:KROA;id:KROC;id:KRST;id:KRSW;id:KSAN;id:KSAT;id:KSAV;id:KSBN;id:KSDF;id:KSEA;id:KSFB;id:KSFO;id:KSGF;id:KSHV;id:KSJC;id:KSKA;id:KSLC;id:KSMF;id:KSNA;id:KSPI;id:KSPS;id:KSRQ;id:KSSC;id:KSTL;id:KSUS;id:KSUU;id:KSUX;id:KSYR;id:KSZL;id:KTCM;id:KTIK;id:KTLH;id:KTOL;id:KTPA;id:KTRI;id:KTUL;id:KTUS;id:KTYS;id:KVBG;id:KVPS;id:KWRB;id:LATI;id:LBBG;id:LBPD;id:LBSF;id:LBWN;id:LCLK;id:LCPH;id:LDZA;id:LEAL;id:LEBL;id:LEMD;id:LEMG;id:LEPA;id:LEST;id:LFBD;id:LFBO;id:LFBV;id:LFML;id:LFMN;id:LFOA;id:LFOT;id:LFPG;id:LFPO;id:LGAV;id:LGIR;id:LGTS;id:LHBP;id:LIBD;id:LICC;id:LICJ;id:LIEE;id:LIMC;id:LIME;id:LIMF;id:LIMJ;id:LIML;id:LIMZ;id:LIPE;id:LIPH;id:LIPX;id:LIPZ;id:LIRA;id:LIRF;id:LIRN;id:LIRP;id:LJLJ;id:LKPR;id:LLBG;id:LLOV;id:LMML;id:LOWW;id:LPFR;id:LPLA;id:LPPD;id:LPPR;id:LPPT;id:LQSA;id:LROP;id:LSGG;id:LSZH;id:LTAC;id:LTAF;id:LTAI;id:LTAJ;id:LTAZ;id:LTBA;id:LTBJ;id:LTBS;id:LTCE;id:LTCG;id:LTFC;id:LTFE;id:LTFJ;id:LXGB;id:LYBE;id:LYPG;id:LZIB;id:MDPC;id:MDSD;id:MKJP;id:MMAA;id:MMGL;id:MMHO;id:MMMX;id:MMMY;id:MMPR;id:MMSD;id:MMTJ;id:MMUN;id:MPTO;id:MUHA;id:MUVR;id:MWCR;id:MYNN;id:MZBZ;id:NCRG;id:NZAA;id:NZCH;id:NZWN;id:OBBI;id:OEDF;id:OEDR;id:OEJN;id:OEMA;id:OERK;id:OIIE;id:OIII;id:OIMM;id:OISS;id:OITT;id:OJAI;id:OKBK;id:OLBA;id:OMAA;id:OMDB;id:OMDW;id:OMSJ;id:OOMS;id:OPRN;id:OPST;id:ORBI;id:ORMM;id:OSAP;id:OSDI;id:OSLK;id:OTBD;id:PAFA;id:PANC;id:PGUM;id:PHNL;id:PR20;id:RCBS;id:RCKH;id:RCTP;id:RJAA;id:RJBB;id:RJCC;id:RJFF;id:RJFK;id:RJGG;id:RJNS;id:RJOO;id:RJTT;id:RJTY;id:RKJB;id:RKJK;id:RKPC;id:RKPK;id:RKSI;id:RKSO;id:RKSS;id:RKTU;id:ROAH;id:RODN;id:RPLC;id:RPLL;id:RPMD;id:RPVM;id:SAEZ;id:SBBE;id:SBBR;id:SBCF;id:SBCT;id:SBFL;id:SBGL;id:SBGR;id:SBSP;id:SBSV;id:SCEL;id:SELT;id:SEQM;id:SKBO;id:SPIM;id:SPZO;id:SUMU;id:TJSJ;id:TMJG;id:TNCM;id:UAAA;id:UACC;id:UAFM;id:UAKK;id:UBBB;id:UDYZ;id:UGTB;id:UKBB;id:UKCC;id:UKFF;id:UKHH;id:UKOO;id:ULLI;id:UMMS;id:UNKL;id:URSS;id:USSS;id:UTTT;id:UUBW;id:UUDD;id:UUEE;id:UUMU;id:UWUU;id:UWWW;id:VABB;id:VAGO;id:VCBI;id:VDPP;id:VDSR;id:VECC;id:VHHH;id:VIAR;id:VIDP;id:VISM;id:VMMC;id:VOBL;id:VOCI;id:VOCL;id:VOHS;id:VOMM;id:VOPN;id:VOTV;id:VRMM;id:VTBD;id:VTBS;id:VTCC;id:VVDN;id:VVNB;id:VVTS;id:VYMD;id:VYYY;id:WAAA;id:WADD;id:WARR;id:WBSB;id:WIII;id:WMKK;id:WSSS;id:YBBN;id:YMML;id:YPPH;id:YSCB;id:YSSY;id:ZBAA;id:ZBNY;id:ZBTJ;id:ZBYN;id:ZGGG;id:ZGHA;id:ZGKL;id:ZGNN;id:ZGSZ;id:ZHCC;id:ZHHH;id:ZJHK;id:ZJSY;id:ZLXY;id:ZPPP;id:ZSAM;id:ZSFZ;id:ZSHC;id:ZSJN;id:ZSNB;id:ZSNJ;id:ZSPD;id:ZSSS;id:ZSWZ;id:ZUCK;id:ZUGY;id:ZUUU;id:ZWWW;id:ZYHB;id:ZYTL;id:ZYTX';
const airportsRequest = aeris.api()
.endpoint('observations')
.action('search')
.query(ids)
.fields('id,loc,ob,place')
.from('-2hours')
.limit(1000);
const airports = new views.datasources.Vector('airports', {
refresh: 60,
data: {
service: airportsRequest
},
style: {
marker: (data) => {
return {
svg: {
shape: {
type: 'circle',
fill: {
color: flightRuleColor(utils.get(data, 'ob.flightRule'))
},
stroke: {
color: '#ffffff',
width: 2
}
}
},
size: [16, 16]
};
}
}
});
map.on('ready', () => {
map.addSource(airports);
});
});
};
</script>
</body>
</html>