No Map shown in frontend

DL1ndner commented

2024-03-21 22:04:27 +01:00

(Migrated from github.com)

tile_map 1.0.5
with tile_proxy 1.2.6
on TYPO3 12.4.44 (composer)
on PHP 8.3
Installed tile_map and tile_proxy, included TypoScript Template of both extensions.
Created tile_proxy page (ID=345) with defined area in sub folder.
Created tt_address with lat/lon within same area.
Created plugin tile map on page with tile proxy endpoint and added tt_address entry.
Disabled Content Security Policies for testing

Expected to get map shown in frontend. But no map is displayed.
html Output is:

<section class="tile-maps-container">
 <div class="map-wrapper">
   <div class="map" data-endpoint="/muctile/" data-settings="{&quot;iconPath&quot;:&quot;EXT:tile_maps\/Resources\/Public\/Icons\/&quot;,&quot;defaultMarkerIcon&quot;:{&quot;iconName&quot;:&quot;marker-icon.png&quot;,&quot;iconName2x&quot;:&quot;marker-icon-2x.png&quot;,&quot;shadowIconName&quot;:&quot;marker-shadow.png&quot;,&quot;iconSize&quot;:&quot;25, 41&quot;,&quot;iconAnchor&quot;:&quot;12, 41&quot;,&quot;popupAnchor&quot;:&quot;1, -34&quot;,&quot;tooltipAnchor&quot;:&quot;16, -28&quot;,&quot;shadowSize&quot;:&quot;41, 41&quot;},&quot;hightlightMarkerIcon&quot;:{&quot;iconName&quot;:&quot;marker-highlight-icon.png&quot;,&quot;iconName2x&quot;:&quot;marker-highlight-icon-2x.png&quot;,&quot;shadowIconName&quot;:&quot;marker-highlight-shadow.png&quot;,&quot;iconSize&quot;:&quot;25, 41&quot;,&quot;iconAnchor&quot;:&quot;12, 41&quot;,&quot;popupAnchor&quot;:&quot;1, -34&quot;,&quot;tooltipAnchor&quot;:&quot;16, -28&quot;,&quot;shadowSize&quot;:&quot;41, 41&quot;},&quot;tileEndpoint&quot;:&quot;345&quot;,&quot;initialView&quot;:&quot;11.619853029425297,48.132942874831855,16&quot;,&quot;setMaxBounds&quot;:&quot;0&quot;,&quot;fitBounds&quot;:&quot;0&quot;,&quot;minZoom&quot;:&quot;12&quot;,&quot;maxZoom&quot;:&quot;18&quot;,&quot;enableMarkerPopUp&quot;:&quot;0&quot;,&quot;enableCluster&quot;:&quot;1&quot;,&quot;bbox&quot;:&quot;11.33,48,11.81,48.27&quot;,&quot;grayscale&quot;:false,&quot;resourceUrl&quot;:&quot;\/_assets\/992c9ffb7ed82b21316e21ca6e9ad7cd\/Icons\/&quot;}"></div>
</div>
<div class="content-wrapper hidden">
<div class="address-items">
<div class="address-items__list">
<div class="address-item hidden" data-uid="1">
<div class="general">
<span property="name">MY ADDRESS</span>
<input type="hidden" name="latitude" value="48.132667">
<input type="hidden" name="longitude" value="11.620344">
<div property="address" typeof="PostalAddress">
<span property="streetAddress">Neumarkter Straße 22, 81673 München, Deutschland</span>
<div class="city">
<span property="postalCode">81673</span>&nbsp;
<span property="addressLocality">München</span>
</div>
</div>
<span property="telephone"></span>
<span><a property="email" href="#" data-mailto-token="kygjrm8" data-mailto-vector="-2"></a></span>
</div>
<div class="address-item__popupcontent">
<div class="general">
<span property="name">MY ADDRESS</span>
<input type="hidden" name="latitude" value="48.132667">
<input type="hidden" name="longitude" value="11.620344">
<div property="address" typeof="PostalAddress">
<span property="streetAddress">Neumarkter Straße 22, 81673 München, Deutschland</span>
<div class="city">
<span property="postalCode">81673</span>
&nbsp;<span property="addressLocality">München</span>
</div>
</div>
<span property="telephone"></span>
<span><a property="email" href="#" data-mailto-token="kygjrm8" data-mailto-vector="-2"></a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
...
<script src="/_assets/992c9ffb7ed82b21316e21ca6e9ad7cd/JavaScript/MapCreator.js?1706092392"></script>

Did I miss anything? What else can I try? Any help appreciated.

Thank you!

- tile_map 1.0.5 - with tile_proxy 1.2.6 - on TYPO3 12.4.44 (composer) - on PHP 8.3 - Installed tile_map and tile_proxy, included TypoScript Template of both extensions. - Created tile_proxy page (ID=345) with defined area in sub folder. - Created tt_address with lat/lon within same area. - Created plugin tile map on page with tile proxy endpoint and added tt_address entry. - Disabled Content Security Policies for testing Expected to get map shown in frontend. But no map is displayed. html Output is: ```html <section class="tile-maps-container"> <div class="map-wrapper"> <div class="map" data-endpoint="/muctile/" data-settings="{"iconPath":"EXT:tile_maps\/Resources\/Public\/Icons\/","defaultMarkerIcon":{"iconName":"marker-icon.png","iconName2x":"marker-icon-2x.png","shadowIconName":"marker-shadow.png","iconSize":"25, 41","iconAnchor":"12, 41","popupAnchor":"1, -34","tooltipAnchor":"16, -28","shadowSize":"41, 41"},"hightlightMarkerIcon":{"iconName":"marker-highlight-icon.png","iconName2x":"marker-highlight-icon-2x.png","shadowIconName":"marker-highlight-shadow.png","iconSize":"25, 41","iconAnchor":"12, 41","popupAnchor":"1, -34","tooltipAnchor":"16, -28","shadowSize":"41, 41"},"tileEndpoint":"345","initialView":"11.619853029425297,48.132942874831855,16","setMaxBounds":"0","fitBounds":"0","minZoom":"12","maxZoom":"18","enableMarkerPopUp":"0","enableCluster":"1","bbox":"11.33,48,11.81,48.27","grayscale":false,"resourceUrl":"\/_assets\/992c9ffb7ed82b21316e21ca6e9ad7cd\/Icons\/"}"></div> </div> <div class="content-wrapper hidden"> <div class="address-items"> <div class="address-items__list"> <div class="address-item hidden" data-uid="1"> <div class="general"> <span property="name">MY ADDRESS</span> <input type="hidden" name="latitude" value="48.132667"> <input type="hidden" name="longitude" value="11.620344"> <div property="address" typeof="PostalAddress"> <span property="streetAddress">Neumarkter Straße 22, 81673 München, Deutschland</span> <div class="city"> <span property="postalCode">81673</span>  <span property="addressLocality">München</span> </div> </div> <span property="telephone"></span> <span><a property="email" href="#" data-mailto-token="kygjrm8" data-mailto-vector="-2"></a></span> </div> <div class="address-item__popupcontent"> <div class="general"> <span property="name">MY ADDRESS</span> <input type="hidden" name="latitude" value="48.132667"> <input type="hidden" name="longitude" value="11.620344"> <div property="address" typeof="PostalAddress"> <span property="streetAddress">Neumarkter Straße 22, 81673 München, Deutschland</span> <div class="city"> <span property="postalCode">81673</span>  <span property="addressLocality">München</span> </div> </div> <span property="telephone"></span> <span><a property="email" href="#" data-mailto-token="kygjrm8" data-mailto-vector="-2"></a></span> </div> </div> </div> </div> </div> </div> </section> ... <script src="/_assets/992c9ffb7ed82b21316e21ca6e9ad7cd/JavaScript/MapCreator.js?1706092392"></script> ``` Did I miss anything? What else can I try? Any help appreciated. Thank you!

trokohl commented

2024-03-21 22:35:11 +01:00

(Migrated from github.com)

Hi,

please check the following:

Do JavaScript errors occur?
Does the map have a height?
Are requests going to the tile proxy address and return images?

Can I see it online somewhere?

Regards

Hi, please check the following: Do JavaScript errors occur? Does the map have a height? Are requests going to the tile proxy address and return images? Can I see it online somewhere? Regards

DL1ndner commented

2024-03-22 14:20:32 +01:00

(Migrated from github.com)

Hi,

no JavaScript errors. I did not set a height. Setting .map {height: 400px;} does not help.
I cannot see any requests to /muctile/ which is my tile proxy page (ID=345). Also the "current cache size" of the tile proxy page
is 0.0KB.

Its on a local dev environment, so I cannot show you unfortunately.

Thanks for any help!

