Leaflet 1.3.0, leaflet.draw 1.0, google-layer using new Leaflet.Gridl…

…ayer.GoogleMutant, various updates to support new libraries

thx https://github.com/McBen/ingress-intel-total-conversion/

#3

.editorconfig

@@ -13,9 +13,9 @@ indent_size = 2
 
 [*.py]
 indent_size = 4
-
+dashArray = [1,2];
 # Following JS code style rules do not have EditorConfig support yet:
 # - Use identity operators (===) over equality operators (==).
-# - Opening brace at end of line. e.g. "if(a) {", "} else {", "} else if (b) }"
+# - Opening brace at end of line. e.g. "if (a) {", "} else {", "} else if (b) }"
 # - No space between keyword and parentheses. "if(a)" not "if (a)"
 # - Use single-quotes for strings, and double-quotes within strings for HTML attribute values. $('<div id="#me">').

HACKING.md

@@ -29,7 +29,7 @@ Please follow the these guidelines. Some are just preference, others are good pr
 - indent using two spaces
 - opening brace on the same line: `if(blub) {`
 - else clauses: `} else if(blub) {` or `} else {`
-- there should be no space after `if`, `for`, etc. E.g. `if(true) { doStuff(); } else { dontDoStuff(); }`
+- there should be a space after `if`, `for`, etc. E.g. `if (true) { doStuff(); } else { dontDoStuff(); }`
 - comments: `// this is a comment`
 - quotes: Use single-quotes for JavaScript and double-quotes for HTML content. Example: `$('body').append('<div id="soup">Soup!</div>');`.
 - there is no length limit on lines, but try to keep them short where suitable

code/artifact.js

@@ -183,11 +183,10 @@ window.artifact.updateLayer = function() {
         var icon = L.icon({
           iconUrl: iconUrl,
           iconSize: [iconSize,iconSize],
-          iconAnchor: [iconSize/2,iconSize/2],
-          className: 'no-pointer-events'  // the clickable: false below still blocks events going through to the svg underneath
+          iconAnchor: [iconSize/2,iconSize/2]
         });
 
-        var marker = L.marker (latlng, {icon: icon, clickable: false, keyboard: false, opacity: opacity });
+        var marker = L.marker (latlng, {icon: icon, interactive: false, keyboard: false, opacity: opacity });
 
         artifact._layer.addLayer(marker);
 
@@ -205,7 +204,7 @@ window.artifact.updateLayer = function() {
           className: 'no-pointer-events'  // the clickable: false below still blocks events going through to the svg underneath
         });
 
-        var marker = L.marker (latlng, {icon: icon, clickable: false, keyboard: false, opacity: opacity });
+        var marker = L.marker (latlng, {icon: icon, interactive: false, keyboard: false, opacity: opacity });
 
         artifact._layer.addLayer(marker);
 

code/boot.js

