⚡️ use TopoJSON instead of GeoJSON

src/adjuster/adjuster.service.ts

@@ -4,7 +4,7 @@ import {Injectable} from '@angular/core';
 import {HsUtilsService} from 'hslayers-ng/components/utils/utils.service';
 
 // import attractivity from '../Attractivity.json';
-import nuts from '../nuts';
+import {obce} from '../app.config';
 
 @Injectable({providedIn: 'root'})
 export class AdjusterService {
@@ -97,7 +97,7 @@ export class AdjusterService {
             this.attractivity.forEach((a) => {
               this.nutsCodeRecordRelations[a.code] = a;
             });
-            nuts.nuts3Source.forEachFeature((feature) => {
+            obce.forEachFeature((feature) => {
               feature.set(
                 'total',
                 this.nutsCodeRecordRelations[feature.get('NUTS_ID')].aggregate

src/app.config.ts

@@ -1,8 +1,23 @@
+import proj4 from 'proj4';
 import {Fill, Stroke, Style} from 'ol/style';
-import {GeoJSON} from 'ol/format';
 import {OSM, Vector as VectorSource} from 'ol/source';
 import {Tile, Vector as VectorLayer} from 'ol/layer';
+import {TopoJSON} from 'ol/format';
 import {View} from 'ol';
+import {get as getProjection, transform} from 'ol/proj';
+import {register} from 'ol/proj/proj4';
+
+proj4.defs(
+  'EPSG:3045',
+  '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
+);
+proj4.defs(
+  'EPSG:5514',
+  '+proj=krovak +lat_0=49.5 +lon_0=24.83333333333333 +alpha=30.28813972222222 +k=0.9999 +x_0=0 +y_0=0 +ellps=bessel +towgs84=542.5,89.2,456.9,5.517,2.275,5.516,6.96 +units=m +no_defs'
+);
+register(proj4);
+const sjtskProjection = getProjection('EPSG:5514');
+//const utm33nProjection = getProjection('EPSG:3045');
 
 function getHostname() {
   const url = window.location.href;
@@ -55,11 +70,14 @@ const styles = function (feature) {
   }
 };
 
+export const obce = new VectorSource({
+  format: new TopoJSON({dataProjection: 'EPSG:5514'}),
+  url: require('./data/obce_cr_20210310_15p_5514.topojson').default,
+  overlaps: false,
+});
+
 const obceLayer = new VectorLayer({
-  source: new VectorSource({
-    format: new GeoJSON(),
-    url: require('./data/obce_cr_20210310_simplified_5514.geojson').default,
-  }),
+  source: obce,
   visible: true,
   style: styles,
   title: 'Obce ČR',
@@ -93,8 +111,9 @@ export const AppConfig = {
   ],
   project_name: 'erra/map',
   default_view: new View({
-    center: [2433348.3022471312, 7744501.813885343],
-    zoom: 3.6,
+    projection: sjtskProjection,
+    center: transform([15.628, 49.864249], 'EPSG:4326', 'EPSG:5514'),
+    zoom: 7,
     units: 'm',
   }),
   advanced_form: true,

webpack.common.js

@@ -89,7 +89,7 @@ module.exports = {
       },
       // Load data files
       {
-        test: /\.geojson$/,
+        test: /\.(geo|topo)json$/,
         include: path.resolve(__dirname, 'src/data'),
         use: {
           loader: 'file-loader',