fixed tile issues

index.html

@@ -29,9 +29,6 @@
 
   <ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' events='map.events' control='map.control'>
 
-    <!-- Base map tiles from Ser Mountain Goat -->
-    <ui-gmap-map-type options='map.smgMapType'></ui-gmap-map-type>
-
     <!-- Location Markers -->
     <ui-gmap-markers
       models='mapModels.towns'
@@ -106,7 +103,7 @@
       icons="''"
       idkey="'key'">
     </ui-gmap-polylines>
-    <ui-gmap-polylines
+    <!-- <ui-gmap-polylines
       ng-if="state=='edit'"
       models='mapModels.editablePaths'
       path="''"
@@ -115,7 +112,7 @@
       editable="''"
       icons="''"
       idkey="'key'">
-    </ui-gmap-polylines>
+    </ui-gmap-polylines> -->
 
   </ui-gmap-google-map>
 
@@ -136,9 +133,9 @@
       <button class="list-group-item btn-clear" ng-click="toState('about')" ng-class="{highlight:(state=='about')}">
         <i class="glyphicon glyphicon-question-sign"></i>
       </button>
-      <button class="list-group-item btn-clear" ng-click="toState('edit')" ng-class="{highlight:(state=='edit')}">
+      <!-- <button class="list-group-item btn-clear" ng-click="toState('edit')" ng-class="{highlight:(state=='edit')}">
         <i class="glyphicon glyphicon-pencil"></i>
-      </button>
+      </button> -->
     </div>
   </div>
 

js/controller.js

@@ -1,6 +1,6 @@
 angular.module('quartermaester')
 
-.controller("mapCtrl", function($scope, $filter, $timeout, uiGmapGoogleMapApi, smgMapType, qmCsv) {
+.controller("mapCtrl", function($scope, $filter, $timeout, uiGmapGoogleMapApi, qmCsv) {
 
     var qmData = {};
     $scope.state = "slider";
@@ -33,7 +33,6 @@ angular.module('quartermaester')
         click: mapClick
       },
       control: {},
-      smgMapType: smgMapType,
       locationClick: locationClick,
       heraldryClick: heraldryClick,
       characterClick: characterClick,
@@ -45,7 +44,7 @@ angular.module('quartermaester')
       characters: [],
       paths: [],
       regions: [],
-      politicalAllegiances: [],
+      loyaltyRanges: [],
       editableLoyaltyRanges: []
     };
     $scope.episodes = [];
@@ -310,7 +309,14 @@ angular.module('quartermaester')
       //console.log("lng", c[0].latLng.lng());
       //$scope.lastClick = JSON;
       //console.log($scope.mapModels.paths);
-      addClickToEditor(c[0].latLng.lat(), c[0].latLng.lng())
+      addClickToEditor(c[0].latLng.lat(), c[0].latLng.lng());
+
+      // $scope.map.control.getGMap().setMapTypeId("SATELLITE");
+      // console.log($scope.map.control.getGMap());
+
+
+
+
     }
 
     function addClickToEditor(latitude, longitude) {
@@ -320,8 +326,48 @@ angular.module('quartermaester')
       });
     }
 
+    function getTileCode(a,b) {
+      //converts tile x,y into keyhole string
+      var c=Math.pow(2,b);
+      var d=a.x;
+      var e=a.y;
+      var f="t";
+      for(var g=0;g<b;g++){
+        c=c/2;
+        if(e<c){
+          if(d<c){f+="q"}
+          else{f+="r";d-=c}
+        }
+        else{
+          if(d<c){f+="t";e-=c}
+          else{f+="s";d-=c;e-=c}
+        }
+      }
+      return f;
+    }
+
     function onMapLoad(maps) {
 
+      var quartermaesterMapType = new maps.ImageMapType({
+        getTileUrl: function(coord, zoom) {
+          var tileRange = 1 << zoom;
+          if (coord.x < 0 || coord.x >= tileRange) return false;
+          if (coord.y < 0 || coord.y >= tileRange) return false;
+          return "tiles/" + getTileCode(coord, zoom) + ".jpg";
+        },
+        tileSize: new maps.Size(256, 256),
+        maxZoom: 9,
+        minZoom: 0,
+        radius: 1738000,
+        name: 'TWOIAF'
+      });
+
+      $scope.$watch("map.control", function( mapControl, emptyObj ) {
+        $scope.map.control.getGMap().mapTypes.set('quartermaester', quartermaesterMapType);
+        $scope.map.control.getGMap().setMapTypeId('quartermaester');
+      });
+
+
       // Add background to .rz-bar
       var rzbars = document.getElementsByClassName("rz-bar");
       rzbars[0].innerHTML = "<span class='odd'>1</span><span>2</span><span class='odd'>3</span><span>4</span><span class='odd'>5</span><span>6</span>";

js/services.js

@@ -1,54 +1,5 @@
 angular.module('quartermaester')
 
-.factory('smgMapType', function() {
-
-   return {
-     getTile: getTile,
-     tileSize: {height:256, H:"px", width:256, W:"px"},
-     name: 'Planetos',
-     radius: 1738000
-   };
-
-   function getTile(coord, zoom, ownerDocument) {
-     if (isOutsideTileRange(coord,zoom)) return false;
-     var div = ownerDocument.createElement('div');
-     div.style.width = '256px';
-     div.style.height = '256px';
-     div.style.backgroundImage = "url('tiles/" + getTileCode(coord,zoom) + ".jpg')";
-     return div;
-   }
-
-   function isOutsideTileRange(coord,zoom) {
-     var tileRange = 1 << zoom;
-     if (coord.x < 0 || coord.x >= tileRange) return true;
-     if (coord.y < 0 || coord.y >= tileRange) return true;
-     return false;
-   }
-
-   function getTileCode(a,b) {
-     //converts tile x,y into keyhole string
-     var c=Math.pow(2,b);
-     var d=a.x;
-     var e=a.y;
-     var f="t";
-     for(var g=0;g<b;g++){
-       c=c/2;
-       if(e<c){
-         if(d<c){f+="q"}
-         else{f+="r";d-=c}
-       }
-       else{
-         if(d<c){f+="t";e-=c}
-         else{f+="s";d-=c;e-=c}
-       }
-     }
-     return f;
-   }
-
-
-
- })
-
  .factory('qmCsv', function($q, $http, $filter, fCsv) {
 
   var csvLocation = (window.location.protocol=="file:") ? "https://raw.githubusercontent.com/carpiediem/carpiediem.github.io/master/quartermaester/data/" : "data/";