Hi guys,
Please I need your help. I want to move a Marker (that was colocate using a VectorLayer, that works ok), but I can’t do that, yet… Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BD - MARKS - PHP</title>
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="lib/OpenLayers.js"></script>
<script src="OpenStreetMap.js"></script>
<script type="text/javascript">
var map;
var selectControl;
var lat=-3.9912;
var lon=-79.20733;
var zoom=13;
function init(){
map = new OpenLayers.Map("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.LayerSwitcher()
],
maxExtent: new OpenLayers.Bounds(-79.23381,-3.96749,-79.17630,-4.00457),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
projection: new OpenLayers.Projection("EPSG:900913"),
units: 'm',
numZoomLevels: 19,
maxResolution: 'auto'
} );
map.addLayer(new OpenLayers.Layer.OSM.Mapnik("Mapnik"));
var planeStyleMap = new OpenLayers.StyleMap({
externalGraphic: "img/busgrande.png",
graphicWidth: 25,
graphicHeight: 25,
fillOpacity: 0.85
});
vectorLayer = new OpenLayers.Layer.Vector("Just a point...",{styleMap:planeStyleMap});
selectControl = new OpenLayers.Control.SelectFeature(vectorLayer,
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect, hover: false});
map.addControl(selectControl);
selectControl.activate();
map.addLayer(vectorLayer);
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
generateMarkers(vectorLayer);
}
// Generate a random point inside the map area, and add a marker to the list.
function generateMarkers(vectorLayer){
//Calculo y Creación del Punto
var point = new OpenLayers.Geometry.Point(-79.2, -4);
point.transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913"));
var pointFeature = new OpenLayers.Feature.Vector(point,{
poppedup: false
});
alert(pointFeature.geometry.x +";"+pointFeature.geometry.y);
vectorLayer.addFeatures([pointFeature]);
}
function moveFeatures(vectorLayer1){
var features = vectorLayer1.features, selectedPlane = null;
for (var i=features.length-1;i>=0;i--) {
var feature = features[i];
var poppedup = feature.attributes.poppedup;
alert (feature.geometry.x + ";" + feature.geometry.y);
var x = feature.geometry.x + Math.cos(15 * Math.PI / 180) / 5;
var y = feature.geometry.y + Math.sin(15 * Math.PI / 180) / 5;
if (poppedup == true) {
selectControl.unselect(feature);
}
if (vectorLayer.map.getExtent().contains(x, y)) {
var newPoint = new OpenLayers.LonLat(x, y);
feature.move(newPoint);
if (poppedup == true) {
selectControl.select(feature);
}
}
else {
vectorLayer.destroyFeatures([feature]);
feature.destroy();
feature = null;
}
}
//only for simulate moved
setTimeout(function(){moveFeatures(vectorLayer, vectorLayer.features || [])}, 1000);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.AnchoredBubble(null,
new OpenLayers.LonLat(feature.geometry.x, feature.geometry.y),
null,
"<div style='font-size:.8em'>Plane is flying at an angle of " + 15 +
" °<br>Current position is " + Math.round(feature.geometry.x*10000)/10000 + ", " + Math.round(feature.geometry.y*10000)/10000 + "</div>",
null,true, function () { onPopupClose(feature) } );
feature.popup = popup;
feature.attributes.poppedup=true;
map.addPopup(popup);
}
function onPopupClose(feature) {
selectControl.unselect(feature);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.attributes.poppedup = false;
feature.popup = null;
}
</script>
<style type="text/css">
#map {
height: 600px;
width: 800px;
border: 1px solid black;
}
#header button{
margin-right:2em;
}
#header h3{
display: inline;
}
</style>
</head>
<body onload="init()">
<h1 id="title">Ubicación desde la BD</h1>
<p id="shortdesc">
Carga desde una BD-TXT-HTML
</p>
<div id="map" class="smallmap"></div>
<div> <input name="test" type="button" value="Mover" onClick="moveFeatures(vectorLayer)"> </div>
</body>
</html>
I use the function
function moveFeatures(vectorLayer1)
for move the feature but DON’T work.
What is wrong???
Thank u for your help…