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