Get data from map service and send to google script

418
10
Jump to solution
08-19-2019 04:35 PM
Highlighted
New Contributor III

Hello:

I have this service: 

Query: Parcels (ID: 0) 

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

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
Occasional Contributor II

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');

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

to

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

View solution in original post

10 Replies
Highlighted
Esri Contributor

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

Highlighted
Occasional Contributor II

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>
Highlighted
New Contributor III

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

Reply
0 Kudos
Highlighted
Occasional Contributor II

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

Reply
0 Kudos
Highlighted
New Contributor III

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.

Reply
0 Kudos
Highlighted
Occasional Contributor II

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');

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

to

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

View solution in original post

Highlighted
New Contributor III

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.

Highlighted
New Contributor III

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.

Reply
0 Kudos
Highlighted
New Contributor III

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!!");".

Reply
0 Kudos