Welcome, guest! Login / Register - Why register?
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 torchOpts = {
                       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(
                           'Torch 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 torch 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 torch
                           //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

Children: 41978
Your Name: Code Language: