knitter.js

// Legacy!
var Knitter = {
  // start storing a layer_type and layer_url in Map model, use it to switch this:
  openlayers_on: false,
  save: {
    state: true,
    saved: function(response) {
      Knitter.save.state = true
      $('save_saved').show()
      $('save_saving').hide()
      $('save_failed').hide()
      //console.log(response)
    },
    submitted: function(response) {
      Knitter.save.state = "saving"
      $('save_saved').hide()
      $('save_saving').show()
      $('save_failed').hide()
    },
    failed: function(response) {
      Knitter.save.state = false
      $('save_saved').hide()
      $('save_saving').hide()
      $('save_failed').show()
      //console.log(response)
    },
  },
  setup: function() {
    Glop.observe('glop:predraw', function() { $C.clear();})
    // disable default "delete" key (in Chrome it goes "back")
    window.addEventListener ('keydown', function (e) {
      // If the key pressed was a backspace key, handle it specially
      if (e.keyIdentifier == 'U+0008' || e.keyIdentifier == 'Backspace') {
        // If the target of the backspace was the body element, handle it specially
        if (e.target == document.body) {
          // Prevent the default Backspace action from happening
          e.preventDefault ();
        }
      }
    }, true);

    var first_new_image = true
    warpables.each(function(warpable,index) {
      if (warpable.nodes != 'none') {
        // nodes as [[lon,lat],[lon,lat]]
        Warper.load_image(warpable.img,warpable.nodes,warpable.id,warpable.locked);
      } else {
        if (first_new_image) Warper.new_image(warpable.img,warpable.id,true);
        else Warper.new_image(warpable.img,warpable.id,true)
        first_new_image = false
      }
    })
    Warper.sort_images()
    Knitter.center_on_warpables()
    if (Config.fullscreen) {
      $('header').hide()
      Config.padding_top = 0
    }
    if (Config.locked == 'true') {
      Warper.locked = true
    }
  },
  init_openlayers: function(format) {
    if (format == 'WMS') {
             map = new OpenLayers.Map('map', { controls: [], 
        projection: spher_merc,
         displayProjection: spher_merc,
               maxExtent: new OpenLayers.Bounds(-180,-90,180,90),  
      });
    } else {
             map = new OpenLayers.Map('map', { controls: [], 
          tileOrigin: new OpenLayers.LonLat(0,0).transform(latlon,spher_merc),
        units: "m",
        projection: latlon,
        //numZoomLevels: 22, 
          displayProjection: spher_merc,
               maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
        //maxResolution: 156543.0339
      });
    }
    Knitter.openlayers_on = true;
  },

  start_openlayers: function(layer,tile_url,tile_layer) {
    if (layer == "none") $('map').hide()
    else $('map').show()
    if (!Knitter.openlayers_on) Knitter.init_openlayers(layer)
    // http://isse.cr.usgs.gov/ArcGIS/services/Combined/TNM_Large_Scale_Imagery/MapServer/WMSServer?request=GetCapabilities&service=WMS
    // http://raster.nationalmap.gov/ArcGIS/rest/services/Combined/TNM_Large_Scale_Imagery/MapServer
    // http://viewer.nationalmap.gov/example/services.html
    Config.tiles = true
    Config.tile_type = layer
    Zoom.interval = 6 
    if (layer == 'google') {
      var gsat = new OpenLayers.Layer.Google("Google Satellite", {
        type: google.maps.MapTypeId.SATELLITE, 
        sphericalMercator: true, 
        numZoomLevels: 23,
        maxZoomLevel: 23
      } );
      map.addLayer(gsat)
      map.layers[0].mapObject.setTilt(0);

      // not sure why nothing else works, but this allows more zooming in!
      map.layers[0].numZoomLevels = 24
      map.layers[0].maxZoomLevel = 24
      map.layers[0].resolutions.push(0.29858214168548586/2,0.29858214168548586/4,0.29858214168548586/8,0.29858214168548586/16)
      map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
      ), 5);

    } else if (layer == 'mapbox') {
      var mapbox = new OpenLayers.Layer.TMS( "MapBox OpenStreetMap",
        [ "http://a.tile.mapbox.com/","http://b.tile.mapbox.com/",
          "http://c.tile.mapbox.com/","http://d.tile.mapbox.com/" ],
        { 'layername': 'mapbox.mapbox-streets', 'type':'jpg',
          'buffer': 0, 'transitionEffect':'resize', 
          attribution: 'rendered by <a href="http://mapbox.com">MapBox</a>, from <a href="http://www.openstreetmap.org/">OpenStreetMap data</a>'} );
      map.addLayer(mapbox)
    } else if (layer == 'osm') {
      var osm = new OpenLayers.Layer.TMS( "OpenStreetMap",
            "http://tile.openstreetmap.org/",
            { type: 'png', 
        numZoomLevels: 23,
        maxZoomLevel: 23,
        getURL: osm_getTileURL, 
        displayOutsideMaxExtent: true, 
        attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
        } 
      );
      map.addLayer(osm)
    } else if (layer == 'bing') {
      var apiKey = "AhYrUtF-jMIlTiblfgB_spQXBgc3u1_4h1mrgm_vEmyrnHLbA8v8452MolECULTX"
      //Only in later versions of OpenLayers: //var bingsat = new OpenLayers.Layer.Bing("Aerial", {type: "Aerial", apiKey:apiKey, sphericalMercator:true});
      var bingsat = new OpenLayers.Layer.VirtualEarth("Virtual Earth Aerial",  {
        'type': VEMapStyle.Aerial, 
        numZoomLevels: 23,
        maxZoomLevel: 23,
        'sphericalMercator': true
      });
      map.addLayer(bingsat)
    } else if (layer == 'yahoo') {
      var yahoosat = new OpenLayers.Layer.Yahoo("Yahoo Satellite", {type: YAHOO_MAP_SAT, sphericalMercator: true, numZoomLevels: 23});
      map.addLayer(yahoosat)
// you can try
// http://hypercube.telascience.org/tilecache/tilecache.py/1.0.0/NAIP_ALL/

// but you might get better performance from newworld which switches
// between bmng/landsat/naip based on zoom level

// http://hypercube.telascience.org/tilecache/tilecache.py/1.0.0/NewWorld_google
    } else if (layer == 'TMS') {
      Config.tile_url = tile_url || Config.tile_url
             var tms = new OpenLayers.Layer.TMS( "OpenLayers TMS", Config.tile_url,
        { //projection: latlon,
          //displayProjection: spher_merc,
          //getURL: Knitter.overlay_getTileURL,
          //maxResolution:156543.0339,
          //units: "m",
                //maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
          //tileOrigin: new OpenLayers.LonLat(0,0).transform(latlon,spher_merc),
          numZoomLevels: 23,
          serviceVersion: '.', 
          layername: '.', 
          type: 'png', 
          alpha: true, 
          isBaseLayer: true});
             map.addLayer(tms);
    } else if (layer == 'WMS') {
      projection: latlon,
      //wms_url = prompt('Enter a WMS URI','http://msrmaps.com/ogcmap.ashx')
      Config.tile_url = tile_url || Config.tile_url
      Config.tile_layer = tile_layer || Config.tile_layer
      map.addLayer(new OpenLayers.Layer.WMS('WMS',Config.tile_url,{
      layers: Config.tile_layer
        //layers:'DOQ'
        //layers:'osm'
      }))
    }

    Glop.observe('glop:draw',function(){$('map').setStyle({height:Glop.height+'px'})})
    if (Config.tile_type == 'WMS') Glop.observe('mouseup',function() {map.layers.first().refresh()})

    // the following is complete nonsense and resolves to a point, not a bbox:
    var lat1 = Projection.y_to_lat(Map.y-Glop.height/2)
    var lon1 = Projection.x_to_lon(Map.x-Glop.width/2)
    var lat2 = Projection.y_to_lat(Map.y+Glop.height/2)
    var lon2 = Projection.x_to_lon(Map.x+Glop.width/2)

    var bounds = new OpenLayers.Bounds();
    bounds.extend(new OpenLayers.LonLat(lon1,lat1))//.transform(spher_merc,latlon))
    bounds.extend(new OpenLayers.LonLat(lon2,lat2))//.transform(spher_merc,latlon))
    //if (warpables.length = 0) 
    map.zoomToExtent( bounds )
    //console.log(lat1,lon1,lat2,lon2)
    //console.log(bounds)
    //console.log('initial extent based on viewport sync with Cartagen')

    //scalebar = new OpenLayers.Control.ScaleBar();
    //map.addControl(scalebar);
      
    if (Config.tile_switcher) {
      var switcherControl = new OpenLayers.Control.LayerSwitcher()
      map.addControl(switcherControl);
      switcherControl.maximizeControl();
    }
    Knitter.openLayersDraw()
    Glop.observe('glop:draw', Knitter.openLayersDraw)
    //Knitter.update_map(Map.lat,Map.lon,Map.zoom,layer)
    setTimeout(Knitter.update_map_to_center,1000)
    
  },

  update_map_to_center: function() {
    loc = Knitter.find_map_center()
    if (loc) Knitter.update_map(loc.lat,loc.lon,loc.zoom,false)
  },

  update_map: function(lat,lon,zoom,layer) {
    Knitter.save.submitted()
    layer = layer || false
    new Ajax.Request('/map/update/'+Knitter.map_id,{
      method: 'get',
      parameters: {
        map: {
          lat: lat,
          lon: lon
        },
        zoom: zoom,
        tiles: layer,
        tile_url: Config.tile_url,
        tile_layer: Config.tile_layer
      },
      onSuccess: Knitter.save.saved,
      on0: Knitter.save.failed,
      onFailure: Knitter.save.failed,
    })
  },

  openLayersDraw: function() {
    if (Config.tile_type == 'WMS') map.moveTo(new OpenLayers.LonLat(Map.lon,Map.lat))
    else map.moveTo(new OpenLayers.LonLat(Map.lon,Map.lat).transform(spher_merc,latlon))

    var left = new OpenLayers.LonLat(map.getExtent().left,map.getExtent().top);
    var right = new OpenLayers.LonLat(map.getExtent().right,map.getExtent().bottom);

    if (Config.tile_type == 'WMS') var convert = Glop.width/124023.4375
    else {
      left = left.transform(spher_merc,latlon);
      right = right.transform(spher_merc,latlon);

      var convert = 124023.4375*Glop.width
    }
    Map.zoom = convert/(right.lon-left.lon)

  },

  overlay_getTileURL: function(bounds) {
          var res = this.map.getResolution();
          var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
          var y = Math.round((bounds.bottom - this.tileOrigin.lat) / (res * this.tileSize.h));
          var z = this.map.getZoom();
    //console.log('getting tile '+z+','+x+','+y)
    if (this.map.baseLayer.name == 'Virtual Earth Roads' || this.map.baseLayer.name == 'Virtual Earth Aerial' || this.map.baseLayer.name == 'Virtual Earth Hybrid') {
            z = z + 1;
          }
    if (mapBounds.intersectsBounds( bounds ) && z >= mapMinZoom && z <= mapMaxZoom ) {
    //console.log( this.url + z + "/" + x + "/" + y + "." + this.type);
      return this.url + z + "/" + x + "/" + y + "." + this.type;
    } else {
      return "http://www.maptiler.org/img/none.png";
    }
  },

  save_new_location: function(lat,lon,zoom) {
    Knitter.save.submitted()
    new Ajax.Request('/map/update/'+Knitter.map_id,{
      method: 'get',
      parameters: {
        lat: lat,
        lon: lon,
        zoom: zoom
      },
      onSuccess: Knitter.save.saved,
      on0: Knitter.save.failed,
      onFailure: Knitter.save.failed,
    })
  },

  save_current_location: function(callback) {
    Knitter.save_new_location(Map.lat,Map.lon,Map.zoom)
    if (!Object.isUndefined(callback)) callback()
  },

  toggle_vectors: function() {
    Config.vectors = !Config.vectors
    $('tagreport').toggle()
    if (Config.vectors) $('tool_vectors').addClassName('down')
    else $('tool_vectors').removeClassName('down')
    if ($('loading_message')) $('loading_message').hide()
    Knitter.save.submitted()
    new Ajax.Request('/map/update/'+Knitter.map_id,{
      method: 'get',
      parameters: {
        lat: Map.lat,
        lon: Map.lon,
        zoom: Map.zoom,
        vectors: Config.vectors
      },
      onSuccess: Knitter.save.saved,
      on0: Knitter.save.failed,
      onFailure: Knitter.save.failed,
    })
  },

  background_transparent: true,
  toggle_background: function() {
    if (Knitter.background_transparent) {
      $('map').removeClassName('transparent');
    } else {
      $('map').addClassName('transparent');
    }
    Knitter.background_transparent = !Knitter.background_transparent
  },

  find_map_center: function() {
    if (warpables.length > 0) { 
      var latsum = 0, lonsum = 0, latcount = 0, loncount = 0
      var maxlat = 0,maxlon = 0,minlat = 0,minlon = 0
      warpables.each(function(warpable){
        if (warpable.nodes != "none") {
          warpable.nodes.each(function(node) {
            var lon = Projection.x_to_lon(-node[0])
            var lat = Projection.y_to_lat(node[1])
            if (maxlon == 0) maxlon = lon
            if (maxlat == 0) maxlat = lat
            if (minlon == 0) minlon = lon
            if (minlat == 0) minlat = lat
            if (lon > maxlon) maxlon = lon 
            if (lat > maxlat) maxlat = lat 
            if (lon < minlon) minlon = lon 
            if (lat < minlat) minlat = lat 
                     lonsum += lon
                     latsum += lat
            loncount += 1
            latcount += 1
              })
        }
      },this)
      zoom = parseInt(-Math.log((maxlon-minlon)/360)/Math.log(2))+2
      if (loncount) {
        return { lat:(maxlat+minlat)/2,
          lon:(maxlon+minlon)/2,
          zoom:zoom,
          width:maxlon-minlon
        }
      } else {
        return false
      }
    } else { return false }
  },
  
  center_on_warpables: function() {
    loc = Knitter.find_map_center()
    if (loc) Cartagen.go_to(loc.lat,loc.lon,loc.zoom)
    // the "+2" is a hack... this equation would work without it if the map were only one tile wide.
    map.zoomTo(parseInt(-Math.log((loc.width)/360)/Math.log(2))+2)
  },

  export_tabs: ['export_intro','export_options'],
  export_hide_tabs: function() {
    Knitter.export_tabs.each(function(tab) {
      $(tab).hide();
      $(tab+'_tab').removeClassName('active');
    })
  },
  export_intro: function() {
    Knitter.export_hide_tabs();
    $('export_normal').show();
    $('export_intro').show();
    $('export_intro_tab').addClassName('active');
  },
  export_options: function() {
    Knitter.export_hide_tabs();
    $('export_normal').show();
    $('export_options').show();
    $('export_options_tab').addClassName('active');
  },
  export_multispectral: function() {
    Knitter.export_hide_tabs();
    $('export_normal').hide();
    $('export_multispectral').show();
    $('export_multispectral_tab').addClassName('active');
  },
  // for now, just used to store the "export progress" checkers, which run every 5 secs and fill up the logs.
  updaters: [],
  cancel_updaters: function() {
    Knitter.updaters.each(function(u){
      u.stop()
    })
  },
}

function osm_getTileURL(bounds) {
  var res = this.map.getResolution();
  var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
  var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
  var z = this.map.getZoom();
  var limit = Math.pow(2, z);
  
  if (y < 0 || y >= limit) {
      return "http://www.maptiler.org/img/none.png";
  } else {
      x = ((x % limit) + limit) % limit;
      return this.url + z + "/" + x + "/" + y + "." + this.type;
  }
}