I have a vectorlayer, sundials. I'm trying to adjust the map after adding
the features in a google Geocode callback.
sundials.addFeatures(features);
/* now, adjust the map so that it is reasonable with our new
features */
map.zoomToExtent(sundials.getDataExtent());
/* OH NOES */
Seems that getDataExtent is returning the old extent. There is this event,
featuresadded that seems like it would do the trick; but, it fires every
time I do anything as do the other events for the vectorlayer it seems.
If anyone has any tips or suggestions of any kinds, I would be much obliged.
Here is a complete example:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Google Geocoding with OpenLayers</title>
</head>
<body class="home">
<div id="header">
<div id="tabs">
<button id="getArticles">Get articles!</button>
<form id="getGoogle">
<input type="text" id="addressGoogleSearch">
<button id="getGoogle">Center on Search</button>
</form>
</div>
</div>
<div id="body">
<div id="map" style="width: 100%; height: 600px;"></div>
</div>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"; ></script>
<!-- <script type="text/javascript" src="./pagination.js"></script> -->
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js
"></script>
<script type="text/javascript"src="
http://maps.google.com/maps/api/js?sensor=true";></script>
<!-- <script type="text/javascript" src="
http://www.google.com/uds/api?file=uds.js&v=1.0";></script> -->
<script>
$(function(){
var geocoder;
var map, osm, sundials, select;
var proj = new OpenLayers.Projection("EPSG:4326");
function setMapCenter(map, lon, lat, zoom)
{
var point = new OpenLayers.LonLat(lon, lat);
map.setCenter(point.transform(proj, map.getProjectionObject()), zoom);
}
function getMapCenter(map) {
var point = map.getCenter();
return point.transform(map.getProjectionObject(), proj);
}
function getMapBounds(map) {
var bounds = map.getExtent();
return bounds.transform(map.getProjectionObject(), proj)
}
var style = new OpenLayers.Style({
pointRadius: "${radius}",
fillColor: "#ffcc66",
fillOpacity: 0.8,
strokeColor: "#cc6633",
strokeWidth: 2,
strokeOpacity: 0.8
}, {
context: {
radius: function(feature) {
return Math.min(feature.attributes.count, 9) + 3;
}
}
});
function onPopupClose(evt) {
select.unselectAll();
}
function onFeatureSelectGoogle(event) {
var feature = event.feature;
var cluster = event.feature.cluster;
var content = new String();
content += '<div id="prev">prev</div>';
content += '<div id="next">next</div>';
cluster.forEach(function(feature) {
content += '<div class="cluster">'
content += "<h3>"+feature.attributes.title+"</h3>"
content += '</div>'
});
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(400,150),
content,
null, true, onPopupClose);
popup.autoSize = false;
feature.popup = popup;
map.addPopup(popup);
//simplePagination.init($('div.cluster'));
}
function onFeatureUnselect(event) {
var feature = event.feature;
if(feature.popup) {
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
}
}
function onFeaturesAdded(event) {
console.log(event.type, event);
}
function beforeFeaturesAdded(event){
console.log(event.type, event);
}
function featureAdded(event){
//console.log(event.type, event);
}
/* map events */
function mapEvent(event) {
console.log(event.type, event);
}
function mapBaseLayerChanged(event) {
//console.log(event);
}
function mapLayerChanged(event) {
//console.log(event);
}
function moveEnd(event) {
//console.log(event);
}
$('form#getGoogle').submit(function(){
sundials.features.forEach(function(feature){ feature.destroyPopup();});
var addressGoogleSearch =
document.getElementById('addressGoogleSearch').value;
geocoder.geocode({'address': addressGoogleSearch}, function(results, s)
{
if (s !== "OK") { console.log('search error'); return; }
var features = [];
console.log(results);
results.forEach(function(item){
var lat = item.geometry.location.wa;
var lon = item.geometry.location.ya;
var point = new OpenLayers.Geometry.Point(lon, lat);
point = point.transform(proj, map.getProjectionObject());
features.push(new OpenLayers.Feature.Vector(point, {'title':
item.formatted_address})); // style_mark);
});
sundials.addFeatures(features);
/* now, adjust the map so that it is reasonable with our new
features */
map.zoomToExtent(sundials.getDataExtent());
if (map.zoom > 8) { map.zoomTo(8);}
/* OH NOES */
});
return false;
});
function init() {
map_controls = [
//new OpenLayers.Control.OverviewMap(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.PanZoom(),
//new OpenLayers.Control.PanZoomBar(),
//new OpenLayers.Control.MouseToolbar(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.MouseDefaults(),
//new OpenLayers.Control.Navigation(),
//new OpenLayers.Control.NavigationHistory(),
//new OpenLayers.Control.NavToolbar(),
new OpenLayers.Control.KeyboardDefaults()
];
map = new OpenLayers.Map('map', {
controls: map_controls,
eventListeners: {
"moveend": moveEnd,
"zoomend": mapEvent,
"changelayer": mapLayerChanged,
"changebaselayer": mapBaseLayerChanged
},
//projection: "EPSG:4326"
//projection: "EPSG:900913",
});
osm = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)",
[
"http://a.tile.openstreetmap.org/${z}/${x}/${y}.png
",
"http://b.tile.openstreetmap.org/${z}/${x}/${y}.png
",
"http://c.tile.openstreetmap.org/${z}/${x}/${y}.png";
],
{ numZoomLevels: 19 });
sundials = new OpenLayers.Layer.Vector("features", {
strategies: [
new OpenLayers.Strategy.Cluster()
],
styleMap: new OpenLayers.StyleMap({
"default": style,
"select": {
fillColor: "#8aeeef",
strokeColor: "#32a8a9"
}
})
});
select = new OpenLayers.Control.SelectFeature(sundials);
sundials.events.on({
"featureselected": onFeatureSelectGoogle,
"featureunselected": onFeatureUnselect,
"featuresadded": onFeaturesAdded,
"featureadded": featureAdded,
"beforefeaturesadded": beforeFeaturesAdded,
});
map.addLayers([osm, sundials]);
map.addControl(select);
select.activate();
setMapCenter(map,-90, 40, 1);
geocoder = new google.maps.Geocoder();
}
init();
});
</script>
</body>
</html>
_______________________________________________
Users mailing list
[email protected]
http://lists.osgeo.org/mailman/listinfo/openlayers-users
![http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"](https://c.tile.openstreetmap.org/${z}/${x}/${y}.png"){kind=link}