PDA

View Full Version : Reading and using map coordinates from a json store in OpenLayers



mcshugar
6 Feb 2014, 4:27 PM
Hello all,

I'm very new to programming and a complete novice at code. That said, I was wondering if anyone could help me out. I help manage an online map in openlayers that uses the esri geocoder to zoom the map to addresses. Recently, the esri online geocoder cutoff its old servers and in changing my geocoder portion of the code, I've found that I can't get my map to zoom to retrieved coordinates anymore. Here's the portion of code that uses Ext 3.4 to call up esri and make the map zoom to the retrieved coordinate:

//Geocoding using ESRI
//Adapted from http://projects.bryanmcbride.com/sandbox/OL_geocode.html#
//Searches for streets first
//Then tries world place names

var gcaddressinput = search_string;
//Build URL for address search
var gcstreeturl = 'http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find?text=' + gcaddressinput + '&outFields=region%2CScore&maxLocations=20&outSR=4326&f=pjson';
//Build url for place search
//var gcplaceurl = 'http://geocode.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Places_World/GeocodeServer/findAddressCandidates?SingleLine=' + gcaddressinput + '&outFields=state_abbr%2C+descr&outSR=3857&f=pjson';

//use Ext jsonstore to read the results to a hash
//See the urls above for more info about the data structure
var store = new Ext.data.JsonStore({
autoLoad: true,
root: 'locations',
fields: [{
name: "address",
mapping: "name"
}, {
name: "score",
mapping: "attributes.Score",
type: 'int'
}, {
name: "lon",
mapping: "feature.geometry.x"
}, {
name: "lat",
mapping: "feature.geometry.y"
}, {
name: "state", //we'll also get state, just in case user doesn't input
mapping: "attributes.Region"
}],
sortInfo: {
//sort results by score (100=best match)
field: 'score',
direction: 'DESC'
},
proxy: new Ext.data.ScriptTagProxy({ // this is where it actually queries the geocoding server
url: gcstreeturl
})
});

store.on('load', function() { //do this when the query is done loading
// don't kill the popup yet, we'll do it later
var i = 0;
var record = store.getAt(i);

//first record is best match, but we'll check for state in case user
//didn't input the state and the best match is like 100 Main St, Boise, ID or something
//so, cycle through results till we get to one in MA or we run out of results
while ((record) && !(record.data.state=="Massachusetts")) {
i++;
record = store.getAt(i);
};
markers.clearMarkers(); //if there are markers on the map already, clear them
if(record) {
//if street name query succeeded in MA
//now kill the popup
map.removePopup(loading_popup);
//Zoom to the found address and stick a marker there
var icon = new OpenLayers.Icon('theme/default/img/marker-gold.png', new OpenLayers.Size(21, 25), null);
var lonlat = new OpenLayers.LonLat(record.data.lon, record.data.lat);
map.setCenter(lonlat, 8);
markers.addMarker(new OpenLayers.Marker(lonlat, icon));
//stick the found address under the search box
document.getElementById('measure').innerHTML = record.data.address;
}
});
} // end geocoding section
} // end locate_oneBox()

//***************************************************************************************************

Using firebug I was able to verify that the query to esri is responding succesfully, for example, I searched for an address in Shelburne, MA, and was able to get this response:

stcCallback1001({
"spatialReference": {
"wkid": 4326,
"latestWkid": 4326
},
"locations": [
{
"name": "58 Bridge St, Shelburne, Town of, Massachusetts, 01370",
"extent": {
"xmin": -72.738731000000001,
"ymin": 42.603509000000003,
"xmax": -72.737950999999995,
"ymax": 42.603710999999997
},
"feature": {
"geometry": {
"x": -72.738167966277786,
"y": 42.603641203379937
},
"attributes": {
"region": "Massachusetts",
"Score": 98.530000000000001
}
}
},
{
"name": "59 Bridge St, Shelburne, Town of, Massachusetts, 01370",
"extent": {
"xmin": -72.738151000000002,
"ymin": 42.603499999999997,
"xmax": -72.736811000000003,
"ymax": 42.603729999999999
},
"feature": {
"geometry": {
"x": -72.737924511706012,
"y": 42.603585108167294
},
"attributes": {
"region": "Massachusetts",
"Score": 77.530000000000001
}
}
},
{
"name": "Bridge St, Shelburne, Town of, Massachusetts, 01370",
"extent": {
"xmin": -72.741660999999993,
"ymin": 42.602600000000002,
"xmax": -72.731251,
"ymax": 42.605159999999998
},
"feature": {
"geometry": {
"x": -72.740658552349487,
"y": 42.603654078973648
},
"attributes": {
"region": "Massachusetts",
"Score": 98.530000000000001
}
}
},
{
"name": "Shelburne, Massachusetts",
"extent": {
"xmin": -72.737361000000007,
"ymin": 42.540230000000001,
"xmax": -72.637360999999999,
"ymax": 42.640230000000003
},
"feature": {
"geometry": {
"x": -72.687357678113528,
"y": 42.590231670456319
},
"attributes": {
"region": "Massachusetts",
"Score": 100
}
}
},
{
"name": "East Shelburne, Massachusetts",
"extent": {
"xmin": -72.718030999999996,
"ymin": 42.562080000000002,
"xmax": -72.618031000000002,
"ymax": 42.662080000000003
},
"feature": {
"geometry": {
"x": -72.668028172561321,
"y": 42.612080084429465
},
"attributes": {
"region": "Massachusetts",
"Score": 96.170000000000002
}
}
}
]
});

***************

I seem to have hit a wall with my understanding of the way the Ext works, and can't seem to figure out why my map won't zoom to the coordinates I'm retrieving from Esri.

My apologies if I've broken protocol in posting here, I'm just so new to the Ext community and I didn't know where else to go for answers.

Thanks!