Latest Contributions by 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> <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>

‎12-28-2020

Thanks Blake. How would I implement that within my code? I've searched everywhere for a working example/code but to no avail.

‎12-28-2020

Hello I'm trying to build a wildlife recording form for a charity to collect wildlife sightings data and I would like to use ESRI maps to collect Longitude and Latitude location data. Unfortunately I'm very new to all this so learning on the job! I have an iframe containing the file record_map.php that displays the map (see code below). When I click on the map, I want the the Longitude and Latitude of that location to populate two html form fields in the parent document i.e. <input type="number" id="Longitude" name="Longitude" value=""> and <input type="number" id="Latitude" name="Latitude" value="">. I also need to pin a graphic or point to the selected location on the map 'onclick' and for this to move to a new location if the user clicks a different place on the map? Any help would be very much appreciated. Huge thank you to anyone who can help. Seasons greetings! Steve Here's the code for record_map.php <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"> <script src="https://js.arcgis.com/4.11/"></script> <script type="text/javascript"> //LOAD LAYERS require([ "esri/tasks/Locator", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/BasemapToggle", "esri/widgets/BasemapGallery" ], function(Locator, Map, MapView, Graphic, GraphicsLayer, BasemapToggle, BasemapGallery) { // SET LOCATOR TASK USING WORLD GEOCODING SERVICE var locatorTask = new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); //LOAD INITIAL BASE LAYER TYPE var map = new Map({ basemap: "topo-vector" }); //LOCATE MAP CENTER AND ZOOM LEVEL var view = new MapView({ container: "viewDiv", map: map, center: [19.874268,39.576056], // longitude, latitude zoom: 10 }); //TOGGLE BASE LAYER TYPE var basemapToggle = new BasemapToggle({ view: view, nextBasemap: "satellite" }); //POSITION BASE LAYER TOGGLE view.ui.add(basemapToggle, "bottom-left"); //POSITION BASE LAYER TOGGLE var graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); //FORMAT RECORD POINT STYLE var simpleMarkerSymbol = { type: "simple-marker", color: [220, 53, 69, 1], // orange outline: { color: [255, 255, 255, 1], // white width: 2 } }; var pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); //LOAD OUTLINE POLYGON var polygon = { type: "polygon", rings: [ [ 19.6549, 39.7353 ], [ 19.6549, 39.7353 ] ] }; var simpleFillSymbol = { type: "simple-fill", color: [0, 190, 90, 0.025], // CBC Green, opacity 2.5% outline: { color: [0, 190, 90, 1], width: 1 } }; var polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); //LOAD AND FORMAT CO-ORDINATE WIDGET TO DISPLAY LONG/LAT, SCALE AND ZOOM LEVEL var coordsWidget = document.createElement("div"); coordsWidget.id = "coordsWidget"; coordsWidget.className = "esri-widget esri-component"; coordsWidget.style.padding = "7px 15px 5px"; view.ui.add(coordsWidget, "bottom-right"); function showCoordinates(pt) { var coords = "Latitude " + pt.latitude.toFixed(6) + " | Longitude " + pt.longitude.toFixed(6) + " | Scale 1:" + Math.round(view.scale * 1) / 1 + " | Zoom " + view.zoom; coordsWidget.innerHTML = coords; } view.watch("stationary", function (isStationary) { showCoordinates(view.center); }); view.on("pointer-move", function (evt) { showCoordinates(view.toMap({ x: evt.x, y: evt.y })); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

‎12-22-2020

Hello Could anyone tell me how I would replace the longitude/latitude data which centers the map i.e. var view = new MapView({ container: "viewDiv", map: map, center: [19.874268,39.576056], // longitude, latitude zoom: 10 }); with MYSQL data from a database using .php e.g. var view = new MapView({ container: "viewDiv", map: map, center: [<?= $rLongitude ?>,<?= $rLatitude ?>], // longitude, latitude zoom: 10 }); I'm an absolute ArcGIS beginner so any help much appreciated. Steve

Online Status	Offline
Date Last Visited	‎01-28-2021 03:25 PM

My Ideas

Latest Contributions by SteveCheshire

Placing a point using database values

Re: How to populate Longitude/Latitude form fields 'onclick' and add location marker to map?

How to populate Longitude/Latitude form fields 'onclick' and add location marker to map?

Use database values to center map (php/MYSQL)