Comments (7)
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.
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.
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.
Hello re try plz
https://www.northwestalps.com/2023/07/02/ux-ui/
from waymark.
Ah OK, I see it now. I had missed the little Map icon at the bottom. :0)
Looks good!
Joe
from waymark.
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.
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)
- Better Map Interaction Handling HOT 1
- Uncaught TypeError: Assignment to constant variable. HOT 4
- Add PHP8+ support HOT 3
- Cannot get to load the elevation profile HOT 1
- Full screen / jump to top of the page HOT 1
- Custom css class for maps.
- Header / details removal. HOT 2
- Elevation stopped working HOT 2
- Website Fails to Load When Adding Multiple Cards to a Collection Using a Shortcode HOT 4
- Feature Request: Ability to change elevation units on a per map basis HOT 3
- Feauture request: Custom Markers (styling part) and some other stuff HOT 2
- Problem on Map duplication HOT 2
- map_zoom option in shortcode doesn't work HOT 1
- Error on adding new setting HOT 1
- Nothing happen on "live" images uploading on map marker HOT 6
- Discussion HOT 4
- Clustering of multiple waymark types HOT 4
- Ascent and descent values too high HOT 2
- Bug: Export only including one Marker HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from waymark.