Ajout des calques de points sur les pages poi
This commit is contained in:
leosw committed
1 parent
6db6090f66
commit
32e8804a5b
5 files changed
+314
-180
No files matched your search
+11
-17
@@ -32,23 +32,17 @@
|
|||||||
var root = "<?=$config['rel_root_folder']?>";
|
var root = "<?=$config['rel_root_folder']?>";
|
||||||
|
|
||||||
// POI icons
|
// POI icons
|
||||||
window.poi_icons = {
|
window.poi_style_map = {
|
||||||
<?php foreach($poi_types as $type) { ?>
|
<?php foreach($poi_types as $k => $t) {
|
||||||
"<?=$type[3]?>": "<?=$config['views_url']?>img/<?=$type[3]?>.svg",
|
$color = isset($t[2]) ? $t[2] : '#ef2929';
|
||||||
<?php } ?>
|
$size = isset($t[6]) ? (int)$t[6] : 16;
|
||||||
"default": "<?=$config['views_url']?>img/default.svg"
|
$shape = isset($t[7]) ? $t[7] : 'square';
|
||||||
};
|
$icon = isset($t[3]) ? $config['views_url']."img/".$t[3].".svg" : $config['views_url']."img/default.svg";
|
||||||
|
?>
|
||||||
window.poi_style_map = {
|
"<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>", icon: "<?=$icon?>" },
|
||||||
<?php foreach($poi_types as $k => $t) {
|
<?php } ?>
|
||||||
$color = isset($t[2]) ? $t[2] : '#ef2929';
|
"default": { color: "#ef2929", size: 16, shape: "square", icon: "<?=$config['views_url']?>img/default.svg" }
|
||||||
// Read size/shape from structure if provided, else fallback to sensible defaults
|
};
|
||||||
$size = isset($t[6]) ? (int)$t[6] : 16;
|
|
||||||
$shape = isset($t[7]) ? $t[7] : 'square';
|
|
||||||
?>
|
|
||||||
"<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>" },
|
|
||||||
<?php } ?>
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
+110
-97
@@ -44,16 +44,16 @@
|
|||||||
<!-- Type selector -->
|
<!-- Type selector -->
|
||||||
<div class="flex_line" id="type_selector">
|
<div class="flex_line" id="type_selector">
|
||||||
<?php foreach($poi_types as $type) { ?>
|
<?php foreach($poi_types as $type) { ?>
|
||||||
<input type="radio" name="poi_type" value="<?=$type[3]?>" id="<?=$type[3]?>" required
|
<input type="radio" name="poi_type" value="<?=$type[3]?>" id="<?=$type[3]?>" required
|
||||||
<?=$poi->poi_type == $type[3] ? 'checked' : ''?>>
|
<?=$poi->poi_type == $type[3] ? 'checked' : ''?>>
|
||||||
<label for="<?=$type[3]?>"><img src="<?=$config['views_url']?>img/<?=$type[3]?>.svg"><br><?=$type[0]?></label>
|
<label for="<?=$type[3]?>"><img src="<?=$config['views_url']?>img/<?=$type[3]?>.svg"><br><?=$type[0]?></label>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Dynamic form data -->
|
<!-- Dynamic form data -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
<?php
|
<?php
|
||||||
$poi_params = $poi->parameters ?? new stdClass();
|
$poi_params = $poi->parameters ?? new stdClass();
|
||||||
?>
|
?>
|
||||||
|
|
||||||
var poi_params = <?= json_encode($poi_params) ?>;
|
var poi_params = <?= json_encode($poi_params) ?>;
|
||||||
@@ -63,133 +63,133 @@ var unsaved = false;
|
|||||||
|
|
||||||
// Stocke les abstracts et les squelettes de formulaire
|
// Stocke les abstracts et les squelettes de formulaire
|
||||||
<?php foreach($poi_types as $type) { ?>
|
<?php foreach($poi_types as $type) { ?>
|
||||||
window["<?=$type[3]?>_abstract"] = "<?=$type[4]?>";
|
window["<?=$type[3]?>_abstract"] = "<?=$type[4]?>";
|
||||||
window["<?=$type[3]?>_jsonform"] = <?=json_encode($type[5])?>;
|
window["<?=$type[3]?>_jsonform"] = <?=json_encode($type[5])?>;
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
// 3 états : 0 = non, 1 = intermédiaire, 2 = oui
|
// 3 états : 0 = non, 1 = intermédiaire, 2 = oui
|
||||||
function update3State(id) {
|
function update3State(id) {
|
||||||
var input = $("input[name="+id+"]");
|
var input = $("input[name="+id+"]");
|
||||||
var label = $("label[for="+id+"]");
|
var label = $("label[for="+id+"]");
|
||||||
|
|
||||||
var v = parseInt(input.val(), 10);
|
var v = parseInt(input.val(), 10);
|
||||||
|
|
||||||
// cycle propre : 0 → 1 → 2 → 0
|
// cycle propre : 0 → 1 → 2 → 0
|
||||||
if (v === 0) v = 1;
|
if (v === 0) v = 1;
|
||||||
else if (v === 1) v = 2;
|
else if (v === 1) v = 2;
|
||||||
else v = 0;
|
else v = 0;
|
||||||
|
|
||||||
input.val(v);
|
input.val(v);
|
||||||
|
|
||||||
label.removeClass("uncheck intermediate check");
|
label.removeClass("uncheck intermediate check");
|
||||||
|
|
||||||
if (v === 0) label.addClass("uncheck");
|
if (v === 0) label.addClass("uncheck");
|
||||||
if (v === 1) label.addClass("intermediate");
|
if (v === 1) label.addClass("intermediate");
|
||||||
if (v === 2) label.addClass("check");
|
if (v === 2) label.addClass("check");
|
||||||
|
|
||||||
unsaved = true;
|
unsaved = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Génère / met à jour le sous-formulaire selon le type
|
// Génère / met à jour le sous-formulaire selon le type
|
||||||
function updateForm(type) {
|
function updateForm(type) {
|
||||||
$("#abstract").html(window[type + '_abstract']);
|
$("#abstract").html(window[type + '_abstract']);
|
||||||
|
|
||||||
var html_form = "";
|
var html_form = "";
|
||||||
var jsonform = window[type + '_jsonform'];
|
var jsonform = window[type + '_jsonform'];
|
||||||
|
|
||||||
$.each(jsonform, function(index, value) {
|
$.each(jsonform, function(index, value) {
|
||||||
var prefix = index.charAt(0);
|
var prefix = index.charAt(0);
|
||||||
var existing = (poi_params && typeof poi_params[index] !== 'undefined')
|
var existing = (poi_params && typeof poi_params[index] !== 'undefined')
|
||||||
? poi_params[index]
|
? poi_params[index]
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
switch (prefix) {
|
switch (prefix) {
|
||||||
case 'b':
|
case 'b':
|
||||||
var cls = 'intermediate';
|
var cls = 'intermediate';
|
||||||
var val = 1;
|
var val = 1;
|
||||||
|
|
||||||
if (existing == 0) {
|
if (existing == 0) {
|
||||||
cls = 'uncheck';
|
cls = 'uncheck';
|
||||||
val = 0;
|
val = 0;
|
||||||
} else if (existing == 2) {
|
} else if (existing == 2) {
|
||||||
cls = 'check';
|
cls = 'check';
|
||||||
val = 2;
|
val = 2;
|
||||||
} else if (existing == -1 || existing === null) {
|
} else if (existing == -1 || existing === null) {
|
||||||
cls = 'intermediate';
|
cls = 'intermediate';
|
||||||
val = 1;
|
val = 1;
|
||||||
}
|
}
|
||||||
html_form +=
|
html_form +=
|
||||||
'<label class="threecb ' + cls + '" for="' + index + '" onclick="update3State(\'' + index + '\')">' +
|
'<label class="threecb ' + cls + '" for="' + index + '" onclick="update3State(\'' + index + '\')">' +
|
||||||
value +
|
value +
|
||||||
'</label>' +
|
'</label>' +
|
||||||
'<input value="' + val + '" type="hidden" name="' + index + '" id="' + index + '"><br>';
|
'<input value="' + val + '" type="hidden" name="' + index + '" id="' + index + '"><br>';
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'n':
|
case 'n':
|
||||||
html_form +=
|
html_form +=
|
||||||
'<div class="flex_line">' +
|
'<div class="flex_line">' +
|
||||||
'<label for="' + index + '">' + value + '</label>' +
|
'<label for="' + index + '">' + value + '</label>' +
|
||||||
'<input min="0" type="number" name="' + index + '" id="' + index + '" ' +
|
'<input min="0" type="number" name="' + index + '" id="' + index + '" ' +
|
||||||
(existing !== null ? 'value="' + existing + '"' : '') +
|
(existing !== null ? 'value="' + existing + '"' : '') +
|
||||||
'>' +
|
'>' +
|
||||||
'</div>';
|
'</div>';
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 't':
|
case 't':
|
||||||
html_form +=
|
html_form +=
|
||||||
'<label for="' + index + '">' + value + '</label>' +
|
'<label for="' + index + '">' + value + '</label>' +
|
||||||
'<textarea name="' + index + '" id="' + index + '">';
|
'<textarea name="' + index + '" id="' + index + '">';
|
||||||
if (existing !== null) {
|
if (existing !== null) {
|
||||||
html_form += String(existing)
|
html_form += String(existing)
|
||||||
.replace(/&/g, "&")
|
.replace(/&/g, "&")
|
||||||
.replace(/</g, "<")
|
.replace(/</g, "<")
|
||||||
.replace(/>/g, ">");
|
.replace(/>/g, ">");
|
||||||
}
|
}
|
||||||
html_form += '</textarea>';
|
html_form += '</textarea>';
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'l':
|
case 'l':
|
||||||
html_form +=
|
html_form +=
|
||||||
'<div class="flex_line">' +
|
'<div class="flex_line">' +
|
||||||
'<label for="' + index + '">' + value + '</label>' +
|
'<label for="' + index + '">' + value + '</label>' +
|
||||||
'<input placeholder="https://" type="url" name="' + index + '" id="' + index + '" ' +
|
'<input placeholder="https://" type="url" name="' + index + '" id="' + index + '" ' +
|
||||||
(existing ? 'value="' + existing + '"' : '') +
|
(existing ? 'value="' + existing + '"' : '') +
|
||||||
'>' +
|
'>' +
|
||||||
'</div>';
|
'</div>';
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
console.log("ERROR: " + index + "'s type is not known");
|
console.log("ERROR: " + index + "'s type is not known");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#specific_form").html(html_form);
|
$("#specific_form").html(html_form);
|
||||||
|
|
||||||
unsaved = false;
|
unsaved = false;
|
||||||
$("#specific_form :input").change(function(){
|
$("#specific_form :input").change(function(){
|
||||||
unsaved = true;
|
unsaved = true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
// Au chargement : générer le formulaire du type actuel
|
// Au chargement : générer le formulaire du type actuel
|
||||||
if (current_poi_type) {
|
if (current_poi_type) {
|
||||||
updateForm(current_poi_type);
|
updateForm(current_poi_type);
|
||||||
}
|
}
|
||||||
unsaved = !is_new;
|
unsaved = !is_new;
|
||||||
|
|
||||||
$('#type_selector label').click(function(){
|
$('#type_selector label').click(function(){
|
||||||
|
|
||||||
if (unsaved === true) {
|
if (unsaved === true) {
|
||||||
if (!confirm("Des changements ont été apportés et vont être supprimés, voulez-vous continuer ?")) {
|
if (!confirm("Des changements ont été apportés et vont être supprimés, voulez-vous continuer ?")) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const type = $(this).attr("for"); // robuste
|
const type = $(this).attr("for"); // robuste
|
||||||
current_poi_type = type;
|
current_poi_type = type;
|
||||||
|
|
||||||
updateForm(type);
|
updateForm(type);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@@ -240,6 +240,19 @@ $( "#name" ).change(function() {
|
|||||||
var poi_type = "<?=$poi->poi_type?>";
|
var poi_type = "<?=$poi->poi_type?>";
|
||||||
var is_new = <?= isset($new) && $new == 1 ? "true" : "false" ?>;
|
var is_new = <?= isset($new) && $new == 1 ? "true" : "false" ?>;
|
||||||
var root = "<?=$config['rel_root_folder']?>";
|
var root = "<?=$config['rel_root_folder']?>";
|
||||||
|
|
||||||
|
// POI icons
|
||||||
|
window.poi_style_map = {
|
||||||
|
<?php foreach($poi_types as $k => $t) {
|
||||||
|
$color = isset($t[2]) ? $t[2] : '#ef2929';
|
||||||
|
$size = isset($t[6]) ? (int)$t[6] : 16;
|
||||||
|
$shape = isset($t[7]) ? $t[7] : 'square';
|
||||||
|
$icon = isset($t[3]) ? $config['views_url']."img/".$t[3].".svg" : $config['views_url']."img/default.svg";
|
||||||
|
?>
|
||||||
|
"<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>", icon: "<?=$icon?>" },
|
||||||
|
<?php } ?>
|
||||||
|
"default": { color: "#ef2929", size: 16, shape: "square", icon: "<?=$config['views_url']?>img/default.svg" }
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -31,8 +31,8 @@
|
|||||||
<h1 class="flex_line">
|
<h1 class="flex_line">
|
||||||
<span class="poi-icon-wrapper" data-tooltip="<?=htmlspecialchars($poi_types[$poi->poi_type][4] ?? '')?>">
|
<span class="poi-icon-wrapper" data-tooltip="<?=htmlspecialchars($poi_types[$poi->poi_type][4] ?? '')?>">
|
||||||
<img class="poi-icon"
|
<img class="poi-icon"
|
||||||
src="<?=$config['rel_root_folder']?>views/img/<?=$poi->poi_type?>.svg"
|
src="<?=$config['rel_root_folder']?>views/img/<?=$poi->poi_type?>.svg"
|
||||||
alt="">
|
alt="">
|
||||||
</span>
|
</span>
|
||||||
<span><?=$poi->name?></span>
|
<span><?=$poi->name?></span>
|
||||||
</h1>
|
</h1>
|
||||||
@@ -100,25 +100,25 @@
|
|||||||
</span>
|
</span>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
$poiFields = $poi_types[$poi->poi_type][5];
|
$poiFields = $poi_types[$poi->poi_type][5];
|
||||||
$poiValues = $poi->parameters ?? [];
|
$poiValues = $poi->parameters ?? [];
|
||||||
|
|
||||||
// Séparer les booléens des autres champs
|
// Séparer les booléens des autres champs
|
||||||
$boolFields = [];
|
$boolFields = [];
|
||||||
$otherFields = [];
|
$otherFields = [];
|
||||||
|
|
||||||
foreach ($poiFields as $key => $label) {
|
foreach ($poiFields as $key => $label) {
|
||||||
if ($key[0] === 'b') {
|
if ($key[0] === 'b') {
|
||||||
$boolFields[$key] = $label;
|
$boolFields[$key] = $label;
|
||||||
} else {
|
} else {
|
||||||
$otherFields[$key] = $label;
|
$otherFields[$key] = $label;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div id="specific_form" class="view-mode">
|
<div id="specific_form" class="view-mode">
|
||||||
<!-- Detail fields -->
|
<!-- Detail fields -->
|
||||||
@@ -166,13 +166,13 @@
|
|||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="bool-grid">
|
<div class="bool-grid">
|
||||||
<?php foreach ($boolFields as $key => $label): ?>
|
<?php foreach ($boolFields as $key => $label): ?>
|
||||||
<?php $icon = $boolIcons[$poiValues[$key] ?? 2]; ?>
|
<?php $icon = $boolIcons[$poiValues[$key] ?? 2]; ?>
|
||||||
<div class="bool-cell">
|
<div class="bool-cell">
|
||||||
<div class="bool-label"><?= $label ?></div>
|
<div class="bool-label"><?= $label ?></div>
|
||||||
<div class="bool-icon"><?= $icon ?></div>
|
<div class="bool-icon"><?= $icon ?></div>
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
@@ -183,9 +183,9 @@
|
|||||||
<div id="comments_photos_gallery" class="gallery">
|
<div id="comments_photos_gallery" class="gallery">
|
||||||
<?php foreach ($poi_comments->objs as $comment) { ?>
|
<?php foreach ($poi_comments->objs as $comment) { ?>
|
||||||
<?php if (!empty($comment->photo) && $comment->is_archive != 't' && $comment->is_public != 'f') { ?>
|
<?php if (!empty($comment->photo) && $comment->is_archive != 't' && $comment->is_public != 'f') { ?>
|
||||||
<a href="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>">
|
<a href="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>">
|
||||||
<img src="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>" title="<?= (mb_strlen($comment->comment) > 50 ? mb_substr($comment->comment, 0, 50) . '...' : $comment->comment) ?>">
|
<img src="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>" title="<?= (mb_strlen($comment->comment) > 50 ? mb_substr($comment->comment, 0, 50) . '...' : $comment->comment) ?>">
|
||||||
</a>
|
</a>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
</div>
|
||||||
@@ -212,7 +212,7 @@
|
|||||||
<textarea id="comment" name="comment" rows="5" placeholder="Votre commentaire"></textarea>
|
<textarea id="comment" name="comment" rows="5" placeholder="Votre commentaire"></textarea>
|
||||||
|
|
||||||
<label for="photo" id="upload-btn">
|
<label for="photo" id="upload-btn">
|
||||||
<i class="fas fa-file-image"></i> Ajouter une photo
|
<i class="fas fa-file-image"></i> Ajouter une photo
|
||||||
</label>
|
</label>
|
||||||
<input type="file" id="photo" name="photo" accept="image/*">
|
<input type="file" id="photo" name="photo" accept="image/*">
|
||||||
</div>
|
</div>
|
||||||
@@ -221,9 +221,9 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.getElementById('photo').addEventListener('change', function() {
|
document.getElementById('photo').addEventListener('change', function() {
|
||||||
document.getElementById('upload-btn').innerHTML = this.files.length
|
document.getElementById('upload-btn').innerHTML = this.files.length
|
||||||
? "<i class='fas fa-check-square'></i> Photo sélectionnée"
|
? "<i class='fas fa-check-square'></i> Photo sélectionnée"
|
||||||
: "<i class='fas fa-file-image'></i> Ajouter une photo";
|
: "<i class='fas fa-file-image'></i> Ajouter une photo";
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -272,11 +272,11 @@
|
|||||||
<div class="comment_content">
|
<div class="comment_content">
|
||||||
<?=$comment->comment_html?>
|
<?=$comment->comment_html?>
|
||||||
|
|
||||||
<?php if (!empty($comment->photo)) { ?>
|
<?php if (!empty($comment->photo)) { ?>
|
||||||
<div class="comment-photo">
|
<div class="comment-photo">
|
||||||
<img src="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>" alt="Photo du commentaire">
|
<img src="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>" alt="Photo du commentaire">
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
@@ -300,7 +300,20 @@
|
|||||||
var poi_lon = <?=$poi->lon?>;
|
var poi_lon = <?=$poi->lon?>;
|
||||||
var poi_type = "<?=$poi->poi_type?>";
|
var poi_type = "<?=$poi->poi_type?>";
|
||||||
var poi_mode = "view";
|
var poi_mode = "view";
|
||||||
var root = "<?=$config['rel_root_folder']?>";
|
var root = "<?=$config['rel_root_folder']?>";
|
||||||
|
|
||||||
|
// POI icons
|
||||||
|
window.poi_style_map = {
|
||||||
|
<?php foreach($poi_types as $k => $t) {
|
||||||
|
$color = isset($t[2]) ? $t[2] : '#ef2929';
|
||||||
|
$size = isset($t[6]) ? (int)$t[6] : 16;
|
||||||
|
$shape = isset($t[7]) ? $t[7] : 'square';
|
||||||
|
$icon = isset($t[3]) ? $config['views_url']."img/".$t[3].".svg" : $config['views_url']."img/default.svg";
|
||||||
|
?>
|
||||||
|
"<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>", icon: "<?=$icon?>" },
|
||||||
|
<?php } ?>
|
||||||
|
"default": { color: "#ef2929", size: 16, shape: "square", icon: "<?=$config['views_url']?>img/default.svg" }
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<?php if ($canViewHistory) { ?>
|
<?php if ($canViewHistory) { ?>
|
||||||
|
|||||||
@@ -104,7 +104,7 @@ $(document).ready(function() {
|
|||||||
return L.icon({
|
return L.icon({
|
||||||
iconUrl: iconUrl,
|
iconUrl: iconUrl,
|
||||||
iconSize: [size, size],
|
iconSize: [size, size],
|
||||||
iconAnchor: [Math.floor(size / 2), size],
|
iconAnchor: [Math.floor(size / 2), Math.floor(size / 2)],
|
||||||
popupAnchor: [0, -size]
|
popupAnchor: [0, -size]
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -251,14 +251,21 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
// helper local : construit un L.Icon en fonction du type et du zoom
|
// helper local : construit un L.Icon en fonction du type et du zoom
|
||||||
function getMarkerIconFor(type, zoom) {
|
function getMarkerIconFor(type, zoom) {
|
||||||
var size = (zoom > 11) ? 32 : 24;
|
var baseSize = 16;
|
||||||
|
if (window.poi_style_map && window.poi_style_map[type] && window.poi_style_map[type].size) {
|
||||||
|
baseSize = window.poi_style_map[type].size;
|
||||||
|
}
|
||||||
|
|
||||||
return L.icon({
|
var size = zoom > 11
|
||||||
iconUrl: window.poi_icons[type],
|
? Math.round(baseSize * 2)
|
||||||
iconSize: [size, size],
|
: Math.round(baseSize * 1.5);
|
||||||
iconAnchor: [Math.floor(size / 2), size],
|
|
||||||
popupAnchor: [0, -size]
|
return L.icon({
|
||||||
});
|
iconUrl: window.poi_style_map[type].icon || window.poi_style_map["default"].icon,
|
||||||
|
iconSize: [size, size],
|
||||||
|
iconAnchor: [Math.floor(size / 2), Math.floor(size / 2)],
|
||||||
|
popupAnchor: [0, -size]
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$.getJSON(
|
$.getJSON(
|
||||||
|
|||||||
+127
-20
@@ -1,40 +1,131 @@
|
|||||||
// Carte des POIs et marqueur principal.
|
// Carte des POIs et marqueur principal.
|
||||||
var mymap;
|
var mymap;
|
||||||
var poi_layer;
|
var poi_layer;
|
||||||
|
var poiApiLayer;
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// Mode : edit (formulaire) ou view (affichage)
|
// Mode : edit (formulaire) ou view (affichage)
|
||||||
var isEdit = (typeof poi_mode === "undefined" || poi_mode === "edit");
|
var isEdit = (typeof poi_mode === "undefined" || poi_mode === "edit");
|
||||||
|
|
||||||
// Différentes couches pour la carte.
|
// ---------------------------------------------------------
|
||||||
|
// Fonds de carte
|
||||||
|
// ---------------------------------------------------------
|
||||||
var topo_maptiler = L.tileLayer(
|
var topo_maptiler = L.tileLayer(
|
||||||
'https://api.maptiler.com/maps/topographique/{z}/{x}/{y}.png?key=Sm8M7mJ53GtYdl773rpi',
|
'https://api.maptiler.com/maps/topographique/{z}/{x}/{y}.png?key=Sm8M7mJ53GtYdl773rpi',
|
||||||
{
|
{
|
||||||
tms: false,
|
tms: false,
|
||||||
attribution: 'Carte © <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a>, Données © <a href="http://www.openstreetmap.org/copyright" target="_blank">Contributeurs OpenStreetMap</a>',
|
attribution: 'Carte © <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a>, Données © <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
|
||||||
tileSize: 512,
|
tileSize: 512,
|
||||||
zoomOffset: -1,
|
zoomOffset: -1,
|
||||||
minZoom: 1
|
minZoom: 1
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
var ign = L.tileLayer(
|
var ign = L.tileLayer(
|
||||||
'https://data.geopf.fr/private/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg&LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&apikey=ign_scan_ws',
|
'https://data.geopf.fr/private/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg&LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
|
||||||
{
|
{
|
||||||
attribution: 'Carte & Connées © <a href="http://ign.fr/" target="_blank">IGN-F/Géoportail</a>'
|
attribution: 'Carte & Connées © <a href="http://ign.fr/" target="_blank">IGN-F/Géoportail</a>'
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
// Couches de base.
|
|
||||||
var baseLayers = {
|
var baseLayers = {
|
||||||
"OpenStreetMap": topo_maptiler,
|
"OpenStreetMap": topo_maptiler,
|
||||||
"IGN France": ign
|
"IGN France": ign
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------
|
||||||
|
// Carte
|
||||||
|
// ---------------------------------------------------------
|
||||||
mymap = L.map('mapid', {
|
mymap = L.map('mapid', {
|
||||||
zoomControl: false,
|
zoomControl: false,
|
||||||
layers: [topo_maptiler]
|
layers: [topo_maptiler],
|
||||||
|
minZoom: 10
|
||||||
}).setView([47, 3], 6);
|
}).setView([47, 3], 6);
|
||||||
|
|
||||||
$("#map-credits").html(topo_maptiler.getAttribution());
|
$("#map-credits").html(topo_maptiler.getAttribution());
|
||||||
|
|
||||||
|
// ---------------------------------------------------------
|
||||||
|
// Icônes / markers issus de poi/api_bbox
|
||||||
|
// ---------------------------------------------------------
|
||||||
|
function getMarkerIconFor(type, zoom) {
|
||||||
|
var baseSize = 16;
|
||||||
|
if (window.poi_style_map && window.poi_style_map[type] && window.poi_style_map[type].size) {
|
||||||
|
baseSize = window.poi_style_map[type].size;
|
||||||
|
}
|
||||||
|
|
||||||
|
var size = zoom > 11
|
||||||
|
? Math.round(baseSize * 2)
|
||||||
|
: Math.round(baseSize * 1.5);
|
||||||
|
|
||||||
|
return L.icon({
|
||||||
|
iconUrl: window.poi_style_map[type].icon || window.poi_style_map["default"].icon,
|
||||||
|
iconSize: [size, size],
|
||||||
|
iconAnchor: [Math.floor(size / 2), Math.floor(size / 2)],
|
||||||
|
popupAnchor: [0, -size]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshPoiApiLayer() {
|
||||||
|
var b = mymap.getBounds();
|
||||||
|
|
||||||
|
$.getJSON(
|
||||||
|
root + "poi/api_bbox",
|
||||||
|
{
|
||||||
|
north: b.getNorth(),
|
||||||
|
south: b.getSouth(),
|
||||||
|
east: b.getEast(),
|
||||||
|
west: b.getWest()
|
||||||
|
},
|
||||||
|
function(pois) {
|
||||||
|
if (poiApiLayer) {
|
||||||
|
mymap.removeLayer(poiApiLayer);
|
||||||
|
}
|
||||||
|
|
||||||
|
poiApiLayer = L.layerGroup();
|
||||||
|
|
||||||
|
const pathParts = window.location.pathname.split('/');
|
||||||
|
const poiIndex = pathParts.indexOf('poi');
|
||||||
|
const currentPermalink = (poiIndex !== -1 && pathParts[poiIndex + 1])
|
||||||
|
? decodeURIComponent(pathParts[poiIndex + 1])
|
||||||
|
: null;
|
||||||
|
|
||||||
|
pois.forEach(function(poi) {
|
||||||
|
if (currentPermalink && poi.permalink === currentPermalink) {
|
||||||
|
return; // ne pas afficher le POI courant
|
||||||
|
}
|
||||||
|
|
||||||
|
var markerIcon = getMarkerIconFor(poi.type, mymap.getZoom());
|
||||||
|
|
||||||
|
var marker = L.marker(
|
||||||
|
[poi.lat, poi.lon],
|
||||||
|
{ icon: markerIcon }
|
||||||
|
);
|
||||||
|
|
||||||
|
marker.bindTooltip(
|
||||||
|
poi.name,
|
||||||
|
{
|
||||||
|
direction: "top",
|
||||||
|
offset: [0, -10],
|
||||||
|
opacity: 0.9,
|
||||||
|
className: "poi-tooltip"
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
marker.on("click", function() {
|
||||||
|
window.location = root + "poi/" + poi.permalink;
|
||||||
|
});
|
||||||
|
|
||||||
|
poiApiLayer.addLayer(marker);
|
||||||
|
});
|
||||||
|
|
||||||
|
poiApiLayer.addTo(mymap);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------
|
||||||
|
// Contrôles
|
||||||
|
// ---------------------------------------------------------
|
||||||
L.control.scale({
|
L.control.scale({
|
||||||
position: "bottomleft",
|
position: "bottomleft",
|
||||||
imperial: false
|
imperial: false
|
||||||
@@ -70,22 +161,28 @@ $(document).ready(function() {
|
|||||||
poiicon = L.icon({
|
poiicon = L.icon({
|
||||||
iconSize: [24, 24],
|
iconSize: [24, 24],
|
||||||
iconAnchor: [12, 12],
|
iconAnchor: [12, 12],
|
||||||
iconUrl: root + "views/img/" + poi_type + ".svg"
|
iconUrl: root + "views/img/" + poi_type + ".svg"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (poiicon) {
|
if (poiicon) {
|
||||||
poi_layer = L.marker([startLat, startLon], {draggable: isEdit, icon: poiicon}).addTo(mymap);
|
poi_layer = L.marker([startLat, startLon], { draggable: isEdit, icon: poiicon }).addTo(mymap);
|
||||||
} else {
|
} else {
|
||||||
poi_layer = L.marker([startLat, startLon], {draggable: isEdit}).addTo(mymap);
|
poi_layer = L.marker([startLat, startLon], { draggable: isEdit }).addTo(mymap);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isEdit) {
|
if (isEdit) {
|
||||||
// Mise à jour des coordonnées à chaque déplacement.
|
poi_layer.bindTooltip("Glissez moi au bon endroit.", { permanent: true, direction: 'auto' }).openTooltip();
|
||||||
poi_layer.bindTooltip("Glissez moi au bon endroit.", {permanent: true, direction: 'auto'}).openTooltip();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Centrage sur la cabane actuelle
|
||||||
|
if (typeof poi_lat !== "undefined" && typeof poi_lon !== "undefined") {
|
||||||
|
mymap.setView([poi_lat, poi_lon], 14);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------
|
||||||
// Interactions uniquement en mode édition
|
// Interactions uniquement en mode édition
|
||||||
|
// ---------------------------------------------------------
|
||||||
if (isEdit) {
|
if (isEdit) {
|
||||||
mymap.on('click', function(e){
|
mymap.on('click', function(e){
|
||||||
poi_layer.setLatLng(e.latlng);
|
poi_layer.setLatLng(e.latlng);
|
||||||
@@ -98,8 +195,7 @@ $(document).ready(function() {
|
|||||||
$("#elevation_icon").show();
|
$("#elevation_icon").show();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Si l'utilisateur modifie les champs lat/lon manuellement.
|
$("#lat,#lon").change(function() {
|
||||||
$("#lat,#lon").change(function() { // If the user changes the lat/lon input values manualy
|
|
||||||
if(isNaN($("#lat").val()) || isNaN($("#lon").val()) || $("#lat").val().length==0 || $("#lon").val()==null)
|
if(isNaN($("#lat").val()) || isNaN($("#lon").val()) || $("#lat").val().length==0 || $("#lon").val()==null)
|
||||||
$("#elevation_icon").hide();
|
$("#elevation_icon").hide();
|
||||||
else {
|
else {
|
||||||
@@ -119,7 +215,6 @@ $(document).ready(function() {
|
|||||||
poi_layer.setIcon(editPoiIcon);
|
poi_layer.setIcon(editPoiIcon);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Chargement de l'altitude via le proxy.
|
|
||||||
$("#elevation_icon").click(function(e) {
|
$("#elevation_icon").click(function(e) {
|
||||||
$(this).find($(".fas")).removeClass('fa-search-location').addClass('fa-spinner').addClass('fa-spin');
|
$(this).find($(".fas")).removeClass('fa-search-location').addClass('fa-spinner').addClass('fa-spin');
|
||||||
$.get(root+"poi/elevation_proxy", {location:$("#lat").val()+","+$("#lon").val()}, function(result){
|
$.get(root+"poi/elevation_proxy", {location:$("#lat").val()+","+$("#lon").val()}, function(result){
|
||||||
@@ -127,10 +222,22 @@ $(document).ready(function() {
|
|||||||
$("#elevation_icon").find($(".fas")).removeClass('fa-spinner').removeClass('fa-spin').addClass('fa-search-location');
|
$("#elevation_icon").find($(".fas")).removeClass('fa-spinner').removeClass('fa-spin').addClass('fa-search-location');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
|
||||||
// Mode affichage : centrer sur le POI si coordonnées présentes
|
|
||||||
if (typeof poi_lat !== "undefined" && typeof poi_lon !== "undefined") {
|
|
||||||
mymap.setView([poi_lat, poi_lon], 14);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
// ---------------------------------------------------------
|
||||||
|
// Rechargement du calque depuis poi/api_bbox
|
||||||
|
// ---------------------------------------------------------
|
||||||
|
mymap.on("zoomend", function() {
|
||||||
|
if (mymap.getZoom() >= 10) {
|
||||||
|
refreshPoiApiLayer();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
mymap.on("moveend", function() {
|
||||||
|
if (mymap.getZoom() >= 10) {
|
||||||
|
refreshPoiApiLayer();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
refreshPoiApiLayer();
|
||||||
|
});
|
||||||
Reference in new issue
Block a user