@@ -127,25 +127,26 @@ function createDefaultBaseMapLayers() {
   baseLayers['CartoDB Positron'] = L.tileLayer(cartoUrl,{attribution:cartoAttr,theme:'light_all'});
 
 
-  // we'll include google maps too - in the ingress default style, and a few other standard ones
-  // as the stock intel map already uses the googme maps API, we just hijack their inclusion of the javascript and API key :)
-  var ingressGMapOptions = {
-    backgroundColor: '#0e3d4e', //or #dddddd ? - that's the Google tile layer default
-    styles: [
-        { featureType:"all", elementType:"all",
-          stylers: [{visibility:"on"}, {hue:"#131c1c"}, {saturation:"-50"}, {invert_lightness:true}] },
-        { featureType:"water", elementType:"all",
-          stylers: [{visibility:"on"}, {hue:"#005eff"}, {invert_lightness:true}] },
-        { featureType:"poi", stylers:[{visibility:"off"}]},
-        { featureType:"transit", elementType:"all", stylers:[{visibility:"off"}] }
-      ]
-  };
-  baseLayers['Google Default Ingress Map'] = new L.Google('ROADMAP',{maxZoom:21, mapOptions:ingressGMapOptions});
-  baseLayers['Google Roads'] = new L.Google('ROADMAP',{maxZoom:21});
-  baseLayers['Google Roads + Traffic'] = new L.GoogleTraffic('ROADMAP',{maxZoom:21});
-  baseLayers['Google Satellite'] = new L.Google('SATELLITE',{maxZoom:21});
-  baseLayers['Google Hybrid'] = new L.Google('HYBRID',{maxZoom:21});
-  baseLayers['Google Terrain'] = new L.Google('TERRAIN',{maxZoom:15});
+  // Google Maps - including ingress default (using the stock-intel API-key)
+  baseLayers['Google Default Ingress Map'] = L.gridLayer.googleMutant(
+    { type:'roadmap',
+      maxZoom: 21,
+      backgroundColor: '#0e3d4e',
+      styles: [
+          { featureType:"all", elementType:"all",
+            stylers: [{visibility:"on"}, {hue:"#131c1c"}, {saturation:"-50"}, {invert_lightness:true}] },
+          { featureType:"water", elementType:"all",
+            stylers: [{visibility:"on"}, {hue:"#005eff"}, {invert_lightness:true}] },
+          { featureType:"poi", stylers:[{visibility:"off"}]},
+          { featureType:"transit", elementType:"all", stylers:[{visibility:"off"}] }
+        ]});
+  baseLayers['Google Roads'] = L.gridLayer.googleMutant({type:'roadmap', maxZoom: 21});
+  var trafficMutant = L.gridLayer.googleMutant({type:'roadmap', maxZoom: 21});
+  trafficMutant.addGoogleLayer('TrafficLayer');
+  baseLayers['Google Roads + Traffic'] = trafficMutant;
+  baseLayers['Google Satellite'] = L.gridLayer.googleMutant({type:'satellite', maxZoom: 21});
+  baseLayers['Google Hybrid'] = L.gridLayer.googleMutant({type:'hybrid', maxZoom: 21});
+  baseLayers['Google Terrain'] = L.gridLayer.googleMutant({type:'terrain', maxZoom: 21});
 
 
   return baseLayers;
@@ -166,7 +167,8 @@ window.setupMap = function() {
     minZoom: MIN_ZOOM,
 //    zoomAnimation: false,
     markerZoomAnimation: false,
-    bounceAtZoomLimits: false
+    bounceAtZoomLimits: false,
+    preferCanvas: (window.L_PREFER_CANVAS ? true : false)
   });
 
   if (L.Path.CANVAS) {
@@ -702,10 +704,7 @@ function boot() {
 try { console.log('Loading included JS now'); } catch(e) {}
 @@INCLUDERAW:external/leaflet-src.js@@
 @@INCLUDERAW:external/L.Geodesic.js@@
-// modified version of https://github.com/shramov/leaflet-plugins. Also
-// contains the default Ingress map style.
-@@INCLUDERAW:external/Google.js@@
-@@INCLUDERAW:external/GoogleTraffic.js@@
+@@INCLUDERAW:external/Leaflet.GoogleMutant.js@@
 @@INCLUDERAW:external/autolink.js@@
 @@INCLUDERAW:external/oms.min.js@@
 

code/map_data_debug.js

@@ -21,7 +21,7 @@ window.RenderDebugTiles.prototype.reset = function() {
 }
 
 window.RenderDebugTiles.prototype.create = function(id,bounds) {
-  var s = {color: '#666', weight: 2, opacity: 0.4, fillColor: '#666', fillOpacity: 0.1, clickable: false};
+  var s = {color: '#666', weight: 2, opacity: 0.4, fillColor: '#666', fillOpacity: 0.1, interactive: false};
 
   var bounds = new L.LatLngBounds(bounds);
   bounds = bounds.pad(-0.02);

code/map_data_render.js

@@ -408,7 +408,7 @@ window.Render.prototype.createFieldEntity = function(ent) {
     fillColor: COLORS[team],
     fillOpacity: 0.25,
     stroke: false,
-    clickable: false,
+    interactive: false,
 
     team: team,
     ent: ent,  // LEGACY - TO BE REMOVED AT SOME POINT! use .guid, .timestamp and .data instead
@@ -474,7 +474,7 @@ window.Render.prototype.createLinkEntity = function(ent,faked) {
     color: COLORS[team],
     opacity: 1,
     weight: faked ? 1 : 2,
-    clickable: false,
+    interactive: false,
 
     team: team,
     ent: ent,  // LEGACY - TO BE REMOVED AT SOME POINT! use .guid, .timestamp and .data instead

code/ornaments.js

@@ -59,7 +59,7 @@ window.ornaments.addPortal = function(portal) {
         className: 'no-pointer-events'  // the clickable: false below still blocks events going through to the svg underneath
       });
 
-      return L.marker(latlng, {icon: icon, clickable: false, keyboard: false, opacity: window.ornaments.OVERLAY_OPACITY }).addTo(layer);
+      return L.marker(latlng, {icon: icon, interactive: false, keyboard: false, opacity: window.ornaments.OVERLAY_OPACITY }).addTo(layer);
     });
   }
 };

code/portal_detail_display.js

@@ -235,13 +235,13 @@ window.setPortalIndicators = function(p) {
               color: RANGE_INDICATOR_COLOR,
               weight: 3,
               dashArray: range.isLinkable ? undefined : "10,10",
-              clickable: false })
-          : L.circle(coord, range.range, { fill: false, stroke: false, clickable: false })
+              interactive: false })
+          : L.circle(coord, range.range, { fill: false, stroke: false, interactive: false })
         ).addTo(map);
     }
 
     portalAccessIndicator = L.circle(coord, HACK_RANGE,
-      { fill: false, color: ACCESS_INDICATOR_COLOR, weight: 2, clickable: false }
+      { fill: false, color: ACCESS_INDICATOR_COLOR, weight: 2, interactive: false }
     ).addTo(map);
   }
 

code/portal_marker.js

