Placing a point using database values

SteveCheshire — Mon, 28 Dec 2020 17:29:18 GMT

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>

Re: Placing a point using database values

BlakeTerhune — Mon, 28 Dec 2020 17:55:46 GMT

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">  <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>

topic Placing a point using database values in ArcGIS JavaScript Maps SDK Questions

Placing a point using database values

Re: Placing a point using database values