Hello I have a map with built in dropdown select boxes to narrow down what type of location a visitor is looking for to search throughout all of our program in Oklahoma. Works perfectly but when a user selects a different option the map points to a new center point. The viewpoint does not stay where the user pans/zooms the map.
The JavaScript code is below.
var mapDisplayCategory=0;
var mapDisplayType=0;
function drawmap(){
OpenLayers.Lang.setCode('de');
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [
new OpenLayers.Control.MouseDefaults(),
new OpenLayers.Control.Attribution()],
maxExtent:
new OpenLayers.Bounds(-20037508.34,-20037508.34,
20037508.34, 20037508.34),
numZoomLevels: 1,
maxResolution: 156543,
units: 'meters'
});
// Position and zoom of the map
lon = -98;
lat = 34.09457336926805;
zoom = 6;
checkForPermalink();
// Add layers
layer_markers = new OpenLayers.Layer.Markers("Marker", { projection: new OpenLayers.Projection("EPSG:4326"),visibility: true, displayInLayerSwitcher: false });
layer_vectors = new OpenLayers.Layer.Vector("Drawings", { displayInLayerSwitcher: false } );map.addLayer(layer_vectors);map.addLayer(layer_markers)
layers = new Array();
layer_layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layer_layerMapnik)
layers.push(new Array(layer_layerMapnik,'layer_layerMapnik'));
setLayer(0);
// Jump to the right position and zoom..
jumpTo(lon,lat,zoom);
// Add used maker icons..
genMarkers();
}// end funciton
function getid(id){
return document. getElementById(id);
}
function setType(self){
getid("Categories").options.selectedIndex = 0;
mapDisplayType = self.options[self.selectedIndex].value;
layer_markers.clearMarkers();
genMarkers();
}//end of funciton
function setCategory(self){
var vlu = self.options[self.selectedIndex].value;
if(vlu== 0){
getid("seltypeOption").disabled=0;
}
if(vlu== 1){
getid("seltypeOption").disabled=1;
getid("seltypeOption").options.selectedIndex = 0;
mapDisplayType=0
}
if(vlu== 2){
getid("seltypeOption").disabled=1;
getid("seltypeOption").options.selectedIndex = 0;
mapDisplayType=0;
}
mapDisplayCategory=vlu;
//OpenLayers.clearLayers();
layer_markers.clearMarkers();
genMarkers();
}//end of funciton
function genMarkers(){
var arrayLength = locations.length;
for (var i = 0; i < arrayLength; i++) {
if( (locations[i][5] == mapDisplayCategory && mapDisplayType ==0 ) || ( locations[i][6] == mapDisplayType && mapDisplayCategory == 0 ) ){
console.log("Opening : "+locations[i][2]);
console.log("type : "+locations[i][6] );
console.log("end locaiton : " );
addMarker(layer_markers,locations[i][0],locations[i][1],"<div style=\"line-height:14px\"><b >"+locations[i][2]+"</b><p />"+locations[i][3]+"<br />"+locations[i][4]+"</div>",false, locations[i][5] );
}// if category
}
geometries = new Array();
checkUtilVersion(4);
} //end funciton
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var placesAutocomplete = places({
container: document.querySelector('#address-input')
});
var places = require('places.js');
var placesAutocomplete = places({
container: document.querySelector('#address-input')
});