[OpenLayers-Users] Mapping the globe with OpenLayers

[Jani Patokallio]

On 21 Jul 2008 16:50:25, Ryan Hofschneider wrote:
> On Jul 21, 2008, at 3:18 PM, Paul Spencer wrote:
> > You should be able to set the wrapDateLine property - see the
> > wrapDateLine.html example.
>
> That will work for a 'Layer.WMS' or a 'Layer.MapServer' layer, but for
> your vector layer you'll have to cobble-up something on your own...
>
> I recommend splitting at the 180 boundary, as you mention, and draw  
> multiple representations of each line segment (shifted 0, -360, +360  
> degrees longitude) to make sure that as the user is panning to the  
> left or right the track doesn't disappear.

Thanks!  wrapDateLine works nicely, and after a little head-scratching and
scribbling I came up with this ugly hack that, to my amazement, seems to
render cross-dateline vectors properly:

// Renders the shortest line between two lat,lon points, allowing smooth
// panning across the date line.  NOTE: Requires that x1 < x2.

function drawLine(lineLayer, x1, y1, x2, y2) {
    var sourceNode = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x1, y1));
    var targetNode = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x2, y2));

    if(Math.abs(x1-x2) < 180) {
      var westNode1 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x1-360, y1));
      var westNode2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x2-360, y2));
      var eastNode1 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x1+360, y1));
      var eastNode2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x2+360, y2));
      lineLayer.addNodes([sourceNode, targetNode]);
      lineLayer.addNodes([westNode1, westNode2]);
      lineLayer.addNodes([eastNode1, eastNode2]);
      
    } else {
      var dy = y2 - y1;
      var dx1 = 180 - Math.abs(x1);
      var dx2 = 180 - Math.abs(x2);
      var y = y1 + (dx1 / (dx1 + dx2)) * dy;

      var westNode1 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-540, y));
      var westNode2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x1-360, y1));
      lineLayer.addNodes([westNode1, westNode2]);

      var westNode3 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x2-360, y2));
      var bNode1 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-180, y));
      lineLayer.addNodes([westNode3, bNode1, sourceNode]);

      var eastNode3 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x1+360, y1));
      var bNode2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(180, y));
      lineLayer.addNodes([targetNode, bNode2, eastNode3]);

      var eastNode2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x2+360, y2));
      var eastNode1 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(540, y));
      lineLayer.addNodes([eastNode1, eastNode2]);
    }
  }

So that's two issues solved, and I've decided to render markers and vectors
entirely separately so number 3 doesn't matter either, but these two still
have me stumped:

4) How do I change the style of the lines drawn by PointTrack?  Changing 
the style of the component Points seems to do nothing:  
source/targetNode.style = {strokeColor: '#ff0000', strokeWidth: 10} 
still renders in the default style.

5) Can I render arbitrary text instead of icons on the map?  I'd like to 
label airports with codes (JFK, LHR, NRT, ...), but there are 17,576 of 
them.

Cheers,
-jani