Hi, no JavaScript errors. I did not set a height. Setting .map {height: 400px;} does not help. I cannot see any requests to /muctile/ which is my tile proxy page (ID=345). Also the "current cache size" of the tile proxy page is 0.0KB. Its on a local dev environment, so I cannot show you unfortunately. Thanks for any help! ![Screenshot_20240322_14-04_Dev_12_TYPO3_CMS](https://github.com/codemacherUG/tile_maps/assets/35764776/5e242dd1-a1ff-46f3-ba61-2a9c55e8ce63)

trokohl commented

2024-03-22 14:32:38 +01:00

(Migrated from github.com)

Have you added the TypoScript include?

DL1ndner commented

2024-03-22 14:44:56 +01:00

(Migrated from github.com)

Shure, included TypoScript Template of both extensions.

trokohl commented

2024-03-22 15:01:34 +01:00

(Migrated from github.com)

If there are no requests, it looks like a JS problem to me.
The map is not initialized.
The JS is looking for .frame-type-tilemaps_map class => Have you perhaps manipulated the frame output form Typo?

If there are no requests, it looks like a JS problem to me. The map is not initialized. The JS is looking for .frame-type-tilemaps_map class => Have you perhaps manipulated the frame output form Typo?

DL1ndner commented

2024-03-28 23:30:14 +01:00

(Migrated from github.com)

No, did not change the Template. Also there is no class ".frame-type-tilemaps_map" in Resources/Private/Templates/Map/Display.html
I wonder if the output of

<div class="map" data-endpoint="{f:uri.page(pageUid:settings.tileEndpoint)}" data-settings="{f:format.json(value: settings)}"></div>

is correct? In my case it leads to:

<div class="map" data-endpoint="/muctile/" data-settings="{&quot;iconPath&quot;:&quot;EXT:tile_maps\/Resources\/Public\/Icons\/&quot;,&quot;defaultMarkerIcon&quot;: ...

Thanks and regards!

No, did not change the Template. Also there is no class ".frame-type-tilemaps_map" in Resources/Private/Templates/Map/Display.html I wonder if the output of ```html <div class="map" data-endpoint="{f:uri.page(pageUid:settings.tileEndpoint)}" data-settings="{f:format.json(value: settings)}"></div> ``` is correct? In my case it leads to: ```html <div class="map" data-endpoint="/muctile/" data-settings="{"iconPath":"EXT:tile_maps\/Resources\/Public\/Icons\/","defaultMarkerIcon": ... ``` Thanks and regards!

trokohl commented

2024-03-28 23:43:48 +01:00

(Migrated from github.com)

Hi,

the div with the class frame-type-tilemaps_map does not come from the template but from fluid styled content.
Do you perhaps not have this active?
Perhaps i will change the JS and see if it works without it, but at the moment it is needed.

Greetings

Hi, the div with the class frame-type-tilemaps_map does not come from the template but from fluid styled content. Do you perhaps not have this active? Perhaps i will change the JS and see if it works without it, but at the moment it is needed. Greetings

DL1ndner commented

2024-03-29 08:52:54 +01:00

(Migrated from github.com)

Ahh, I didn't include fluid_styled_content's CSS, that might be the problem. I will check this later and come back to you.

Regards

Ahh, I didn't include fluid_styled_content's CSS, that might be the problem. I will check this later and come back to you. Regards

DL1ndner commented

2024-04-08 21:10:04 +02:00

(Migrated from github.com)

Hey, with fluid_styled_content's CSS included I get <div class="map frame-type-tilemaps_map" ... , but still no map output. Dev tools shows:

Uncaught TypeError: t is null
s LeafletMapController.ts:10
MapCreator.ts:13
MapCreator.ts:18
MapCreator.ts:16
MapCreator.ts:16

Greetings!

Hey, with fluid_styled_content's CSS included I get <div class="map frame-type-tilemaps_map" ... , but still no map output. Dev tools shows: > Uncaught TypeError: t is null > s LeafletMapController.ts:10 > <anonymous> MapCreator.ts:13 > <anonymous> MapCreator.ts:18 > <anonymous> MapCreator.ts:16 > <anonymous> MapCreator.ts:16 Greetings!

trokohl commented

2024-04-09 07:49:39 +02:00

(Migrated from github.com)

Hi,

the markup still doesn't seem to be correct.
Can you please post it again completely?
Why do you have a class map on the frame?

It should actually look something like this:


 <div id="c5"   class=" frame frame-default frame-type-tilemaps_map frame-layout-default frame-size-default  ...>
 ...
   <section class="tile-maps-container">
                    <div class="map-wrapper">
                      <div class="map" data-endpoint="/tile-proxy"
                        data-settings="...">
                      </div>
...

Hi, the markup still doesn't seem to be correct. Can you please post it again completely? Why do you have a class map on the frame? It should actually look something like this: ``` <div id="c5" class=" frame frame-default frame-type-tilemaps_map frame-layout-default frame-size-default ...> ... <section class="tile-maps-container"> <div class="map-wrapper"> <div class="map" data-endpoint="/tile-proxy" data-settings="..."> </div> ... ```

DL1ndner commented

2024-04-12 18:01:11 +02:00

(Migrated from github.com)

ok, when I put the tile_map lugin into a container with extra class "frame frame-default frame-type-tilemaps_map frame-layout-default frame-size-default" (using t3sbootstrap package), I get a map drawn. It uses my tile_proxy endpoint, but the tiles stay white, see Screenshot below.

The output in FF Devtool Error Console is:

...
Uncaught TypeError: t is null
s LeafletMapController.ts:10
MapCreator.ts:13
MapCreator.ts:18
MapCreator.ts:16
MapCreator.ts:16
LeafletMapController.ts:10:8
GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/Images/gewbutton_plus-Schrift_lg.png
[HTTP/1.1 200 OK 2ms]
GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/Css/print.css?1712926348
[HTTP/1.1 200 OK 1ms]
GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/Css/pdf.css?1712926348
[HTTP/1.1 200 OK 1ms]
GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/Fonts/OpenSans-Regular-webfont.woff
GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/Fonts/OpenSans-Bold-webfont.woff
GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/webfonts/fa-solid-900.woff2
GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/webfonts/fa-brands-400.woff2
GET http://devt312.local/muctile//?provider=osm&z=16&x=34883&y=22744&s=a [HTTP/1.1 200 OK 27ms]
GET http://devt312.local/muctile//?provider=osm&z=16&x=34883&y=22745&s=b
...

Anything else I have to think of?

ok, when I put the tile_map lugin into a container with extra class "frame frame-default frame-type-tilemaps_map frame-layout-default frame-size-default" (using t3sbootstrap package), I get a map drawn. It uses my tile_proxy endpoint, but the tiles stay white, see Screenshot below. The output in FF Devtool Error Console is: > ... > Uncaught TypeError: t is null > s LeafletMapController.ts:10 > <anonymous> MapCreator.ts:13 > <anonymous> MapCreator.ts:18 > <anonymous> MapCreator.ts:16 > <anonymous> MapCreator.ts:16 > [LeafletMapController.ts:10:8](webpack:///Resources/Private/TypeScript/Controller/LeafletMapController.ts) > GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/Images/gewbutton_plus-Schrift_lg.png > [HTTP/1.1 200 OK 2ms] > GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/Css/print.css?1712926348 > [HTTP/1.1 200 OK 1ms] > GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/Css/pdf.css?1712926348 > [HTTP/1.1 200 OK 1ms] > GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/Fonts/OpenSans-Regular-webfont.woff > GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/Fonts/OpenSans-Bold-webfont.woff > GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/webfonts/fa-solid-900.woff2 > GET http://devt312.local/_assets/27295d0615d0371760829c17e6bd2b28/webfonts/fa-brands-400.woff2 > GET http://devt312.local/muctile//?provider=osm&z=16&x=34883&y=22744&s=a [HTTP/1.1 200 OK 27ms] > GET http://devt312.local/muctile//?provider=osm&z=16&x=34883&y=22745&s=b > ... ![Screenshot_tile_map-empty](https://github.com/codemacherUG/tile_maps/assets/35764776/1747191f-0200-40f4-9f2b-1a187923aeea) Anything else I have to think of?

trokohl commented

2024-04-12 19:14:10 +02:00

(Migrated from github.com)

Unfortunately, I can't see what the problem could be.
I quickly created a boilerplate and can't see any problems.

https://github.com/codemacherUG/tile-maps-boilerplate
It's a ddev project, so if you have ddev installed follow the quick setup guide.

Perhabs you can see a difference...

Unfortunately, I can't see what the problem could be. I quickly created a boilerplate and can't see any problems. https://github.com/codemacherUG/tile-maps-boilerplate It's a ddev project, so if you have ddev installed follow the quick setup guide. Perhabs you can see a difference...

DL1ndner commented

2024-04-15 07:45:29 +02:00

(Migrated from github.com)

Amazing! And thank you! Comparing my setup with the one in your boilerplate I found out that setting setting.passhrough to true within the tile_proxy endpoint did the trick.

Regarding the map drawing you could consider to add at least the div class frame-type-tilemaps_map to the template or layout as this class seems not to bee added automatically in every case.

Amazing! And thank you! Comparing my setup with the one in your boilerplate I found out that setting setting.passhrough to true within the tile_proxy endpoint did the trick. Regarding the map drawing you could consider to add at least the div class frame-type-tilemaps_map to the template or layout as this class seems not to bee added automatically in every case.

Rows
Columns

No Map shown in frontend #1