bluehalo / ngx-leaflet

Core Leaflet package for Angular.io
MIT License
774 stars 127 forks source link

Maps not rendering correctly #235

Closed rehamwael closed 5 years ago

rehamwael commented 5 years ago

Im facing an issue with angular 8 I imported and install the package but the map not rendering fully in my site

Screenshot 2019-09-10 at 19 37 03

html

                                                <div class="col-lg-12" leaflet
                                                style="height:100px;"
                                                [leafletCenter]="mapCenter"
                                                [leafletZoom]="zoomLevel"
                                                [leafletLayers]="leafletLayers">

I add this on the constructor this.leafletLayers = [tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom:7 , attribution: '...'})]; this.mapCenter = latLng(64.805606, 9.910027); this.zoomLevel=5;

also I included the style here "node_modules/leaflet/dist/leaflet.css" in angular.json file

denaillc commented 5 years ago

Had the exact same problem this morning, and I had forgotten that I had switched projects and the leaflet.css wasn't imported. Are you sure it is correctly imported ? I fixed it with "./node_modules/leaflet/dist/leaflet.css".

reblace commented 5 years ago

This is almost always a missing reference to the leaflet.css file as @denaillc mentioned. Since we haven't heard back after that suggestion, I'm going to close this issue.

Feel free to comment with an update. If you're still having the issue, I really need a working example that reproduces the issue. Otherwise, it's difficult to troubleshoot.