简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Mapbox JS to get longitude and latitude from PHP MySql
P粉316110779
P粉316110779 2024-01-07 10:38:48
0
1
482

SOLVED - See answer below

I have a MySql database named "locationLogs" and a table named "locations". I have a page called map.php that displays a map (using the Mapbox GLJS API). Then I want to add a marker for each location in the "Locations" table. The table consists of "id", "longitude" and "latitude". Then I used a while loop to try this. However, when going to that page, it just shows blank and doesn't load a map or anything. My page code is as follows. 

<html lang='en'>
<head>
    <meta charset='utf-8' />
    <title>Live Map</title>
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .marker {
  background-image: url('mapbox-icon.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

    </style>
</head>
<body>

<div id='map'></div>

<script>

mapboxgl.accessToken = 'MY_ACCESS_TOKEN';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-96, 37.8],
  zoom: 3
});

// code from the next step will go here!
<?php

$conn = mysql_connect("localhost", "DB_USER", "DB_PASS");

if (!$conn) {
    echo "Unable to connect to DB: " . mysql_error();
    exit;
}

if (!mysql_select_db("locationLogs")) {
    echo "Unable to select mydbname: " . mysql_error();
    exit;
}

$sql = "SELECT *
        FROM locations";

$result = mysql_query($sql);

if (!$result) {
    echo "Could not successfully run query ($sql) from DB: " . mysql_error();
    exit;
}

if (mysql_num_rows($result) == 0) {
    echo "No rows found, nothing to print so am exiting";
    exit;
}

?>


const geojson = {
  type: 'FeatureCollection',
  features: [
      <?php
      while ($row = mysql_fetch_assoc($result)) {
    echo '
    {
        type: "Feature",
        geometry: {
            type: "Point",
            coordintes: [' . $row['longitude'] . ', ' . $row['latitude'] . ']
        },
        properties {
            title: "Location",
            description: "A cool location",
        }
    },';
    
}

mysql_free_result($result);
?>
  ]
};

// add markers to map
for (const feature of geojson.features) {
  // create a HTML element for each feature
  const el = document.createElement('div');
  el.className = 'marker';

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);
}


</script>

</body>
</html>

P粉316110779
P粉316110779

reply all(1)
P粉821808309
P粉8218083092024-01-08 00:58:16 1 floor

I had to rewrite a lot of code to get it to work. I'll attach the complete code file below. The database structure is:

Table: Location

id longitude latitude display name display description

?>



    
    Live Map
    
    
    sssccc
    
    sssccc
    






sssccc
connect_errno ) {
            printf("Connect failed: %s
", $mysqli->connect_error);
            exit();
         }
         printf('Connected successfully.
');
         $sql = "SELECT * FROM location";
         
         $result = $mysqli->query($sql);
           
         if ($result->num_rows > 0) {
         } else {
            printf('Unexpected Error. DB did not return enough values for a successful export.
');
         }

?>

sssccc
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！