Placing a point using database values

SteveCheshire · ‎12-28-2020

How do I place a marker at a location based on the results of a MYSQL database query?

I'm able to display the values of <?= $rLongitude ?> and <?= $rLatitude ?> as text on the parent webpage using php but how do I use these values within the javascript code to place a point/marker on the map at this location?

i.e. I know I need to change the following line of code....

var point = {
type: \"point\",
longitude: '19.874268',
latitude: '39.576056'
};

with something like...

var point = {
type: \"point\",
longitude: '$rLongitude',
latitude: '$rLatitude'
};

but this doesn't work! Help

Here's my code.

<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="stylesheet" href="./resources/ol.css">
<link rel="stylesheet" href="./resources/ol3-layerswitcher.css">
<link rel="stylesheet" href="./resources/qgis2web.css">

<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
width: 100%;
height: 300px;
}
</style>

<?php
echo "
<script>
require([
\"esri/Map\",
\"esri/views/MapView\",
\"esri/Graphic\",
\"esri/layers/GraphicsLayer\",
\"esri/widgets/BasemapToggle\",
\"esri/widgets/BasemapGallery\",
\"dojo/domReady!\"
], function(Map, MapView, Graphic, GraphicsLayer, BasemapToggle, BasemapGallery) {

var map = new Map({
basemap: \"satellite\"
});

var view = new MapView({
container: \"viewDiv\",
map: map,
center: [19.874268,39.576056], // longitude, latitude
zoom: 16
});";

$query = "SELECT rLongitude, rLatitude FROM cbcrecords WHERE rId = 36";

echo "
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: \"topo-vector\"
});

view.ui.add(basemapToggle, \"bottom-left\");

var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);

var point = {
type: \"point\",
longitude: '19.874268',
latitude: '39.576056'
};

var simpleMarkerSymbol = {
type: \"simple-marker\",
color: [226, 119, 40],
outline: {
color: [255, 255, 255],
width: 2
}
};

var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});

graphicsLayer.add(pointGraphic);

});
</script>";
?>

</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

BlakeTerhune · ‎12-28-2020

I was able to get your code working with some slight alterations to remove extra syntax.

<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="stylesheet" href="./resources/ol.css">
<link rel="stylesheet" href="./resources/ol3-layerswitcher.css">
<link rel="stylesheet" href="./resources/qgis2web.css">

 

<!-- THIS SCRIPT DEFINES THE SIZE OF THE MAP -->
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
width: 100%;
height: 300px;
}
</style>

 

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery",
"dojo/domReady!"
], function(Map, MapView, Graphic, GraphicsLayer, BasemapToggle, BasemapGallery) {

  var map = new Map({
    basemap: "satellite"
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [19.874268,39.576056], // longitude, latitude
    zoom: 16
  });

  var basemapToggle = new BasemapToggle({
  view: view,
  nextBasemap: "topo-vector"
  });

  view.ui.add(basemapToggle, "bottom-left");

  var graphicsLayer = new GraphicsLayer();
  map.add(graphicsLayer);

  var point = {
    type: "point",
    longitude: '19.874268',
    latitude: '39.576056'
  };

  var simpleMarkerSymbol = {
    type: "simple-marker",
    color: [226, 119, 40],
    outline: {
      color: [255, 255, 255],
      width: 2
    }
  };

  var pointGraphic = new Graphic({
  geometry: point,
  symbol: simpleMarkerSymbol
  });

  graphicsLayer.add(pointGraphic);

});
</script>

</head>
<body>
<div id="viewDiv"></div>
</body>
</html>