GithubHelp home page GithubHelp logo

Little Feauture request about waymark HOT 7 CLOSED

opengis avatar opengis commented on May 28, 2024
Little Feauture request

from waymark.

Comments (7)

morehawes avatar morehawes commented on May 28, 2024

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

from waymark.

phrizm avatar phrizm commented on May 28, 2024

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.

from waymark.

morehawes avatar morehawes commented on May 28, 2024

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

from waymark.

phrizm avatar phrizm commented on May 28, 2024

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

from waymark.

morehawes avatar morehawes commented on May 28, 2024

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

Looks good!

Joe

from waymark.

phrizm avatar phrizm commented on May 28, 2024

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.

from waymark.

morehawes avatar morehawes commented on May 28, 2024

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

from waymark.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.