Hfrhyu

How often does castling occur in grandmaster games?

Sum letters are not two different

How do living politicians protect their readily obtainable signatures from misuse?

SF book about people trapped in a series of worlds they imagine

Why are the trig functions versine, haversine, exsecant, etc, rarely used in modern mathematics?

Why is Nikon 1.4g better when Nikon 1.8g is sharper?

How to tell that you are a giant?

Has negative voting ever been officially implemented in elections, or seriously proposed, or even studied?

How do you solve the twins Paradox?

Using audio cues to encourage good posture

How would a mousetrap for use in space work?

Why does it sometimes sound good to play a grace note as a lead in to a note in a melody?

What is the meaning of 'breadth' in breadth first search?

How much damage would a cupful of neutron star matter do to the Earth?

How do I use the new nonlinear finite element in Mathematica 12 for this equation?

Is there hard evidence that the grant peer review system performs significantly better than random?

Should I use a zero-interest credit card for a large one-time purchase?

Taylor expansion of ln(1-x)

What would you call this weird metallic apparatus that allows you to lift people?

Why do we need to use the builder design pattern when we can do the same thing with setters?

Amount of permutations on an NxNxN Rubik's Cube

Is grep documentation about ignoring case wrong, since it doesn't ignore case in filenames?

What do you call the main part of a joke?

How do I find out the mythology and history of my Fortress?

“L.Proj is undefined” error when using Proj4Leaflet in Angular 5

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

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.

leaflet proj angularjs typescript proj4leaflet

share|improve this question

edited Apr 11 at 10:01

Kadir Şahbaz

4,69221531

asked Jun 11 '18 at 14:42

M.usfM.usf

64

add a comment | 

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.

leaflet proj angularjs typescript proj4leaflet

share|improve this question

edited Apr 11 at 10:01

Kadir Şahbaz

4,69221531

asked Jun 11 '18 at 14:42

M.usfM.usf

64

add a comment | 

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.

leaflet proj angularjs typescript proj4leaflet

share|improve this question

edited Apr 11 at 10:01

Kadir Şahbaz

4,69221531

asked Jun 11 '18 at 14:42

M.usfM.usf

64

share|improve this question

edited Apr 11 at 10:01

Kadir Şahbaz

4,69221531

asked Jun 11 '18 at 14:42

M.usfM.usf

64

share|improve this question

edited Apr 11 at 10:01

Kadir Şahbaz

4,69221531

asked Jun 11 '18 at 14:42

M.usfM.usf

64

edited Apr 11 at 10:01

Kadir Şahbaz

4,69221531

edited Apr 11 at 10:01

Kadir Şahbaz

4,69221531

asked Jun 11 '18 at 14:42

M.usfM.usf

64

asked Jun 11 '18 at 14:42

M.usfM.usf

64

1 Answer
1

active

oldest

votes

0

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';

share|improve this answer

answered Jun 12 '18 at 6:08

semonesemone

11

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "79"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f285888%2fl-proj-is-undefined-error-when-using-proj4leaflet-in-angular-5%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

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';

share|improve this answer

answered Jun 12 '18 at 6:08

semonesemone

11

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

add a comment | 

0

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';

share|improve this answer

answered Jun 12 '18 at 6:08

semonesemone

11

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  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
  

  
  
  
  

add a comment | 

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';

share|improve this answer

answered Jun 12 '18 at 6:08

semonesemone

11

import * as L from 'leaflet';
import 'proj4leaflet';

share|improve this answer

answered Jun 12 '18 at 6:08

semonesemone

11

answered Jun 12 '18 at 6:08

semonesemone

11

answered Jun 12 '18 at 6:08

semonesemone

11