laravel-maps icon indicating copy to clipboard operation
laravel-maps copied to clipboard

Published 20 hours ago • verified publisher icon LarsWiegers

Missing Tiles

Open synecdocheNORTH opened this issue 2 years ago • 8 comments

Hi,

Does anyone have any ideas why the tiles are not fully loading? See screenshot below.

I'm using Bootstrap, but I cannot see where any conflicts are coming from. I've also added my Mapbox API key to my .env file. Using Google works OK but I need multiple instances of the map so I need to use the Leaflet option.

Screenshot 2022-08-10 at 13 59 02

synecdocheNORTH avatar Aug 10 '22 13:08 synecdocheNORTH

Hi! thx for creating the issue.

Without code + console screenshots it is going to be hard to diagnose what is going on. So pls share your code + what is happening in the console.

LarsWiegers avatar Aug 10 '22 15:08 LarsWiegers

Hi,

Thanks for the response. I am sure it is an issue my side for sure! It's excellent other than this issue I'm having

There's no related console errors. Additionally, I'm using very little custom CSS, when I remove the issue is the same. It feels like the right hand side of the map canvas isn't loading. I can pull what appears to the other side if that makes sense.

Screenshot 2022-08-10 at 16 09 27 Screenshot 2022-08-10 at 16 05 37

@foreach ($entry->tasks as $task) <x-maps-leaflet id="marker{{ $task->id }}" class="h-100 w-100" :centerPoint="[ 'lat' => $task->address_latitude, 'long' => $task->address_longitude, ]" :markers="[ [ 'lat' => $task->address_latitude, 'long' => $task->address_longitude, ], ]" :zoomLevel="15"> </x-maps-leaflet> @endforeach

synecdocheNORTH avatar Aug 10 '22 15:08 synecdocheNORTH

We split the marker array up to create an array of markers, can you remove the last , from this: $task->address_longitude, ], ]" and try again?

Can you also share a screenshot of the network tab?

Also if you want to use mapbox you need to add tileHost="mapbox" to the component.

LarsWiegers avatar Aug 10 '22 15:08 LarsWiegers

Thanks,

I have set the tileHost and remove the comma. Same result unfortunately.

Screenshot 2022-08-10 at 17 00 09 Screenshot 2022-08-10 at 16 59 26

Network tab:

Screenshot 2022-08-10 at 17 00 34

synecdocheNORTH avatar Aug 10 '22 16:08 synecdocheNORTH

Hi,

Actually the network tab has come up with the following:

Screenshot 2022-08-10 at 17 31 28

synecdocheNORTH avatar Aug 10 '22 16:08 synecdocheNORTH

Screenshot 2022-08-10 at 18 08 03

synecdocheNORTH avatar Aug 10 '22 17:08 synecdocheNORTH

very weird, almost seems like it would be a bug with leaflet then. going to need to think about this for a bit.

LarsWiegers avatar Aug 10 '22 18:08 LarsWiegers

Ok, thank you for your efforts thus far. They're appreciated.

synecdocheNORTH avatar Aug 10 '22 19:08 synecdocheNORTH

I am having a similar issue and it appears that it could be caused by the lack of dimensions being provided to the tile layer. I am not entirely sure how to address this but ill continue doing some research.

ryangurn avatar Aug 23 '22 04:08 ryangurn

@synecdocheNORTH can you setup a repo that is able to reproduce this? that way we can better test what is going on

LarsWiegers avatar Aug 31 '22 16:08 LarsWiegers

Closing as @synecdocheNORTH did not respond. feel free to reopen with a reproducable repo

LarsWiegers avatar Sep 07 '22 17:09 LarsWiegers