Carte openlayer: afficher plusieurs point a partir d'une bdd

Résolu/Fermé

maxou_3753 Messages postés 10 Date d'inscription samedi 25 février 2023 Statut Membre Dernière intervention 27 février 2023 - 25 févr. 2023 à 18:20
maxou_3753 Messages postés 10 Date d'inscription samedi 25 février 2023 Statut Membre Dernière intervention 27 février 2023 - 27 févr. 2023 à 09:59

Bonjour,

Je créer une carte sur un site web avec open layer, j'aimerais pouvoir afficher plusieurs point a partir d'une base de donnée Mysql dans laquelle il y as les coordonnée (longitude et latitude).Après avoir fureté sur un multitude de site et de forum sans trouver de réponse qui me correspond.

Voici mon code pour l'instant qui affiche un point:

  
<?php 

 
$mysqli = new mysqli("mysql-pollucapt.alwaysdata.net", "...", "...",'...');
$result = $mysqli->query("SELECT coord_x FROM coordonnees ORDER BY id DESC LIMIT 1");
$row = $result->fetch_assoc(); 
$coord_x = floatval($row['coord_x']);
$result = $mysqli->query("SELECT coord_y FROM coordonnees ORDER BY id DESC LIMIT 1");
$row = $result->fetch_assoc(); 
$coord_y = floatval($row['coord_y']);
$result = $mysqli->query("SELECT niveau FROM coordonnees ORDER BY id DESC LIMIT 1");
$row = $result->fetch_assoc(); 
$niveau = floatval($row['niveau']);
mysqli_close($mysqli);




?>
        <html>
  
        <head>
        <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    </head>
    <body>

        
        <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
        <div id="map" style="width: 100%; height: 100%px;"></div>
        <script>
             var attribution = new ol.control.Attribution({
                collapsible: false
            });

            var map = new ol.Map({
                controls: ol.control.defaults({attribution: false}).extend([attribution]),
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM({
                            attributions: [ "Pollucat'" ],
                        })
                    })
                ],
                target: 'map',
                view: new ol.View({
                    center: ol.proj.fromLonLat([2.333333, 48.866667]),
                    maxZoom: 18,
                    zoom: 12
                })
            });
        </script>

    <script type='text/javascript'>
      function couleur(a) {
        let result;
        if (a > 1300) {
          result = 'rgba(255, 0, 55, 0.5)';
        }
        else if (a < 900) {
          result = 'rgba(100, 250, 55, 0.5)';
        }
        else {
          result = 'rgba(255, 150, 0, 0.5)';
        }
        return result;
        }
      var layer = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [
            new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([<?php echo $coord_x; ?>,<?php echo $coord_y; ?>]))
            })
          ]
        }),
        style: new ol.style.Style({
          image: new ol.style.Circle({
            radius: 15, 
            fill: new ol.style.Fill({
              color: couleur(<?php echo $niveau; ?>),
            })
          })
        })
      });
      map.addLayer(layer);
    </script>
        

    </body>
</html>

et ici le résultat:

https://pollucapt.alwaysdata.net/carte.php

A voir également:

Carte openlayer: afficher plusieurs point a partir d'une bdd
Carte d'identité - Accueil - Services publics
Pile carte mere - Guide
Changer carte graphique - Guide
Débloquer carte sim sans code puk - Guide
Mettre des points sur une carte - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38457 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mars 2025 4 740
26 févr. 2023 à 09:23

Bonjour

Si tu veux récupérer plusieurs résultats suite à ta requête SQL, il faut commencer par retirer le

LIMIT 1

Ensuite pour pouvoir manipuler le résultat issu de cette requête, il faut utiliser une boucle en PHP.

maxou_3753 Messages postés 10 Date d'inscription samedi 25 février 2023 Statut Membre Dernière intervention 27 février 2023
26 févr. 2023 à 15:09

Bonjour,

Merci pour votre réponse mais mon problème vient plutôt d'open layer je ne sait pas comment afficher beaucoup de point.

