svg-map-extra
Version:
svg-map-extra is an extended JavaScript library that lets you easily create an interactable world map comparing customizable data for each country inspired by the original svgMap.
1 lines • 7.62 kB
Source Map (JSON)
{"version":3,"sources":["webpack://SVGMap/./src/scss/map.scss","webpack://SVGMap/./src/scss/variables.scss","webpack://SVGMap/./src/scss/tooltip.scss"],"names":[],"mappings":"AAAA,iBACC,iBAAkB,CAClB,UAAW,CACX,eAAgB,CAChB,eAAgB,CAChB,kBCDmB,CDEnB,UCLe,CDDhB,mBAQE,qBAAsB,CARxB,4CAWE,SAAU,CAXZ,gCAcE,aAAc,CACd,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,UAAW,CACX,WAAY,CACZ,QAAS,CApBX,2CAwBE,iBAAkB,CAClB,WAAY,CACZ,SAAU,CACV,SAAU,CACV,YAAa,CACb,eAAgB,CAChB,iBAAkB,CAClB,oCAAwC,CA/B1C,gFAmCE,YAAa,CACb,gBAAiB,CACjB,eAAgB,CAChB,eAAgB,CAtClB,sGAwCG,cAAe,CAxClB,yCA4CE,4BAA6B,CAC7B,WAAY,CACZ,eAAgB,CAChB,aAAc,CACd,YAAa,CACb,mBAAoB,CACpB,QAAS,CACT,SAAU,CACV,gBAAiB,CACjB,mBAAoB,CACpB,uBAAwB,CACxB,oBAAqB,CACrB,eAAgB,CAChB,cAAe,CACf,UAAW,CACX,WAAY,CACZ,iBAAkB,CA5DpB,uIAgEI,UAAW,CACX,iBAAkB,CAClB,OAAQ,CACR,QAAS,CACT,+BAAgC,CAChC,eAAgB,CAChB,gCAAiC,CAtErC,oEAyEI,UAAW,CACX,UAAW,CA1Ef,mJA+EK,eC9EW,CDDhB,yKAqFK,eAAgB,CArFrB,gEA0FG,oBAAqB,CA1FxB,sEA4FI,SAAU,CACV,WAAY,CA7FhB,iEAiGG,oBAAqB,CAjGxB,kCAsGE,cAAe,CACf,WAAY,CACZ,cAAe,CACf,qBAAsB,CACtB,gCAAiC,CACjC,iCAAkC,CA3GpC,yFA8GG,WCzGwB,CDL3B,iDAiHG,gBC3GuB,CD4GvB,iBEjHF,kCAAsC,CACtC,iBAAkB,CAClB,SAAU,CACV,iBAAkB,CAClB,eAAgB,CAChB,gCAAiC,CACjC,4BAA6B,CAC7B,YAAa,CACb,mBAAoB,CACpB,cAAe,CAVhB,yCAYE,4BAA6B,CAC7B,eAAgB,CAChB,yBAA0B,CAd5B,gCAiBE,aAAc,CAjBhB,oDAoBE,iBAAkB,CAClB,iBAAkB,CArBpB,oFAuBG,iBAAkB,CAClB,gBAAiB,CAxBpB,yHA0BI,cAAe,CACf,aAAc,CACd,mBAAoB,CA5BxB,0GA+BI,aAAc,CACd,WAAY,CACZ,UAAW,CACX,WAAY,CACZ,WAAY,CACZ,iBAAkB,CApCtB,wCAyCE,kBAAmB,CACnB,cAAe,CACf,gBAAiB,CACjB,eAAgB,CAChB,iBAAkB,CA7CpB,0CAgDE,kBAAmB,CACnB,cAAe,CACf,UDhDmB,CCiDnB,eAAgB,CAnDlB,8EAqDG,SAAU,CACV,kBAAmB,CACnB,WAAY,CAvDf,iFAyDI,aAAc,CACd,eAAgB,CA1DpB,sFA4DK,UD3DW,CCDhB,6FA+DK,kBAAmB,CACnB,gBAAiB,CAhEtB,qFAmEK,uBAAwB,CACxB,iBAAkB,CAClB,QAAS,CArEd,mEA0EG,aAAc,CACd,UDzEkB,CC0ElB,iBAAkB,CAClB,iBAAkB,CA7ErB,0CAiFE,iBAAkB,CAClB,QAAS,CACT,QAAS,CACT,0BAA2B,CAC3B,eAAgB,CAChB,WAAY,CACZ,UAAW,CAvFb,gDAyFG,UAAW,CACX,UAAW,CACX,WAAY,CACZ,eAAgB,CAChB,qBAAsB,CACtB,iBAAkB,CAClB,UAAW,CACX,QAAS,CACT,wCAAyC,CAjG5C,kEAsGG,WAAY,CACZ,SAAU,CACV,qCAAsC","file":"svg-map.css","sourcesContent":[".svg-map-wrapper {\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\tpadding-top: 50%;\r\n\toverflow: hidden;\r\n\tbackground: $oceanColor;\r\n\tcolor: $textColor;\r\n\t* {\r\n\t\tbox-sizing: border-box;\r\n\t}\r\n\t :focus:not(:focus-visible) {\r\n\t\toutline: 0;\r\n\t}\r\n\t.svg-map-image {\r\n\t\tdisplay: block;\r\n\t\tposition: absolute;\r\n\t\ttop: 0;\r\n\t\tleft: 0;\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t\tmargin: 0;\r\n\t}\r\n\t// Controls\r\n\t.svg-map-controls-wrapper {\r\n\t\tposition: absolute;\r\n\t\tbottom: 10px;\r\n\t\tleft: 10px;\r\n\t\tz-index: 1;\r\n\t\tdisplay: flex;\r\n\t\toverflow: hidden;\r\n\t\tborder-radius: 2px;\r\n\t\tbox-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);\r\n\t}\r\n\t.svg-map-controls-zoom,\r\n\t.svg-map-controls-move {\r\n\t\tdisplay: flex;\r\n\t\tmargin-right: 5px;\r\n\t\toverflow: hidden;\r\n\t\tbackground: #fff;\r\n\t\t&:last-child {\r\n\t\t\tmargin-right: 0;\r\n\t\t}\r\n\t}\r\n\t.svg-map-control-button {\r\n\t\tbackground-color: transparent;\r\n\t\tborder: none;\r\n\t\tborder-radius: 0;\r\n\t\tcolor: inherit;\r\n\t\tfont: inherit;\r\n\t\tline-height: inherit;\r\n\t\tmargin: 0;\r\n\t\tpadding: 0;\r\n\t\toverflow: visible;\r\n\t\ttext-transform: none;\r\n\t\t-webkit-appearance: none;\r\n\t\t-moz-appearance: none;\r\n\t\tappearance: none;\r\n\t\tcursor: pointer;\r\n\t\twidth: 30px;\r\n\t\theight: 30px;\r\n\t\tposition: relative;\r\n\t\t&.svg-map-zoom-button {\r\n\t\t\t&:before,\r\n\t\t\t&:after {\r\n\t\t\t\tcontent: '';\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\ttop: 50%;\r\n\t\t\t\tleft: 50%;\r\n\t\t\t\ttransform: translate(-50%, -50%);\r\n\t\t\t\tbackground: #666;\r\n\t\t\t\ttransition: background-color 0.2s;\r\n\t\t\t}\r\n\t\t\t&:before {\r\n\t\t\t\twidth: 11px;\r\n\t\t\t\theight: 3px;\r\n\t\t\t}\r\n\t\t\t&:hover {\r\n\t\t\t\t&:before,\r\n\t\t\t\t&:after {\r\n\t\t\t\t\tbackground: $textColor;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t&.svg-map-disabled {\r\n\t\t\t\t&:before,\r\n\t\t\t\t&:after {\r\n\t\t\t\t\tbackground: #ccc;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\t&.svg-map-zoom-in-button {\r\n\t\t\tmargin: 1px 0 1px 1px;\r\n\t\t\t&:after {\r\n\t\t\t\twidth: 3px;\r\n\t\t\t\theight: 11px;\r\n\t\t\t}\r\n\t\t}\r\n\t\t&.svg-map-zoom-out-button {\r\n\t\t\tmargin: 1px 1px 1px 0;\r\n\t\t}\r\n\t}\r\n\t// Countries\r\n\t.svg-map-country {\r\n\t\tcursor: pointer;\r\n\t\tstroke: #fff;\r\n\t\tstroke-width: 1;\r\n\t\tstroke-linejoin: round;\r\n\t\tvector-effect: non-scaling-stroke;\r\n\t\ttransition: fill 0.2s, stroke 0.2s;\r\n\t\t&:hover,\r\n\t\t&.svg-map-active {\r\n\t\t\tstroke: $mapActiveStrokeColor;\r\n\t\t}\r\n\t\t&.svg-map-active {\r\n\t\t\tstroke-width: $mapActiveStrokeWidth;\r\n\t\t}\r\n\t}\r\n}","// General\r\n$textColor: #111;\r\n$textColorLight: #777;\r\n// Map\r\n$oceanColor: #d9ecff;\r\n$mapActiveStrokeColor: #333;\r\n$mapActiveStrokeWidth: 1.5;",".svg-map-tooltip {\r\n\tbox-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\r\n\tposition: absolute;\r\n\tz-index: 2;\r\n\tborder-radius: 2px;\r\n\tbackground: #fff;\r\n\ttransform: translate(-50%, -100%);\r\n\tborder-bottom: 1px solid #000;\r\n\tdisplay: none;\r\n\tpointer-events: none;\r\n\tmin-width: 60px;\r\n\t&.svg-map-tooltip-flipped {\r\n\t\ttransform: translate(-50%, 0);\r\n\t\tborder-bottom: 0;\r\n\t\tborder-top: 1px solid #000;\r\n\t}\r\n\t&.svg-map-active {\r\n\t\tdisplay: block;\r\n\t}\r\n\t.svg-map-tooltip-content-container {\r\n\t\tposition: relative;\r\n\t\tpadding: 10px 20px;\r\n\t\t.svg-map-tooltip-flag-container {\r\n\t\t\ttext-align: center;\r\n\t\t\tmargin: 2px 0 5px;\r\n\t\t\t&.svg-map-tooltip-flag-container-emoji {\r\n\t\t\t\tfont-size: 50px;\r\n\t\t\t\tline-height: 0;\r\n\t\t\t\tpadding: 25px 0 15px;\r\n\t\t\t}\r\n\t\t\t.svg-map-tooltip-flag {\r\n\t\t\t\tdisplay: block;\r\n\t\t\t\tmargin: auto;\r\n\t\t\t\twidth: auto;\r\n\t\t\t\theight: 32px;\r\n\t\t\t\tpadding: 2px;\r\n\t\t\t\tborder-radius: 2px;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t.svg-map-tooltip-title {\r\n\t\twhite-space: nowrap;\r\n\t\tfont-size: 18px;\r\n\t\tline-height: 28px;\r\n\t\tpadding: 0 0 8px;\r\n\t\ttext-align: center;\r\n\t}\r\n\t.svg-map-tooltip-content {\r\n\t\twhite-space: nowrap;\r\n\t\tfont-size: 14px;\r\n\t\tcolor: $textColorLight;\r\n\t\tmargin: -5px 0 0;\r\n\t\ttable.svg-map-tooltip-content-table {\r\n\t\t\tpadding: 0;\r\n\t\t\tborder-spacing: 0px;\r\n\t\t\tmargin: auto;\r\n\t\t\ttd {\r\n\t\t\t\tpadding: 2px 0;\r\n\t\t\t\ttext-align: left;\r\n\t\t\t\tspan {\r\n\t\t\t\t\tcolor: $textColor;\r\n\t\t\t\t}\r\n\t\t\t\t&:first-child {\r\n\t\t\t\t\tpadding-right: 10px;\r\n\t\t\t\t\ttext-align: right;\r\n\t\t\t\t}\r\n\t\t\t\tsup {\r\n\t\t\t\t\tvertical-align: baseline;\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t\ttop: -5px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\t.svg-map-tooltip-no-data {\r\n\t\t\tpadding: 2px 0;\r\n\t\t\tcolor: $textColorLight;\r\n\t\t\tfont-style: italic;\r\n\t\t\ttext-align: center;\r\n\t\t}\r\n\t}\r\n\t.svg-map-tooltip-pointer {\r\n\t\tposition: absolute;\r\n\t\ttop: 100%;\r\n\t\tleft: 50%;\r\n\t\ttransform: translateX(-50%);\r\n\t\toverflow: hidden;\r\n\t\theight: 10px;\r\n\t\twidth: 30px;\r\n\t\t&:after {\r\n\t\t\tcontent: '';\r\n\t\t\twidth: 20px;\r\n\t\t\theight: 20px;\r\n\t\t\tbackground: #fff;\r\n\t\t\tborder: 1px solid #000;\r\n\t\t\tposition: absolute;\r\n\t\t\tbottom: 6px;\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translateX(-50%) rotate(45deg);\r\n\t\t}\r\n\t}\r\n\t&.svg-map-tooltip-flipped {\r\n\t\t.svg-map-tooltip-pointer {\r\n\t\t\tbottom: auto;\r\n\t\t\ttop: -10px;\r\n\t\t\ttransform: translateX(-50%) scaleY(-1);\r\n\t\t}\r\n\t}\r\n}"],"sourceRoot":""}