116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
// ==UserScript==
|
|
// @id iitc-plugin-marker-canvas-icon@jonatkins
|
|
// @name IITC plugin: Marker drawn using icons from canvas data URLs
|
|
// @category Tweaks
|
|
// @version 0.1.0.@@DATETIMEVERSION@@
|
|
// @namespace https://github.com/jonatkins/ingress-intel-total-conversion
|
|
// @updateURL @@UPDATEURL@@
|
|
// @downloadURL @@DOWNLOADURL@@
|
|
// @description [@@BUILDNAME@@-@@BUILDDATE@@] EXPERIMENTAL: draw markers using individual Leaflet Icons, created from canvas elements converted to data: URLs
|
|
// @include https://*.ingress.com/intel*
|
|
// @include http://*.ingress.com/intel*
|
|
// @match https://*.ingress.com/intel*
|
|
// @match http://*.ingress.com/intel*
|
|
// @grant none
|
|
// ==/UserScript==
|
|
|
|
@@PLUGINSTART@@
|
|
|
|
// PLUGIN START ////////////////////////////////////////////////////////
|
|
|
|
|
|
// use own namespace for plugin
|
|
window.plugin.markerIconCanvasUrl = function() {};
|
|
|
|
window.plugin.markerIconCanvasUrl.setup = function() {
|
|
|
|
// create a new marker. 'data' contain the IITC-specific entity data to be stored in the object options
|
|
window.createMarker = function(latlng, data) {
|
|
var icon = createMarkerIcon(data);
|
|
|
|
var options = L.extend({}, data, { icon: icon });
|
|
|
|
var marker = L.marker (latlng, options);
|
|
marker.bringToFront = function(){}; //TEMP - until the rest of IITC code is changed to take account of non-path markers
|
|
return marker;
|
|
|
|
}
|
|
|
|
window.setMarkerStyle = function(marker, selected) {
|
|
var icon = createMarkerIcon(marker.options,selected);
|
|
|
|
marker.setIcon(icon);
|
|
|
|
}
|
|
|
|
|
|
window.createMarkerIcon = function(details,selected) {
|
|
var scale = window.portalMarkerScale();
|
|
|
|
var lvlWeight = Math.max(2, Math.floor(details.level) / 1.5) * scale;
|
|
var lvlRadius = (details.team === window.TEAM_NONE ? 7 : Math.floor(details.level) + 4) * scale;
|
|
|
|
lvlRadius += (L.Browser.mobile ? PORTAL_RADIUS_ENLARGE_MOBILE*scale : 0);
|
|
|
|
var fillColor = COLORS[details.team];
|
|
var fillAlpha = 0.5;
|
|
|
|
var lineColor = selected ? COLOR_SELECTED_PORTAL : COLORS[details.team];
|
|
var lineAlpha = 1.0;
|
|
|
|
var cacheKey = ([lvlRadius,lvlWeight,fillColor,fillAlpha,lineColor,lineAlpha]).join(':');
|
|
|
|
if (!window.markerIconCache[cacheKey]) {
|
|
window.markerIconCache[cacheKey] = createNewMarkerIcon(lvlRadius,lvlWeight,fillColor,fillAlpha,lineColor,lineAlpha);
|
|
}
|
|
return window.markerIconCache[cacheKey];
|
|
}
|
|
|
|
window.markerIconCache = {};
|
|
|
|
window.createNewMarkerIcon = function (radius,weight,fillcol,fillalpha,linecol,linealpha) {
|
|
|
|
var size = Math.ceil(radius + weight/2)*2;
|
|
var anchor = Math.floor(size/2);
|
|
|
|
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.beginPath();
|
|
|
|
ctx.arc(anchor,anchor,radius,0,2*Math.PI);
|
|
|
|
ctx.fillStyle = fillcol;
|
|
ctx.globalAlpha = fillalpha;
|
|
|
|
ctx.fill();
|
|
|
|
ctx.lineWidth = weight;
|
|
ctx.strokeStyle = linecol;
|
|
ctx.globalAlpha = linealpha;
|
|
|
|
ctx.stroke();
|
|
|
|
var dataurl = canvas.toDataURL();
|
|
|
|
return L.icon({
|
|
iconUrl: dataurl,
|
|
iconSize: [size,size],
|
|
iconAnchor: [anchor,anchor]
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
var setup = window.plugin.markerIconCanvasUrl.setup;
|
|
|
|
// PLUGIN END //////////////////////////////////////////////////////////
|
|
|
|
@@PLUGINEND@@
|