Discussion :

[Lunesti]

Bonjour,

J'ai initialement trouvé la réponse à mon problème dans un autre post mais je me suis rendu compte qu'il fallait que je m'y prenne autrement donc je crée un nouveau sujet car la problématique est différente.

Je réalise une API dans laquelle je vais insérer des marqueurs, chaque marqueur aura sa propre location (name, latitude, longitude).

j'insert ces données dans ma base , je les récupère en encodant le tout en JSON et via JS je parcours ce même JSON via une boucle for pour insérer les marqueurs. .

Içi j'encode mes données :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<?php
echo json_encode($listMarker);

Ce qui fonctionne bien mais j'aimerais pouvoir aussi insérer des images. n'ayant pas inséré des images dans ma base (ce serait trop volumineux) il fallait que je trouve un autre moyen.

après quelques recherches j'ai mis en place ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
echo "[";
foreach($listMarker as $data) :
 
 echo <<<END
 {
    "name" : "$data->location_name",
    "latitude" : "$data->latitude",
    "longitude" : "$data->longitude"
    "image" : "url"
 },
END;
 
endforeach;
echo "]";

Etr voici ce que j'obtiens :



Sauf qu'à la toute fin il y a une virgule que je n'arrive pas du tout à faire disparaitre. Si vous avez la solution merci de bien vouloir m'aider ...

[mathieu]

quand vous marquez "url" dans le code, c'est juste un exemple ou bien vous mettez vraiment le même URL pour chaque élément ?

[Lunesti]

Il s'agit juste d'un exemple.


D'ailleurs merci je viens de me rendre compte grâce à ta réflexion que je ne pourrais pas utiliser le même url pour chaque élément...

Mais le problème c'est que ma base ne contient pas les images car ça sinon serait beaucoup trop volumineux. Il faut que je trouve le moyen que chacune de mes locations puisse avoir leur propre URL d'image.

J'avais pour idée d'avoir en base le nom de mes images puis de les récupérer sous forme d'URL, mais je ne vois toujours pas comment implémenter ces URL pour chaque marqueur, en sachant que mes marqueurs sont implémenté via une boucle et que je n'y ai pas accès une par une.


Je ne sais pas si c'est clair en tout cas n'hésitez pas à me poser des question si ça n'est pas le cas ^^

[mathieu]

ce qui se fait habituellement c'est de stocker le nom du fichier de l'image dans un champ de la table.
donc ensuite quand vous lisez le contenu de la table, vous avez longitude, latitude et nom du fichier pour chaque élément.

[Lunesti]

Merci, tu m'as mis sur la piste, ce que j'ai fait est que j'ai écrit l'URL de l'image directement dans ma base de donnée, puis je récupère les données de l'image en JS et je fait le lien avec le DOM

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function initMarkers() {
 
    var map = L.map('map').setView([34.886306, 134.379711], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 
    }).addTo(map);
 
    this.ajaxGet('http://localhost/Tokyo/TokyoAPI/index.php?action=json_data', (reponse) => {
        let datas = JSON.parse(reponse);
        for (const data of datas) {
            console.log(data.location_name);
 
            //Coordonnées
            let coords = {
                latitude: data.latitude,
                longitude: data.longitude
            }
 
            L.marker(Object.values(coords, data.img), {
                    "data": coords,
                    "img": img
                })
                .addTo(map)
                .on("click", function(){
                    document.querySelector(".image").style.display = "block";
                    let img = document.querySelector('.img');
                    img.src = data.img;                    
                })
                .bindPopup(data.location_name)
                .openPopup();
        }
    });
}
initMarkers();

Sujet Résolu

[CosmoKnacki]

Sinon pour générer le tableau json sans virgule finale (avec l'url des images présentes dans la base de données), j'aurais écrit ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$format = '{
    "name":"%s",
    "latitude":"%s",
    "longitude":"%s",
    "image":"%s"
}';
 
$json_objects = array_map(
    fn($data) =>
        sprintf(
            $format,
            $data->location_name,
            $data->latitude,
            $data->longitude,
            $data->url
        ),
    $listMarker
);
 
echo '[', implode(',', $json_objects), ']';

L'implode garantissant qu'il n'y aura pas de virgule à la fin.