0

I am facing the error "ERROR TypeError: Cannot read property 'CRS' of undefined" caused by L.Proj being undefined.

Here what I did :

  1. I added Leaflet, Proj4 and Proj4leaflet packages using npm commands.
  2. I added @types/leafelt, @types/proj4 and @types/proj4leaflet.
  3. I included required js paths in .angular.json.

    "scripts": [
              "../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap/dist/js/bootstrap.js",
              "../node_modules/tether/dist/js/tether.min.js",
              "../node_modules/leaflet/dist/leaflet.js",
              "../node_modules/proj4/dist/proj4.js",
              "../node_modules/proj4leaflet/src/proj4leaflet.js"
              ]
    
  4. In my Typescript file I included the following imports :

    import * as L from "leaflet";
    import * as proj4 from "proj4"; 
    import * as proj4leaflet from "proj4leaflet";
    
  5. Finally here is an extract of the code :

    var crs = new L.Proj.CRS('EPSG:3006',
        '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs', {
            resolutions: [
                8192, 4096, 2048, 1024, 512, 256, 128
            ],
            origin: [0, 0],
            bounds: L.bounds([218128.7031, 6126002.9379], [1083427.2970, 7692850.9468])
        });
    
    //32.3340497, -6.3590815
    this.mymap = L.map("mymap", {
        crs: crs,
        attributionControl: false
    }).setView([32.3340497, -6.3590815], 12);
    
    L.tileLayer("http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png", {
        minZoom: 7,
        maxZoom: 18
    }).addTo(this.mymap);
    

Could you please give me any help.

1

This looks similar to the issue described here https://github.com/kartena/Proj4Leaflet/pull/147

Meaning you could try to get it to work with

import * as L from 'leaflet';
import 'proj4leaflet';
  • Thank you very much. That's corrected the previous issue. Now I am unable to load tiles (it gives grey background instead + zoom control). I guess it's a problem related to bounds, but I still can't fixe it. Another thing is when I try to zoom, I get this message in console.log : "core.js:1449 ERROR Error: Invalid LatLng object: (NaN, NaN)". – M.usf Jun 12 '18 at 11:13
  • Yes that is another issue, it looks like you are setting the view to be somewhere in Marocko when the tiles you are loading are a Swedish map, meaning there are no tiles in Marocko. Also the min and max zoom levels are not supported by the tile layer you are using. If you would set the view to be somewhere in sweden ie [57.704, 11.965] and minZoom: 0, maxZoom: 14 i think it should work . – semone Jun 12 '18 at 19:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.