I would like to set the map with dynamic centering and well as dynamic map markers
As soon as I set the zoom, zoom delta, lat, lng, to dynamic attributes, I get a console error of Error: Set map center and zoom first
The one way I can find to get around the error is by adding a conditional region around the component checking that the server action has finished loading first.
Then the error goes away and the map loads and centers to my dynamic atrtibutes.
The issue now is that the dynamic markers stop working as soon as the component is inside a conditional region.
The only other way I have found without using a conditional region is to leave the map with default centering values, and set a flyTo onsuccess event of the server action.
Has anyone else tried such a thing and experienced any issues like I am having.
I think that this behavior looks normal and expected...
By the time that dom is loaded the map is searching for these values and they are not available yet...
It reminds me of the way we handle a user avatar (image).
I would handle it the same way as this described above!!
Sadly the bigger issue for me, is that much of my app works on conditional regions, and I just can not seem to get this working with conditional regions, making me crazy.
We better wait for George, Patrick or Teodor to tell us if this is the expected behavior or maybe a workaround on this...
But I would go with loading everything related to the map (map center, zoom, markers etc) on the related serverconnect success. Is that a doable workaround?
Have an update where the defaults for latitude/longitude/zoom are set, so when using dynamic attributes it will initial use these defaults until the dynamic data is available.
You would have to reinitialise the map (when the condition is met) as the Conditional Region is not rendered in the DOM. Why not use a Show/Hide and that way should all be fine... Conditional offers no extra layer of security as it is still in the source (if that was the thought behind using a Conditional Region for the map?). Or am I talking out of my rear-end?
Suppose you could use a Flow to resize/initialise (invalidateSize option in Leaflet) the map after a short Wait period upon an event for whatever triggers the Condition to be met?
I will give that a try, I did already have to do an invalidate size on it after putting it inside a tab content pane.
My reason half my app works with conditionals is mainly for SEO, but here I may also be talking out my rear end, as I think that in a conditional google will not see the text and try to index it on every single page of the SPA.
You can designate textual parts of an HTML page not to be used as a snippet. This can be done on an HTML-element level with the data-nosnippet HTML attribute on span, div, and section elements. The data-nosnippet is considered a boolean attribute. As with all boolean attributes, any value specified is ignored. To ensure machine-readability, the HTML section must be valid HTML and all appropriate tags must be closed accordingly.
<p>This text can be shown in a snippet
<span data-nosnippet>and this part would not be shown</span>.</p>
<div data-nosnippet>not in snippet</div>
<div data-nosnippet="true">also not in snippet</div>
<div data-nosnippet="false">also not in snippet</div>
<!-- all values are ignored -->
<div data-nosnippet>some text</html>
<!-- unclosed "div" will include all content afterwards -->
<mytag data-nosnippet>some text</mytag>
<!-- NOT VALID: not a span, div, or section -->
<p>This text can be shown in a snippet.</p>
<div data-nosnippet>
<p>However, this is not in snippet.</p>
<ul>
<li>Stuff not in snippet</li>
<li>More stuff not in snippet</li>
</ul>
</div>
Documented here (about two thirds of the way down):
We do this so our snippets are always accurate and nothing we do not want to show is ever displayed in Google search results. We had a problem where some modal content and other hidden elements were being rendered as snippets is results (including un-rendered content).
*Snippet being the text Google displays in search results (example below).
