topic Re: Get data from map service and send to google script in ArcGIS JavaScript Maps SDK Questions

Get data from map service and send to google script

Anonymous User — Mon, 19 Aug 2019 23:35:56 GMT

Hello:

I have this service:

I want to get the coordinates where AIN or APN is specified and send that to a google map page I have that is locally hosted. The user will enter the AIN or APN on another site I also locally host which will then be sent to the google map page.

A query example:

How do I make a call for this in the script where the user enter the AIN or APN and then send the lat/long to the google map script using the ArcGIS JS API?

ArcGIS REST API

ArcGIS Server with JavaScript API‌

Re: Get data from map service and send to google script

Anonymous User — Tue, 20 Aug 2019 01:22:17 GMT

Hi Brandon,

You can use query task and query the features.

Below is the example and reference

https://developers.arcgis.com/javascript/3/jsapi/querytask-amd.html

https://developers.arcgis.com/javascript/3/jssamples/query_nomap.html

And based on the result, you can make the google map url, and open it with

window.open('[your new url]', '_blank');

This is how you create google map url

https://www.google.com/maps/search/?api=1&query=58.698017,-152.522067

Re: Get data from map service and send to google script

BenElan — Sat, 11 Dec 2021 17:30:53 GMT

Here is a working example using the rest api

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>AIN to Google Maps</title>
    <h1>AIN to Google Maps</h1>
    <button id=requestButton>Request</button>
    <div id="result"></div>

    <script>
        const ain = 272079004031;  // you can change the AIN here
        let url = "http://cache.gis.lacounty.gov/cache/rest/services/LACounty_Cache/LACounty_Parcel/MapServer/0/query?where=AIN+%3D+%" + ain + "%27&t&outFields=LAT_LON&f=pjson";


        const button = document.getElementById("requestButton");
        button.onclick = function () { sendReq() };

        let resultNode = document.getElementById("result");

        function sendReq() {
            fetch(url, {
                method: "GET"
            })
                .then((response) => {
                    if (response.status === 200) {
                        console.log("200 ok");
                        return response.json();
                    }
                })
                .then((results) => {
                    const latlon = results.features[0].attributes.LAT_LON;
                    console.log('results: ', latlon);
                    resultNode.innerHTML = latlon
                    const gmaps = 'https://www.google.com/maps/search/?api=1&query=' + latlon;
                    window.open(gmaps, '_blank');

                })
                .catch((err) => {
                    console.log("failed with: ", err);
                });
        }
    </script>
</head>
<body>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Get data from map service and send to google script

Anonymous User — Thu, 22 Aug 2019 22:39:39 GMT

Thanks Ben. This is awesome. I will have to take a look and see how I can use this with what I am trying to do. Have a good weekend.

Brandon Price

Geographic Information Systems Technician II

Los Angeles County Public Works

(626) 458-7092

bprice@pw.lacounty.gov<mailto:bprice@pw.lacounty.gov>

Your feedback is important to us. We encourage you to complete the

Customer Feedback Form at the following link: http://dpw.lacounty.gov/go/MPMSURVEY

Re: Get data from map service and send to google script

BenElan — Thu, 22 Aug 2019 22:43:34 GMT

If you have any questions about it implementing it for your use case let me know. I'm happy to help.

Re: Get data from map service and send to google script

Anonymous User — Sat, 11 Dec 2021 17:30:56 GMT

I already have a button in place that is running multiple functions from getting the ain value with a text input.

I would like to use something like const ain =$("#text").val(); to get the ain and fetch the lat longs with the url variable you made and send them to a google map script that I am locally hosting directly without adding any lat long results to the inner html. The google map script is very basic.The html and js for it is below. I would need maybe a postmessage to send the lat longs and an event listener to receive them unless there is a better way. I would then have to most likely use the map.setCenter({lat: x, lng: y}); method found in the google map api to re center the map with the coordinates received. The google map is an iframe on the page with the text input that I am trying to update when the user submits an ain value.

    <div id="floating-panel">
      <input id="address" type="textbox" value="900 S Fremont Ave">
      <input id="submit" type="button" value="Search">
    </div>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 18,
          center: {lat: 34.084914, lng: -118.150043},
		  mapTypeId: google.maps.MapTypeId.HYBRID,
		  labels: true,
		  tilt: 0
        });
        var geocoder = new google.maps.Geocoder();

        document.getElementById('submit').addEventListener('click', function() {
          geocodeAddress(geocoder, map);
        });
      }

      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
            });
          } else {
            alert('Search was not successful for the following reason: ' + status);
          }
        });
      }
    </script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Any suggestions would be greatly appreciated. Thanks for the great help Ben.

Re: Get data from map service and send to google script

BenElan — Sat, 11 Dec 2021 17:30:58 GMT

You could try changing this part

.then((results) => {
                    const latlon = results.features[0].attributes.LAT_LON;
                    console.log('results: ', latlon);
                    resultNode.innerHTML = latlon
                    const gmaps = 'https://www.google.com/maps/search/?api=1&query=' + latlon;
                    window.open(gmaps, '_blank');

                })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

.then((results) => {
                    const latlon = results.features[0].attributes.LAT_LON;
                    const arr = latlon.split(',');
                    const y = Double.parseDouble(arr[0]);
                    const x = Double.parseDouble(arr[1]);
                    map.setCenter({lat: x, lng: y})
                })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The 'sendReq()' function I created could be integrated into the button you already have. You could define the url inside of the button function using the ain from the text input like you said above.

Edit: I just saw that the google maps script is separate. In that case you would need to do a post. It may be easier to integrate the two apps if they will be communicating with each other often.

Re: Get data from map service and send to google script

Anonymous User — Mon, 26 Aug 2019 23:24:12 GMT

excellent Ben. This was awesome. I will post the final code soon hopefully. I will just run a function automatically when the postmessage is sent to the separate page.

Re: Get data from map service and send to google script

Anonymous User — Wed, 04 Sep 2019 00:39:17 GMT

Sorry. Just wondering if you had any last suggestions on the postmessage:

I am not sure if the postmessage is being sent because there is no callback although I believe it is going through. The event listener I know is wrong and needs work.

Re: Get data from map service and send to google script

Anonymous User — Wed, 04 Sep 2019 00:42:01 GMT

I am little concerned because nothing happens to the iframe even when I replace the receiveMessage function with the following alert: "alert("Hello! I am an alert box!!");".

Re: Get data from map service and send to google script

Anonymous User — Sat, 11 Dec 2021 17:31:01 GMT

Partial Solution:

from parent:

document.getElementById('street').contentWindow.moveToLoc(latt, lon);‍

to child (to run on receipt):

function moveToLoc(lat, lng){
	    var moveto = new google.maps.LatLng(lat, lng);
	    map.panTo(moveto);
	}‍‍‍‍

I just need to add a marker when the maps re-centers when the moveToLoc function is ran