Psst.. new poll here.
Psst.. new forums here.
Microsoft is blocking us again (TY IP Reputation!) so dont bother with any of their useless mail servers here and just use oauth login instead. Thank the nice Russians for causing that. :)
Paste
Pasted as JavaScript by Takako Tucker ( 14 years ago )
onLoad: function() {
//Data objects
var mapOpts = {
minZoom: 1,
maxZoom: 17 - this.minZoom,
centreLon: -4,
centreLat: 54.6,
pinColour: "yellow",
locationCount: 2,
}
var testOpts = {
layerTitle: "title 1",
layerText: "test 1",
pinColour: "green",
lat: -0.1,
lon: 51.5,
timedUpdate: {
lat: -3.9,
lon: 56.5
}
}
var destinations = {
location1: {
layerTitle: "title 2",
layerText: "test 2",
lat: -0.1,
lon: 51.5
},
location2: {
layerTitle: "title 3",
layerText: "test 3",
lat: -3.9,
lon: 55.5
},
location3: {
layerTitle: "title 4",
layerText: "test 4",
lat: -4.9,
lon: 54.5
}
}
//I have to define which controls I want if I want to disable simple zoom and reset.
var panzoom, slider, drag, navigation, map, tween;
var panzoom = new bOpenLayers.Control.PanPanel();
var slider = new OpenLayers.Control.ZoomSliderPanel({simpleZoom: true});
//drag and navigation needed for dragging
var drag = new OpenLayers.Control.DragFeature();
var navigation = new OpenLayers.Control.Navigation();
//tweening pinpoints
/* var duration = 20;
var callbacks = {
eachStep: this.ZoomStep
};
var tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeOut);
*/
var map = new OpenLayers.Map(
'map',
{
minZoomLevel: mapOpts.minZoom,
maxZoomLevel: mapOpts.maxZoom,
controls: [panzoom, slider, drag, navigation, tween],
onLoad: function() {
/* Use this for a custom tile
var ol_info = new OpenLayers.Layer.Image(
'Test Progress',
'http:../green.png',
this.getBounds(-10, 49.8, 02, 59.4),
new OpenLayers.Size( 49.8, 59.4 ),
{ isBaseLayer: false }
);
this.addLayers([ ol_info ]);
*/
//Add pinpoints
var testRoute = new OpenLayers.Layer.Route( 'Test route', {
style: {
strokeLinecap : "square",
strokeDashstyle: "2 5",
strokeColor: "#000",
strokeOpacity: 1,
strokeWidth: 3,
pointRadius: 0,
pointerEvents: "visiblePainted"
}
});
for (var key in destinations) {
var obj = destinations[key];
testRoute.addDot(map.getPoint(obj.lat,obj.lon), {title: obj.layerTitle, text: obj.layerText, color: mapOpts.pinColour});
}
this.addLayer(testRoute);
//Add the test point
testLocale = new OpenLayers.Layer.PinPoints(testOpts.layerTitle);
tmp = testLocale.addDot(map.getPoint(-0.1, 51.5), { text: testOpts.layerText, color: testOpts.pinColour } );
//Moving the test pinpoint
//create a style for the vector layer
var testStyleMap = new OpenLayers.StyleMap({
externalGraphic: ".../green.png",
graphicWidth: 18,
graphicHeight: 18
});
//create a Vector Layer
var vectorLayer = new OpenLayers.Layer.Vector("Test Geometry Layer", {styleMap: testStyleMap});
//create a feature
//but first get lat...
var geo1 = map.getPoint(testOpts.lat, testOpts.lon);
//and make them into points
var point1 = new OpenLayers.Geometry.Point(geo1.x, geo1.y);
//NOW we create the feature
var feature = new OpenLayers.Feature.Vector(point1);
//add the feature to the vector layer
vectorLayer.addFeatures(feature);
//add the vector layer to the map layer
map.addLayer(vectorLayer);
// Function for timed update
function moveFeatures() {
console.log("Step 2");
/*get ready to pass updated points passed in from the
*while statement and gotten from iterating through
*each key in the destinations obj
*/
var geo2 = map.getPoint(destinationLat[j], destinationLon[j]);
console.log("Step 3");
//set up the new points from geo 2
var newPoint = new OpenLayers.LonLat(geo2.x, geo2.y);
//move the vector to the new points. But how to animate?
feature.move(newPoint);
}
//Iterate through the destinations object
var destinationLat = new Array();
var destinationLon = new Array();
var count = 0;
for (var key in destinations) {
var obj = destinations[key];
destinationLon.push(obj.lon);
destinationLat.push(obj.lat);
count++;
}
var destinationsLength = count;
var i = 0;
var j = 1;
int = setInterval(function() {
moveFeatures(vectorLayer, vectorLayer.features, destinationLat[j], destinationLon[j], i);
i++;
j++;
if (j >= destinationsLength) {
clearInterval(int);
}
}, 3000);
//Dragging
var dragFeature = new OpenLayers.Control.DragFeature(testLocale);
map.addControl(dragFeature);
dragFeature.activate();
//Restrict Map Extent
this.setOptions({
restrictedExtent: this.getBounds(-10, 49.8, 02, 59.4)
});
//Centre the map
this.setCenter( this.getLonLat(mapOpts.centreLon, mapOpts.centreLat), 7);
}
});
}
}
Revise this Paste
Parent: 41977