@@ -14,7 +14,7 @@ window.portalMarkerScale = function() {
 window.createMarker = function(latlng, data) {
   var styleOptions = window.getMarkerStyleOptions(data);
 
-  var options = L.extend({}, data, styleOptions, { clickable: true });
+  var options = L.extend({}, data, styleOptions, { interactive: true });
 
   var marker = L.circleMarker(latlng, options);
 
@@ -56,7 +56,7 @@ window.getMarkerStyleOptions = function(details) {
   // thinner and dashed outline for placeholder portals
   if (details.team != TEAM_NONE && level==0) {
     lvlWeight = 1;
-    dashArray = [1,2];
+    dashArray = '1,2';
   }
 
   var options = {

code/search.js

@@ -132,7 +132,7 @@ window.search.Query.prototype.resultLayer = function(result) {
     if(result.bounds) {
       L.rectangle(result.bounds, {
         title: result.title,
-        clickable: false,
+        interactive: false,
         color: 'red',
         fill: false,
       }).addTo(result.layer);
@@ -366,7 +366,7 @@ addHook('search', function(query) {
 
       if(item.geojson) {
         result.layer = L.geoJson(item.geojson, {
-          clickable: false,
+          interactive: false,
           color: 'red',
           opacity: 0.7,
           weight: 2,

external/Control.MiniMap.css

@@ -1,45 +1,88 @@
 .leaflet-control-minimap {
-    border:solid rgba(255, 255, 255, 0.7) 3px;
-    box-shadow: 0 1px 7px #999;
-    background: #f8f8f9;
-    -moz-border-radius: 8px;
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
+	border:solid rgba(255, 255, 255, 1.0) 4px;
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 3px;
+	background: #f8f8f9;
+	transition: all .6s;
 }
 
 .leaflet-control-minimap a {
-    background-color: rgba(255, 255, 255, 0.75);
-    background-position: 1px 2px;
-    background-repeat: no-repeat;
-    display: block;
-    outline: none;
-    z-index: 99999;
+	background-color: rgba(255, 255, 255, 1.0);
+	background-repeat: no-repeat;
+	z-index: 99999;
+	transition: all .6s;
 }
 
-.leaflet-control-minimap a.minimized {
-    background-position: 1px -18px;
+.leaflet-control-minimap a.minimized-bottomright {
+	-webkit-transform: rotate(180deg);
+	transform: rotate(180deg);
+	border-radius: 0px;
 }
 
-.leaflet-control-minimap-toggle-display {
-    background-image: url(@@INCLUDEIMAGE:images/minimap-toggle.png@@);
-    border-radius: 4px 4px 4px 4px;
-    height: 19px;
-    width: 19px;
-    position: absolute;
-    bottom: 0;
-    right: 0; 
+.leaflet-control-minimap a.minimized-topleft {
+	-webkit-transform: rotate(0deg);
+	transform: rotate(0deg);
+	border-radius: 0px;
 }
-.leaflet-left .leaflet-control-minimap-toggle-display {
-    left: 0;
-    right: auto;
-    transform: scaleX(-1);
+
+.leaflet-control-minimap a.minimized-bottomleft {
+	-webkit-transform: rotate(270deg);
+	transform: rotate(270deg);
+	border-radius: 0px;
+}
+
+.leaflet-control-minimap a.minimized-topright {
+	-webkit-transform: rotate(90deg);
+	transform: rotate(90deg);
+	border-radius: 0px;
+}
+
+.leaflet-control-minimap-toggle-display{
+	background-image: url(@@INCLUDEIMAGE:images/minimap-toggle.png@@);
+	background-size: cover;
+	position: absolute;
+	border-radius: 3px 0px 0px 0px;
+}
+
+.leaflet-oldie .leaflet-control-minimap-toggle-display{
+	background-image: url(@@INCLUDEIMAGE:images/minimap-toggle.png@@);
+}
+
+.leaflet-control-minimap-toggle-display-bottomright {
+	bottom: 0;
+	right: 0;
 }
-.leaflet-top .leaflet-control-minimap-toggle-display {
-    bottom: auto;
-    top: 0;
-    transform: scaleY(-1);
+
+.leaflet-control-minimap-toggle-display-topleft{
+	top: 0;
+	left: 0;
+	-webkit-transform: rotate(180deg);
+	transform: rotate(180deg);
 }
-.leaflet-top.leaflet-left .leaflet-control-minimap-toggle-display {
-    transform: scaleY(-1) scaleX(-1);
+
+.leaflet-control-minimap-toggle-display-bottomleft{
+	bottom: 0;
+	left: 0;
+	-webkit-transform: rotate(90deg);
+	transform: rotate(90deg);
 }
 
+.leaflet-control-minimap-toggle-display-topright{
+	top: 0;
+	right: 0;
+	-webkit-transform: rotate(270deg);
+	transform: rotate(270deg);
+}
+
+/* Old IE */
+.leaflet-oldie .leaflet-control-minimap {
+	border: 1px solid #999;
+}
+
+.leaflet-oldie .leaflet-control-minimap a {
+	background-color: #fff;
+}
+
+.leaflet-oldie .leaflet-control-minimap a.minimized {
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+}