@josephinumresearch/swagger-ui-map-plugin 1.0.1

package/.browserslistrc

@@ -0,0 +1,3 @@
+last 5 version
+> 1%
+not dead # no browsers without security updates

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright (c) 2024, Josephinum Research
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# SwaggerUI Map Plugin
+SwaggerUI plugin to show GeoJson responses on a map
+
+<img src="./example.png" alt="example" width="300">
+
+
+## Usage
+
+1. Add `Openlayers` and this plugin to your swaggerui index file
+```html
+<script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js" crossorigin></script>
+<script src="https://cdn.jsdelivr.net/npm/swagger-ui-map-plugin/dist/swagger-ui-map-plugin.js" crossorigin></script>
+```
+2. Register `SwaggerUiMapPlugin()`
+```javascript
+SwaggerUIBundle({
+    ...
+    plugins: [
+        SwaggerUiMapPlugin()
+    ],
+    ...
+});
+```
+3. Execute a request whose response is an `application/geo+json`
+
+
+## Dev
+
+Run `npm install` and then `npm run dev`.
+
+For deployment, build the `dist/swagger-ui-map-plugin.js` with `npm run build`

package/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ],
+};

package/dist/425.swagger-ui-map-plugin.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunkswagger_ui_map_plugin=this.webpackChunkswagger_ui_map_plugin||[]).push([[425],{425:function(e,t,r){r.r(t);var o=r(734),i=r(339),s=r.n(i),a=r(976),l=r(528);t.default=(e,t,r)=>{const i=(new o.GeoJSON).readFeatures(JSON.parse(t));i.forEach((function(e){e.getGeometry().transform(r.sourceProjection||"EPSG:4326","EPSG:3857")}));const n=new(s())({features:i}),u=new a.VectorImage({source:n,style:e=>new l.Style({stroke:new l.Stroke({color:e.getProperties().stroke||r.defaultStrokeColor,width:e.getProperties().strokeWidth||r.defaultStrokeWidth}),fill:new l.Fill({color:e.getProperties().fill||r.defaultFillColor})})});e.addLayer(u),e.getView().fit(n.getExtent())}}}]);

