Experimenting with maps

maptest1

var start_point = [1060, 3360]; // lon, lat, ie x, y (not correct yet)
var map_bbox = [0, 0, 6000, 5000]; // minx, miny, maxx, maxy
var map_zoom = 1;
var minimap_scale = 1/20;

$(document).ready(function() {
  $.geo.proj = null; // images don't use a projection.
  var map = $("#map").geomap({
    center: start_point,
    zoom: map_zoom,
    zoomMin: map_zoom,
    zoomMax: map_zoom,
    shift: 'off',
    scroll: 'off', // or 'zoom' or 'default'.
    tilingScheme: {
      tileWidth: 250,
      tileHeight: 250,
      levels: 1,
      basePixelSize: 1,
      origin: [0,0]
    },
    bboxMax: map_bbox,
    axisLayout: "image",
    services: [
      {
        id: "murray",
        type: "tiled",
        src: function(view) {
          if (view.tile.row < 0 || view.tile.row > 19 ||
              view.tile.column < 0 || view.tile.column > 23) {
              // out of bounds.
              console.log("View out of bounds.", view);
              return null;
          }
          var the_tile = "Map_Tile_" + view.tile.row + "_" + view.tile.column + ".jpg";
          return "images/tiles/" + the_tile;
        },
        attr: "" // insert map credit here.
      }
    ],
    bboxchange : function (e, geo) {
      // todo: check for bounds violation and reverse change to bbox if user
      //       has panned out of the bboxMax area by resetting the centre.
      var new_center = [];
      var box_overflow = false;
      if (geo.bbox[0] < map_bbox[0]) {
        var overshoot = map_bbox[0] - geo.bbox[0];
        console.log('overshoot left by ', overshoot);
        new_center = moveCenterHoriz(map, overshoot);
        box_overflow = true;
      }
      if (geo.bbox[1] < map_bbox[1]) {
        var overshoot = map_bbox[1] - geo.bbox[1];
        console.log('overshoot top by ', overshoot);
        new_center = moveCenterVert(map, overshoot);
        box_overflow = true;
      }
      if (geo.bbox[2] > map_bbox[2]) {
        var overshoot = map_bbox[2] - geo.bbox[2];
        console.log('overshoot right by ', overshoot);
        new_center = moveCenterHoriz(map, overshoot);
        box_overflow = true;
      }
      if (geo.bbox[3] > map_bbox[3]) {
        var overshoot = map_bbox[3] - geo.bbox[3];
        console.log('overshoot bottom by ', overshoot);
        new_center = moveCenterVert(map, overshoot);
        box_overflow = true;
      }
      if (box_overflow) {
        console.log("resetting center to ", new_center);
        map.geomap("option", "center", new_center);
        map.geomap("refresh", true);
        console.log("bbox reset to ", map.geomap("option", "bbox"));
      }
      // update minimap.
      minimap.geomap("empty");
      drawMiniMapBoundingBox(geo.bbox);
    }
  });
  var minimap = $("#minimap").geomap({
    center: scalePoint(start_point, minimap_scale),
    zoom: map_zoom, // irrelevant.
    tilingScheme: null, //< set to null because there are no tiled service, i.e., we're using bboxMax
    bboxMax: scaleBBox(map_bbox, minimap_scale),
    axisLayout: "image",
    mode: "static",
    services: [ {
      id: "inset",
      type: "shingled", // use a shingled service to display a single, unchanging image
      src: function(view) {
        return "images/minimap_250x300.jpg"; //< our src is a single, static image
      }
    } ]
  });
  drawMiniMapBoundingBox(map.geomap("option", "bbox"));
  
  function drawMiniMapBoundingBox(a_bbox) {
    console.log('bbox = ', a_bbox);
    var scaled_bbox = scaleBBox(a_bbox, minimap_scale);
    console.log('scaled_bbox = ', scaled_bbox);
    var poli = bboxToPolygon(scaled_bbox);
    console.log('poli = ', poli);
    minimap.geomap("append", poli);
  }
  
  function scalePoint (a_point, a_scale) {
    return [a_point[0] * a_scale, a_point[1] * a_scale];
  }
  
  function scaleBBox (a_bbox, a_scale) {
    return [a_bbox[0] * a_scale, a_bbox[1] * a_scale,
            a_bbox[2] * a_scale, a_bbox[3] * a_scale];
  }
  
  function moveCenterHoriz(a_map, a_distance) {
    var c = a_map.geomap("option", "center");
    return [c[0] + a_distance, c[1]];
  }
  
  function moveCenterVert(a_map, a_distance) {
    var c = a_map.geomap("option", "center");
    return [c[0], c[1] + a_distance];
  }
  
  function bboxToPolygon (a_bbox) {
    return {
      type: "Polygon",
      coordinates: [ [
        [ a_bbox[0], a_bbox[1] ],
        [ a_bbox[0], a_bbox[3] ],
        [ a_bbox[2], a_bbox[3] ],
        [ a_bbox[2], a_bbox[1] ],
        [ a_bbox[0], a_bbox[1] ]
      ] ]
    }
  }
});