Psst.. new poll here.
[email protected] web/email now available. Want one? Go here.
Cannot use outlook/hotmail/live here to register as they blocking our mail servers. #microsoftdeez
Obey the Epel!
Paste
Pasted as JavaScript by Takako Tucker ( 13 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