Issues with Leaflet

Topic: Issues with Leaflet

developerjfcg pro asked 6 years ago

Hi,

I was trying to upload Leaflet Maps but the main image when I load my website, this shows some parts of the maps, so, does not load completely the map. Please, look the next example:

Also, I share the next link where I review the information to develope this:

https://asymmetrik.com/ngx-leaflet-tutorial-angular-cli/

Add comment

developerjfcg pro answered 6 years ago

0 0 Best answer

Hi Arek,

Thanks for your reply. I have sent you a email from fessierra17@hotmail.com

Thank`s

Arkadiusz Idzikowski staff commented 6 years ago

Hello,

I double checked my inbox and I don't have any emails from this address. Please try to send it again.

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Thank you for the demos. It looks like you didn't update angular.json and styles.scss in the project with MDB.Please update assets and styles arrays in angular.json:<div><pre class="code-toolbar grey lighten-2 p-3 mb-3">"assets": [ { "glob": "**/*", "input": "./node_modules/leaflet/dist/images", "output": "leaflet/" }, { "glob": "favicon.ico", "input": "src", "output": "/" }, { "glob": "**/*", "input": "src/assets", "output": "/assets" } ], "styles": [ { "input": "node_modules/font-awesome/scss/font-awesome.scss" }, { "input": "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss" }, { "input": "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss" }, { "input": "src/styles.scss" }, { "input": "./node_modules/leaflet/dist/leaflet.css" } ]</pre></div><div> </div><div>And styles.scss:</div><div> </div><div><div><pre class="code-toolbar grey lighten-2 p-3 mb-3">html, body { height: 100%; margin: 0; padding: 0; }</pre></div></div>

Please insert min. 20 characters.

Thank you for the demos. It looks like you didn't update angular.json and styles.scss in the project with MDB.

Please update assets and styles arrays in angular.json:

"assets": [

{

"glob": "**/*",

"input": "./node_modules/leaflet/dist/images",

"output": "leaflet/"

},

{

"glob": "favicon.ico",

"input": "src",

"output": "/"

},

{

"glob": "**/*",

"input": "src/assets",

"output": "/assets"

}

],

"styles": [

{

"input": "node_modules/font-awesome/scss/font-awesome.scss"

},

{

"input": "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss"

},

{

"input": "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss"

},

{

"input": "src/styles.scss"

},

{

"input": "./node_modules/leaflet/dist/leaflet.css"

}

]

And styles.scss:

html, body {

height: 100%;

margin: 0;

padding: 0;

}

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Hello,

Are there any errors in console? Could you provide a demo on which I would be able to debug this problem? You can send it to me on a.idzikowski@mdbootstrap.com.

Regards,

Arek

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.3
Device: All
Browser: All
OS: OSX & Windows
Provided sample code: No
Provided link: No

developerjfcg

Pro User 20Support score
1Questions 1Answers 0Snippets