OpenGIS / Waymark

Waymark adds powerful mapping features to WordPress that are easy to use. Create beautiful, interactive Maps that you can customise to suit your needs.
https://www.waymark.dev
GNU General Public License v2.0
20 stars 6 forks source link

Little Feauture request #21

Closed phrizm closed 11 months ago

phrizm commented 12 months ago

Outstanding plugin.

Little request: I have managed to make some sort button and the map is visualized inside a bootstrap modal. Incredible. I can share my code if needed.

I have long posts and what's about to include a word to marker link? Not fly 2 marker. But instant position change when we reaching a word associated to marker? In this way maps become really more storytellish. I don't know if you have time but this could be really cool Feauture.

Thank you

morehawes commented 12 months ago

Hi @phrizm,

Thanks for the feedback :) Please feel free to share a link to where I can see your modal implementation.

I have long posts and what's about to include a word to marker link? Not fly 2 marker. But instant position change when we reaching a word associated to marker? In this way maps become really more storytellish.

This sounds like an interesting idea.

Something I have considered previously is a feature where you can link to a particular Overlay within a Map using a URL, so that when visited/clicked the Map is "focused" on that particular Overlay. Perhaps this is the "fly 2 marker" you mentioned?

Instant position change when we reaching a word associated to marker

Perhaps I misunderstand, but I believe you are saying that when scrolling the page upon reaching a certain part of the text the Map "focuses" on a specified Marker? Would the Map therefore need always to stay within view when scrolling?

The ability to guide / story tell was a bit part of the original concept for the plugin, so curious to hear any more thoughts on this area.

Cheers,

Joe

phrizm commented 11 months ago

Hello thank you for your feedback.

so this is pretty GPT based, but at least works.

So my theme is bootstrap based (bootscore) and this is my backend function that creates a field to paste shortcut.

function.php


function map_shortcode_meta_box() {
    add_meta_box(
        'map_meta_box', // ID del meta box
        'Inserisci lo Shortcode della Mappa', // Titolo del meta box
        'map_meta_box_callback', // Funzione di callback
        'post', // Post type
        'side', // Context
        'high' // Priority
    );
}
add_action('add_meta_boxes', 'map_shortcode_meta_box');

function map_meta_box_callback($post) {
    // Aggiungi un nonce per sicurezza
    wp_nonce_field('save_map_shortcode', 'map_meta_box_nonce');

    // Ottieni il valore dello shortcode per il post corrente
    $map_shortcode = get_post_meta($post->ID, '_map_shortcode', true);

    // Mostra il campo per inserire lo shortcode
    echo '<textarea style="width:100%" id="map_shortcode" name="map_shortcode">' . esc_attr($map_shortcode) . '</textarea>';
}

function save_map_shortcode($post_id) {
    if (!isset($_POST['map_meta_box_nonce'])) {
        return;
    }

    // Verifica il nonce
    if (!wp_verify_nonce($_POST['map_meta_box_nonce'], 'save_map_shortcode')) {
        return;
    }

    // Verifica se questo non è un salvataggio automatico, che può sovrascrivere i nostri dati
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    // Salva/aggiorna il meta field
    update_post_meta($post_id, '_map_shortcode', sanitize_text_field($_POST['map_shortcode']));
}
add_action('save_post', 'save_map_shortcode');
Its generates this field:
![image](https://github.com/morehawes/waymark/assets/56654610/29fd7637-2eed-4b8b-a9c8-affe51670442)

in my post template: 
```html
<!-- Modale -->
        <div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="mapModalLabel">Mappa</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
              </div>
              <div class="modal-body">
                <?php
                $map_shortcode = get_post_meta(get_the_ID(), '_map_shortcode', true);
                if (!empty($map_shortcode)) {
                  echo do_shortcode($map_shortcode);
                } ?>
              </div>
            </div>
          </div>
        </div>

and my navbar with function:

<nav class="navbar fixed-bottom navbar-light bg-light blogpostbar">
  <div class="container-fluid justify-content-around">
    <div id="prevBtnContainer"><?php custom_wp_link_pages_prev(); ?></div> <!-- Aggiunto qui -->
    <a class="nav-link" data-bs-toggle="modal" data-bs-target="#infoModal">
      <i class="ai-circle-info fs-lg"></i>
    </a>
    <a class="nav-link">
      <i class="ai-note fs-lg" data-bs-toggle="modal" data-bs-target="#tocModal"></i>
    </a>
    <a class="nav-link">
      <i class="ai-map fs-lg" data-bs-toggle="modal" data-bs-target="#mapModal"></i> <!-- Map shortcode -->
    </a>
    <div id="nextBtnContainer"><?php custom_wp_link_pages_next(); ?></div> 
  </div>
</nav>

the final result you can find here:

https://www.northwestalps.com/2023/07/02/ux-ui

just click on the map button placed on bottom navbar.

This is pretty strange work around, but there is no rendering of your (any plugin) from direct shortcode embedding, so i had to make sure it was template passed (i hope you understand what's i mean). And ofcourse its gonna be really hard to embed into everyonce's theme.

But for my case its worked well (i've got some php warnings with query monitor but i can survive with it, no problem on front).

Whats regards storytelling links i found this awesome repo with examples:

https://tomickigrzegorz.github.io/leaflet-examples/#36.story-maps-IntersectionObserver

I think we could as you suggested place a linked word to markers, and they are become visible once we got reached it in viewport.

let me know! :D and sorry for late reply.

morehawes commented 11 months ago

Hi @phrizm,

Thanks for the extra detail. However I was not able to find an example of Waymark on the link you provided :-/

Whats regards storytelling links i found this awesome repo with examples:

https://tomickigrzegorz.github.io/leaflet-examples/#36.story-maps-IntersectionObserver

I think we could as you suggested place a linked word to markers, and they are become visible once we got reached it in viewport.

I will definitely check this out and think more about how I could integrate this into WordPress.

Cheers,

Joe

phrizm commented 11 months ago

Hello re try plz https://www.northwestalps.com/2023/07/02/ux-ui/

morehawes commented 11 months ago

Ah OK, I see it now. I had missed the little Map icon at the bottom. :0)

Looks good!

Joe

phrizm commented 11 months ago

Thank you. It's a little touch. It's not so invasive as a map block in the middle of text.

I will close this discussion since my was just a suggestion.

I have more few ideas for you and they are much easier to implement.

Thank you once again.

morehawes commented 11 months ago

Great! Thanks again for posting, I really do appreciate all input and especially feature suggestions... though sometimes it may take years to get to them if ever :0)

Feel free to create more issues if you think of things that will benefit others.

Cheers,

Joe