Welcome, guest! Login / Register - Why register?
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
Your Name: Code Language: