LAYER
    DEBUG 5
    TYPE point
    METADATA
        "WMS_TITLE" "N5000 Stasjon"
        "GML_INCLUDE_ITEMS" ""
        "WMS_INCLUDE_ITEMS" ""
    END
    CONNECTION "user=postgres password=postgres dbname=n5000 host=localhost port=5432"
    CONNECTIONTYPE postgis
    DATA "posisjon FROM (SELECT * FROM n5000kartdata_3abc657467024482a6b5ba9ddff592b7.stasjon) AS MYTABLE USING UNIQUE objid USING SRID=25833"
    NAME "Stasjon"
    PROCESSING "CLOSE_CONNECTION=DEFER"
    PROJECTION "init=epsg:25833" END
    CLASS
        STYLE
            ANGLE auto
            COLOR 244 17 17
            LINECAP round
            LINEJOIN round
            OUTLINECOLOR 204 8 8
            SIZE 12
            SYMBOL "ellipse"
        END
    END
END
LAYER
    TYPE POLYGON
    METADATA
        "WMS_TITLE" "N5000 - Skog"
        "GML_INCLUDE_ITEMS" ""
        "WMS_INCLUDE_ITEMS" ""
    END
    CONNECTION "user=postgres password=postgres dbname=n5000 host=localhost port=5432"
    CONNECTIONTYPE postgis
    DATA "omrade FROM (SELECT * FROM n5000kartdata_3abc657467024482a6b5ba9ddff592b7.skog) AS MYTABLE USING UNIQUE objid USING SRID=25833"

    NAME "Skog"
    PROCESSING "CLOSE_CONNECTION=DEFER"
    PROJECTION "init=epsg:25833" END
    CLASS
        STYLE
            ANGLE auto
            LINECAP round
            LINEJOIN round
        END
    END
END

<div className="content">
      <h1>
        Welcome to <code>react-openlayers</code> Demo
      </h1>
      <button onClick={() => this.setState({ unmounted: true })}>
        Unmount map
      </button>
      <CenterRenderer />
            { <VectorTileLayer
              id="vectorTileLayer"
              key="vectorTileKey"
              name="vector tile layer"
              url={
                'http://localhost/mapserver?map=c:/a3/data/mapengine/mapfiles/n5000Test.map&mode=tile&tilemode=gmap&tile={x}+{y}+{z}&layers=All&map.imagetype=mvt'
              }
            />}

var fill = new Fill({ color: '' });
var stroke= new Stroke({ color: '', width: 1 });
var radius = 5;
var textSize = 12;
var text = new Text({font: textSize + 'px serif', fill: fill, stroke:
stroke});

var styleFunc = {
  Polygon: new Style({ fill: fill }),
  StrokedPolygon: new Style({ fill: fill, stroke: stroke }),
  Point: new Style ({
    image: new Circle({fill: fill, stroke: stroke, radius: radius})
  }),
  Line: new Style({ stroke: stroke }),
  Text: new Style({
    text: text
  })
};

var temp = JsonData;
var styles = [];

return function(feature) {
  var length = 0;
  var layer = feature.get('layer');

  var layerStyle = temp.layers[layer.toLowerCase()];
  fill.setColor(layerStyle.fillColor|| undefined);
  stroke.setColor(layerStyle.strokeColor || undefined);
  stroke.setWidth(layerStyle.strokeWidth || undefined);
  text.setText(feature.getProperties().fulltekst || undefined);

  radius = layerStyle.radius || undefined;
  styles[length++] = styleFunc[layerStyle.type];

class VectorTile extends React.Component {
get id() {
  return this.props.id;
}
// const med attr
componentDidMount() {
  this.addLayer(this.props);
}

addLayer(props) {
  const { map, style, tileUrlFunction, url, opacity } = props;

  if (!map) return;

  if (map._layers && map._layers[this.id]) {
    map._layers[this.id].setVisible(true);
    return;
  }

  map._layers = map._layers || {};
  map._layers[this.id] = new VectorTileLayer({
    declutter: true,
    minResolution: 0,
    maxResolution: 20000,
    source: new VectorTileSource({
      attributions: 'testtT!',
      format: new MVT(),
      projection: "EPSG:3857",
      url: url,
      tileUrlFunction: tileUrlFunction
    }),
    renderMode: "image",

    opacity: opacity,
    style:
      style || MapStyle(Style, Fill, Stroke, Icon, Text),
    zIndex: -10
  });
  this.mountLayer();
}