package/dist/swagger-ui-map-plugin.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["swagger-ui-map-plugin"]=e():t["swagger-ui-map-plugin"]=e()}(this,(function(){return function(){var t,e,r={182:function(t,e,r){t=r.nmd(t);var n="__lodash_hash_undefined__",o=9007199254740991,i="[object Arguments]",u="[object Function]",c="[object Object]",a=/^\[object .+?Constructor\]$/,f=/^(?:0|[1-9]\d*)$/,s={};s["[object Float32Array]"]=s["[object Float64Array]"]=s["[object Int8Array]"]=s["[object Int16Array]"]=s["[object Int32Array]"]=s["[object Uint8Array]"]=s["[object Uint8ClampedArray]"]=s["[object Uint16Array]"]=s["[object Uint32Array]"]=!0,s[i]=s["[object Array]"]=s["[object ArrayBuffer]"]=s["[object Boolean]"]=s["[object DataView]"]=s["[object Date]"]=s["[object Error]"]=s[u]=s["[object Map]"]=s["[object Number]"]=s[c]=s["[object RegExp]"]=s["[object Set]"]=s["[object String]"]=s["[object WeakMap]"]=!1;var l,p,d,h="object"==typeof r.g&&r.g&&r.g.Object===Object&&r.g,v="object"==typeof self&&self&&self.Object===Object&&self,y=h||v||Function("return this")(),_=e&&!e.nodeType&&e,g=_&&t&&!t.nodeType&&t,b=g&&g.exports===_,m=b&&h.process,j=function(){try{return g&&g.require&&g.require("util").types||m&&m.binding&&m.binding("util")}catch(t){}}(),w=j&&j.isTypedArray,O=Array.prototype,A=Function.prototype,S=Object.prototype,x=y["__core-js_shared__"],E=A.toString,k=S.hasOwnProperty,z=(l=/[^.]+$/.exec(x&&x.keys&&x.keys.IE_PROTO||""))?"Symbol(src)_1."+l:"",P=S.toString,T=E.call(Object),C=RegExp("^"+E.call(k).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),F=b?y.Buffer:void 0,M=y.Symbol,U=y.Uint8Array,$=(F&&F.allocUnsafe,p=Object.getPrototypeOf,d=Object,function(t){return p(d(t))}),N=Object.create,B=S.propertyIsEnumerable,I=O.splice,R=M?M.toStringTag:void 0,D=function(){try{var t=ct(Object,"defineProperty");return t({},"",{}),t}catch(t){}}(),G=F?F.isBuffer:void 0,L=Math.max,q=Date.now,J=ct(y,"Map"),V=ct(Object,"create"),H=function(){function t(){}return function(e){if(!bt(e))return{};if(N)return N(e);t.prototype=e;var r=new t;return t.prototype=void 0,r}}();function W(t){var e=-1,r=null==t?0:t.length;for(this.clear();++e<r;){var n=t[e];this.set(n[0],n[1])}}function K(t){var e=-1,r=null==t?0:t.length;for(this.clear();++e<r;){var n=t[e];this.set(n[0],n[1])}}function Q(t){var e=-1,r=null==t?0:t.length;for(this.clear();++e<r;){var n=t[e];this.set(n[0],n[1])}}function X(t){var e=this.__data__=new K(t);this.size=e.size}function Y(t,e,r){(void 0!==r&&!pt(t[e],r)||void 0===r&&!(e in t))&&et(t,e,r)}function Z(t,e,r){var n=t[e];k.call(t,e)&&pt(n,r)&&(void 0!==r||e in t)||et(t,e,r)}function tt(t,e){for(var r=t.length;r--;)if(pt(t[r][0],e))return r;return-1}function et(t,e,r){"__proto__"==e&&D?D(t,e,{configurable:!0,enumerable:!0,value:r,writable:!0}):t[e]=r}W.prototype.clear=function(){this.__data__=V?V(null):{},this.size=0},W.prototype.delete=function(t){var e=this.has(t)&&delete this.__data__[t];return this.size-=e?1:0,e},W.prototype.get=function(t){var e=this.__data__;if(V){var r=e[t];return r===n?void 0:r}return k.call(e,t)?e[t]:void 0},W.prototype.has=function(t){var e=this.__data__;return V?void 0!==e[t]:k.call(e,t)},W.prototype.set=function(t,e){var r=this.__data__;return this.size+=this.has(t)?0:1,r[t]=V&&void 0===e?n:e,this},K.prototype.clear=function(){this.__data__=[],this.size=0},K.prototype.delete=function(t){var e=this.__data__,r=tt(e,t);return!(r<0||(r==e.length-1?e.pop():I.call(e,r,1),--this.size,0))},K.prototype.get=function(t){var e=this.__data__,r=tt(e,t);return r<0?void 0:e[r][1]},K.prototype.has=function(t){return tt(this.__data__,t)>-1},K.prototype.set=function(t,e){var r=this.__data__,n=tt(r,t);return n<0?(++this.size,r.push([t,e])):r[n][1]=e,this},Q.prototype.clear=function(){this.size=0,this.__data__={hash:new W,map:new(J||K),string:new W}},Q.prototype.delete=function(t){var e=ut(this,t).delete(t);return this.size-=e?1:0,e},Q.prototype.get=function(t){return ut(this,t).get(t)},Q.prototype.has=function(t){return ut(this,t).has(t)},Q.prototype.set=function(t,e){var r=ut(this,t),n=r.size;return r.set(t,e),this.size+=r.size==n?0:1,this},X.prototype.clear=function(){this.__data__=new K,this.size=0},X.prototype.delete=function(t){var e=this.__data__,r=e.delete(t);return this.size=e.size,r},X.prototype.get=function(t){return this.__data__.get(t)},X.prototype.has=function(t){return this.__data__.has(t)},X.prototype.set=function(t,e){var r=this.__data__;if(r instanceof K){var n=r.__data__;if(!J||n.length<199)return n.push([t,e]),this.size=++r.size,this;r=this.__data__=new Q(n)}return r.set(t,e),this.size=r.size,this};function rt(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":R&&R in Object(t)?function(t){var e=k.call(t,R),r=t[R];try{t[R]=void 0;var n=!0}catch(t){}var o=P.call(t);return n&&(e?t[R]=r:delete t[R]),o}(t):function(t){return P.call(t)}(t)}function nt(t){return mt(t)&&rt(t)==i}function ot(t,e,r,n,o){t!==e&&function(t,e,r){for(var n=-1,o=Object(t),i=r(t),u=i.length;u--;){var c=i[++n];if(!1===e(o[c],c,o))break}}(e,(function(i,u){if(o||(o=new X),bt(i))!function(t,e,r,n,o,i,u){var a=st(t,r),f=st(e,r),s=u.get(f);if(s)Y(t,r,s);else{var l,p,d,h,v,y=i?i(a,f,r+"",t,e,u):void 0,_=void 0===y;if(_){var g=ht(f),b=!g&&yt(f),m=!g&&!b&&jt(f);y=f,g||b||m?ht(a)?y=a:mt(v=a)&&vt(v)?y=function(t,e){var r=-1,n=t.length;for(e||(e=Array(n));++r<n;)e[r]=t[r];return e}(a):b?(_=!1,y=function(t){return t.slice()}(f)):m?(_=!1,h=new(d=(l=f).buffer).constructor(d.byteLength),new U(h).set(new U(d)),p=h,y=new l.constructor(p,l.byteOffset,l.length)):y=[]:function(t){if(!mt(t)||rt(t)!=c)return!1;var e=$(t);if(null===e)return!0;var r=k.call(e,"constructor")&&e.constructor;return"function"==typeof r&&r instanceof r&&E.call(r)==T}(f)||dt(f)?(y=a,dt(a)?y=function(t){return function(t,e,r){var n=!r;r||(r={});for(var o=-1,i=e.length;++o<i;){var u=e[o],c=void 0;void 0===c&&(c=t[u]),n?et(r,u,c):Z(r,u,c)}return r}(t,wt(t))}(a):bt(a)&&!_t(a)||(y=function(t){return"function"!=typeof t.constructor||ft(t)?{}:H($(t))}(f))):_=!1}_&&(u.set(f,y),o(y,f,n,i,u),u.delete(f)),Y(t,r,y)}}(t,e,u,r,ot,n,o);else{var a=n?n(st(t,u),i,u+"",t,e,o):void 0;void 0===a&&(a=i),Y(t,u,a)}}),wt)}var it=D?function(t,e){return D(t,"toString",{configurable:!0,enumerable:!1,value:(r=e,function(){return r}),writable:!0});var r}:St;function ut(t,e){var r,n,o=t.__data__;return("string"==(n=typeof(r=e))||"number"==n||"symbol"==n||"boolean"==n?"__proto__"!==r:null===r)?o["string"==typeof e?"string":"hash"]:o.map}function ct(t,e){var r=function(t,e){return null==t?void 0:t[e]}(t,e);return function(t){return!(!bt(t)||function(t){return!!z&&z in t}(t))&&(_t(t)?C:a).test(function(t){if(null!=t){try{return E.call(t)}catch(t){}try{return t+""}catch(t){}}return""}(t))}(r)?r:void 0}function at(t,e){var r=typeof t;return!!(e=null==e?o:e)&&("number"==r||"symbol"!=r&&f.test(t))&&t>-1&&t%1==0&&t<e}function ft(t){var e=t&&t.constructor;return t===("function"==typeof e&&e.prototype||S)}function st(t,e){if(("constructor"!==e||"function"!=typeof t[e])&&"__proto__"!=e)return t[e]}var lt=function(t){var e=0,r=0;return function(){var n=q(),o=16-(n-r);if(r=n,o>0){if(++e>=800)return arguments[0]}else e=0;return t.apply(void 0,arguments)}}(it);function pt(t,e){return t===e||t!=t&&e!=e}var dt=nt(function(){return arguments}())?nt:function(t){return mt(t)&&k.call(t,"callee")&&!B.call(t,"callee")},ht=Array.isArray;function vt(t){return null!=t&&gt(t.length)&&!_t(t)}var yt=G||function(){return!1};function _t(t){if(!bt(t))return!1;var e=rt(t);return e==u||"[object GeneratorFunction]"==e||"[object AsyncFunction]"==e||"[object Proxy]"==e}function gt(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=o}function bt(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}function mt(t){return null!=t&&"object"==typeof t}var jt=w?function(t){return function(e){return t(e)}}(w):function(t){return mt(t)&&gt(t.length)&&!!s[rt(t)]};function wt(t){return vt(t)?function(t,e){var r=ht(t),n=!r&&dt(t),o=!r&&!n&&yt(t),i=!r&&!n&&!o&&jt(t),u=r||n||o||i,c=u?function(t,e){for(var r=-1,n=Array(t);++r<t;)n[r]=e(r);return n}(t.length,String):[],a=c.length;for(var f in t)!e&&!k.call(t,f)||u&&("length"==f||o&&("offset"==f||"parent"==f)||i&&("buffer"==f||"byteLength"==f||"byteOffset"==f)||at(f,a))||c.push(f);return c}(t,!0):function(t){if(!bt(t))return function(t){var e=[];if(null!=t)for(var r in Object(t))e.push(r);return e}(t);var e=ft(t),r=[];for(var n in t)("constructor"!=n||!e&&k.call(t,n))&&r.push(n);return r}(t)}var Ot,At=(Ot=function(t,e,r){ot(t,e,r)},function(t,e){return lt(function(t,e,r){return e=L(void 0===e?t.length-1:e,0),function(){for(var n=arguments,o=-1,i=L(n.length-e,0),u=Array(i);++o<i;)u[o]=n[e+o];o=-1;for(var c=Array(e+1);++o<e;)c[o]=n[o];return c[e]=r(u),function(t,e,r){switch(r.length){case 0:return t.call(e);case 1:return t.call(e,r[0]);case 2:return t.call(e,r[0],r[1]);case 3:return t.call(e,r[0],r[1],r[2])}return t.apply(e,r)}(t,this,c)}}(t,e,St),t+"")}((function(t,e){var r=-1,n=e.length,o=n>1?e[n-1]:void 0,i=n>2?e[2]:void 0;for(o=Ot.length>3&&"function"==typeof o?(n--,o):void 0,i&&function(t,e,r){if(!bt(r))return!1;var n=typeof e;return!!("number"==n?vt(r)&&at(e,r.length):"string"==n&&e in r)&&pt(r[e],t)}(e[0],e[1],i)&&(o=n<3?void 0:o,n=1),t=Object(t);++r<n;){var u=e[r];u&&Ot(t,u,r)}return t})));function St(t){return t}t.exports=At},489:function(t,e,r){var n={"./GeoJson":[425,425],"./GeoJson.js":[425,425]};function o(t){if(!r.o(n,t))return Promise.resolve().then((function(){var e=new Error("Cannot find module '"+t+"'");throw e.code="MODULE_NOT_FOUND",e}));var e=n[t],o=e[0];return r.e(e[1]).then((function(){return r(o)}))}o.keys=function(){return Object.keys(n)},o.id=489,t.exports=o},734:function(t){"use strict";t.exports=window.ol.format},976:function(t){"use strict";t.exports=window.ol.layer},339:function(t){"use strict";t.exports=window.ol.source.Vector},528:function(t){"use strict";t.exports=window.ol.style}},n={};function o(t){var e=n[t];if(void 0!==e)return e.exports;var i=n[t]={id:t,loaded:!1,exports:{}};return r[t](i,i.exports,o),i.loaded=!0,i.exports}o.m=r,o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,{a:e}),e},o.d=function(t,e){for(var r in e)o.o(e,r)&&!o.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},o.f={},o.e=function(t){return Promise.all(Object.keys(o.f).reduce((function(e,r){return o.f[r](t,e),e}),[]))},o.u=function(t){return t+".swagger-ui-map-plugin.js"},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},t={},e="swagger-ui-map-plugin:",o.l=function(r,n,i,u){if(t[r])t[r].push(n);else{var c,a;if(void 0!==i)for(var f=document.getElementsByTagName("script"),s=0;s<f.length;s++){var l=f[s];if(l.getAttribute("src")==r||l.getAttribute("data-webpack")==e+i){c=l;break}}c||(a=!0,(c=document.createElement("script")).charset="utf-8",c.timeout=120,o.nc&&c.setAttribute("nonce",o.nc),c.setAttribute("data-webpack",e+i),c.src=r),t[r]=[n];var p=function(e,n){c.onerror=c.onload=null,clearTimeout(d);var o=t[r];if(delete t[r],c.parentNode&&c.parentNode.removeChild(c),o&&o.forEach((function(t){return t(n)})),e)return e(n)},d=setTimeout(p.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=p.bind(null,c.onerror),c.onload=p.bind(null,c.onload),a&&document.head.appendChild(c)}},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.nmd=function(t){return t.paths=[],t.children||(t.children=[]),t},function(){var t;o.g.importScripts&&(t=o.g.location+"");var e=o.g.document;if(!t&&e&&(e.currentScript&&"SCRIPT"===e.currentScript.tagName.toUpperCase()&&(t=e.currentScript.src),!t)){var r=e.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!t||!/^http(s?):/.test(t));)t=r[n--].src}if(!t)throw new Error("Automatic publicPath is not supported in this browser");t=t.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),o.p=t}(),function(){var t={792:0};o.f.j=function(e,r){var n=o.o(t,e)?t[e]:void 0;if(0!==n)if(n)r.push(n[2]);else{var i=new Promise((function(r,o){n=t[e]=[r,o]}));r.push(n[2]=i);var u=o.p+o.u(e),c=new Error;o.l(u,(function(r){if(o.o(t,e)&&(0!==(n=t[e])&&(t[e]=void 0),n)){var i=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+i+": "+u+")",c.name="ChunkLoadError",c.type=i,c.request=u,n[1](c)}}),"chunk-"+e,e)}};var e=function(e,r){var n,i,u=r[0],c=r[1],a=r[2],f=0;if(u.some((function(e){return 0!==t[e]}))){for(n in c)o.o(c,n)&&(o.m[n]=c[n]);a&&a(o)}for(e&&e(r);f<u.length;f++)i=u[f],o.o(t,i)&&t[i]&&t[i][0](),t[i]=0},r=this.webpackChunkswagger_ui_map_plugin=this.webpackChunkswagger_ui_map_plugin||[];r.forEach(e.bind(null,0)),r.push=e.bind(null,r.push.bind(r))}();var i={};return function(){"use strict";o.r(i),o.d(i,{default:function(){return l}});var t=window.ol,e=window.ol.source,r=window.ol.layer.Tile,n=o.n(r),u=r=>(i,u)=>c=>{const a=u.React,f=a.createRef(),s=Object.values(r.renderer).filter((t=>t.activationFnc(c))),l=s.length>0;return l&&a.useEffect((()=>{const r=new(n())({source:new e.OSM}),i=new t.Map({layers:[r],target:f.current,view:new t.View({center:[0,0],zoom:2})});s.forEach((t=>{o(489)("./"+t.format).then((e=>e.default(i,c.content,t.config)))}))}),[]),a.createElement("div",null,l&&a.createElement("div",{style:{height:r.mapHeight,marginBottom:"10px"}},a.createElement("div",{ref:f,style:{width:"100%",height:"100%"}})),a.createElement(i,c))};class c{mapHeight="400px";renderer={geojson:{activationFnc:t=>["application/geo+json"].includes(t.contentType),format:"GeoJson",config:{sourceProjection:"EPSG:4326",defaultStrokeColor:"black",defaultStrokeWidth:1,defaultFillColor:"black"}}}}var a=o(182),f=o.n(a);const s=(t={})=>()=>(t=f()(new c,t),{wrapComponents:{responseBody:u(t)}});window.SwaggerUiMapPlugin=s;var l=s}(),i}()}));

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@josephinumresearch/swagger-ui-map-plugin",
+  "version": "1.0.1",
+  "main": "src/index.js",
+  "scripts": {
+    "build": "webpack --mode=production",
+    "dev": "webpack serve --mode=development",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Josephinum Research",
+  "license": "ISC",
+  "description": "SwaggerUI plugin to draw supported responses on a map",
+  "keywords": [
+    "swagger-ui",
+    "plugin",
+    "map"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Josephinum-Research/swagger-ui-map-plugin"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.25.6",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "babel-loader": "^9.2.1",
+    "html-webpack-plugin": "^5.6.0",
+    "ol": "^10.1.0",
+    "react": "^18.3.1",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
+  },
+  "dependencies": {
+    "lodash.merge": "^4.6.2"
+  }
+}

package/src/Config.js

@@ -0,0 +1,16 @@
+
+export default class Config {
+    mapHeight='400px';
+    renderer = {
+        'geojson': {
+            activationFnc: props => ['application/geo+json'].includes(props.contentType),
+            format: 'GeoJson',
+            config: {
+                sourceProjection: 'EPSG:4326',
+                defaultStrokeColor: 'black',
+                defaultStrokeWidth: 1,
+                defaultFillColor: 'black',
+            }
+        }
+    }
+}

package/src/WrapperComponent.js

@@ -0,0 +1,47 @@
+import {Map as OlMap, View} from "ol";
+import {OSM} from "ol/source";
+import TileLayer from "ol/layer/Tile";
+
+
+export default (config) => (Original, system) => (props) => {
+    const React = system.React;
+
+    const mapContainer = React.createRef();
+    const renderer = Object.values(config.renderer).filter(f => f.activationFnc(props));
+    const isMapVisible = renderer.length > 0;
+
+    if (isMapVisible) {
+        React.useEffect(() => {
+            const rasterLayer = new TileLayer({
+                source: new OSM(),
+            });
+
+            const olMap = new OlMap({
+                layers: [rasterLayer],
+                target: mapContainer.current,
+                view: new View({
+                    center: [0, 0],
+                    zoom: 2,
+                }),
+            });
+
+            renderer.forEach(f => {
+                import('./formats/' + f.format).then(r => r.default(olMap, props.content, f.config));
+            })
+        }, []);
+    }
+
+    return (
+        <div>
+            {isMapVisible && (
+                <div style={{height: config.mapHeight, marginBottom: '10px'}}>
+                    <div
+                        ref={mapContainer}
+                        style={{width: '100%', height: '100%'}}
+                    />
+                </div>
+            )}
+            <Original {...props} />
+        </div>
+    );
+};

package/src/formats/GeoJson.js

@@ -0,0 +1,38 @@
+import {GeoJSON} from "ol/format";
+import VectorSource from "ol/source/Vector";
+import {VectorImage} from "ol/layer";
+import {Fill, Stroke, Style} from "ol/style";
+
+export default (
+    olMap,
+    content,
+    config
+) => {
+    const features = new GeoJSON().readFeatures(JSON.parse(content));
+
+    features.forEach(function (feature) {
+        feature.getGeometry().transform(config.sourceProjection || 'EPSG:4326', 'EPSG:3857');
+    });
+
+    const source = new VectorSource({
+        features: features,
+    });
+
+    const style = (feature) => new Style({
+        stroke: new Stroke({
+            color: feature.getProperties().stroke || config.defaultStrokeColor,
+            width: feature.getProperties().strokeWidth || config.defaultStrokeWidth,
+        }),
+        fill: new Fill({
+            color: feature.getProperties().fill || config.defaultFillColor,
+        }),
+    });
+
+    const layer = new VectorImage({
+        source: source,
+        style: style,
+    });
+
+    olMap.addLayer(layer);
+    olMap.getView().fit(source.getExtent());
+}

package/src/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="SwaggerUI" />
+    <title>SwaggerUI</title>
+    <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5.17.14/swagger-ui.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css">
+</head>
+<body>
+<div id="swagger-ui"></div>
+<script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js" crossorigin></script>
+<script src="https://unpkg.com/swagger-ui-dist@5.17.14/swagger-ui-bundle.js" crossorigin></script>
+<script>
+    window.onload = () => {
+        window.ui = SwaggerUIBundle({
+            url: 'https://api.terrazo.at/api-docs/latest:%20v2',
+            plugins: [
+                SwaggerUiMapPlugin({
+                    renderer: {
+                        geojson: {
+                            activationFnc: props => ['application/geo+json', 'application/json'].includes(props.contentType),
+                            config: {
+                                defaultStrokeWidth: '4'
+                            }
+                        }
+                    }
+                })
+            ],
+            dom_id: '#swagger-ui',
+        });
+    };
+</script>
+</body>
+</html>

package/src/index.js

@@ -0,0 +1,17 @@
+import WrapperComponent from "./WrapperComponent";
+import Config from "./Config";
+import merge from "lodash.merge";
+
+
+const SwaggerUiMapPlugin = (config={}) => (/*system*/) => {
+    config = merge(new Config(), config);
+
+    return {
+        wrapComponents: {
+            responseBody: WrapperComponent(config)
+        }
+    }
+};
+window.SwaggerUiMapPlugin = SwaggerUiMapPlugin;
+
+export default SwaggerUiMapPlugin;

package/webpack.config.js

@@ -0,0 +1,45 @@
+const path = require('path');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+
+module.exports = (env, argv) => ({
+    entry: './src/index.js',
+    mode: 'production',
+    devtool: argv.mode === 'development' ? 'source-map' : false,
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'swagger-ui-map-plugin.js',
+        globalObject: 'this',
+        library: {
+            name: "swagger-ui-map-plugin",
+            type: "umd"
+        },
+        clean: true
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                exclude: /node_modules/,
+                use: ['babel-loader']
+            },
+        ],
+    },
+    externalsType: 'window',
+    externals: [
+        {
+            react: 'react',
+        },
+        ({ context, request }, callback) => {
+            if (/^ol\/|^ol$/i.test(request)) {
+                return callback(null, request.split('/'));
+            }
+            callback();
+        },
+    ],
+    plugins: argv.mode === 'development' ? [
+        new HtmlWebpackPlugin({
+            template: "src/index.html",
+        })
+    ] : []
+});