Ou alors il faudrait que je puisse exporter ma base de donné en csv et que le fichier soit dans les fichier de mon site pour pouvoir l'exploiter.

Cordialement,

Maxou.

jordane45 Messages postés 38457 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mars 2025 4 740 > maxou_3753 Messages postés 10 Date d'inscription samedi 25 février 2023 Statut Membre Dernière intervention 27 février 2023
26 févr. 2023 à 16:34

https://www.google.com/search?q=openlayer+mysql

maxou_3753 Messages postés 10 Date d'inscription samedi 25 février 2023 Statut Membre Dernière intervention 27 février 2023 > jordane45 Messages postés 38457 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mars 2025
Modifié le 26 févr. 2023 à 16:45

oui mais je n'arrive pas a exporter ma base de données en csv et a ajouter ce fichier avec ceux de mon site.

Il n'est pas question de CSV .... mais de JSON

OpenLayer, il me semble, permet de charger les données en AJAX... Sinon, tu peux toujours constituer un array contenant les données à afficher via ton code php puis le convertir en json pour pouvoir l'utiliser dans openlayer.

Regarde, par exemple, ce lien : https://topic.alibabacloud.com/a/openlayers-add-point-php-request-mysql-database-to-return-geojson-data_1_41_30047550.html

NB: Le code php proposé utilise l'ancienne extension mysql .. il te faudra le corriger pour utiliser mysqli à la place;

Si j'ai bien compris ce code n'affiche qu'un seul point non?

Réponse 2 / 4

jordane45 Messages postés 38457 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mars 2025 4 740
26 févr. 2023 à 20:12

Déjà... merci de poster ton code en utilisant l'icone prévue à cet effet au lieu de mettre des images qu'on ne pourra pas copier/coller pour t'indiquer les erreurs !

Ensuite, regarde la console de ton navigateur ...

Tu verras ceci :

maxou_3753 Messages postés 10 Date d'inscription samedi 25 février 2023 Statut Membre Dernière intervention 27 février 2023
27 févr. 2023 à 09:59

Ah oui merci c'était pas le bon nom de variable.

Merci beaucoup maintenant ça marche.

Réponse 3 / 4

yg_be Messages postés 23509 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 1 avril 2025 Ambassadeur 1 574
25 févr. 2023 à 18:32

bonjour,

quel site utilises-tu pour te former en mysql?

maxou_3753 Messages postés 10 Date d'inscription samedi 25 février 2023 Statut Membre Dernière intervention 27 février 2023
25 févr. 2023 à 19:10

Je cherche un peut partout.

Réponse 4 / 4

maxou_3753 Messages postés 10 Date d'inscription samedi 25 février 2023 Statut Membre Dernière intervention 27 février 2023
Modifié le 26 févr. 2023 à 19:54

je ne sait pas qu'est-ce qu'il faut mettre ici a la place de

-FeatureCollection

-feature

-type

$geojson = array(
   'type'      => 'FeatureCollection',
   'features'  => array()
);

et ici faut-il changer:

var map = new ol.Map({
        layers: [raster, vector],
        target: ‘map‘,
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

Merci pour ton aide précieuse car ça fait une semaine que je cherche une solution.

jordane45 Messages postés 38457 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mars 2025 4 740
26 févr. 2023 à 19:56

Rien.

C'est la suite du code qui permet de récupérer le contenu de la bdd et d'alimenter la variable qui contiendra les coordonnées

chez moi j'ai bien la carte mais sans point:

https://pollucapt.alwaysdata.net/test.php

maxou_3753 Messages postés 10 Date d'inscription samedi 25 février 2023 Statut Membre Dernière intervention 27 février 2023 > maxou_3753 Messages postés 10 Date d'inscription samedi 25 février 2023 Statut Membre Dernière intervention 27 février 2023
26 févr. 2023 à 20:00

et voici ma bdd:

et la les bout de code que j'ai changer:

et:

Discussions similaires

Carte roblox mal gratté illisible

carte Sim reconnue mais aucun service