phillip/ingress-intel-total-conversion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

replaced L.icon containing data-URI-images with L.divIcon

Browse Source
This commit is contained in:
Marcus Winkler
2014-02-06 00:40:54 +01:00
parent adb0baa46f
commit 2c743d0c17
2 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
images/marker-icon.svg.template Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" baseProfile="full"
width="25px" height="41px" viewBox="0 0 25 41">
<path d="M1.36241844765,18.67488124675 A12.5,12.5 0 1,1 23.63758155235,18.67488124675 L12.5,40.5336158073 Z" style="stroke:none; fill: %COLOR%;" />
<path d="M1.80792170975,18.44788599685 A12,12 0 1,1 23.19207829025,18.44788599685 L12.5,39.432271175 Z" style="stroke:#000000; stroke-width:1px; stroke-opacity: 0.15; fill: none;" />
<path d="M2.921679865,17.8803978722 A10.75,10.75 0 1,1 22.078320135,17.8803978722 L12.5,36.6789095943 Z" style="stroke:#ffffff; stroke-width:1.5px; stroke-opacity: 0.35; fill: none;" />
<path d="M19.86121593215,17.25 L12.5,21.5 L5.13878406785,17.25 L5.13878406785,8.75 L12.5,4.5 L19.86121593215,8.75 Z M7.7368602792,10.25 L17.2631397208,10.25 L12.5,18.5 Z M12.5,13 L7.7368602792,10.25 M12.5,13 L17.2631397208,10.25 M12.5,13 L12.5,18.5 M19.86121593215,17.25 L16.39711431705,15.25 M5.13878406785,17.25 L8.60288568295,15.25 M12.5,4.5 L12.5,8.5" style="stroke:#ffffff; stroke-width:1.25px; stroke-opacity: 1; fill: none;" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

35
plugins/draw-tools.user.js
View File

@ -35,38 +35,27 @@ window.plugin.drawTools.loadExternals = function() {
}
window.plugin.drawTools.getMarkerIcon = function(color) {
console.log('getMarkerIcon("' + color + '")');
if (typeof(color) === "undefined" || color.search(/^[0-9A-Fa-f]{6}$/) == -1) {
// TODO maybe improve error handling here.
if (typeof(color) === 'undefined') {
console.warn('Color is not set or not a valid color. Using default color as fallback.');
color = "a24ac3";
color = '#a24ac3';
}
// As the length of the color string is 6 charaters which translates to 8 base64 encodes characters
// and we ensured that the color in the svg template is properly aligned we can construct the
// resulting base64 encoded svg by replacing the color inside the base64 encoded template!
var svgIcon = 'data:image/svg+xml;base64,' +
'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIg0KCXZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImZ1bGwiDQoJd2lkdGg9IjUwcHgiIGhlaWdodD0iODJweCIgdmlld0JveD0iMCAwIDUwIDgyIj4NCg0KCTxwYXRoIGQ9Ik0yLjcyNDgzNjg5NTMsMzcuMzQ5NzYyNDkzNSBBMjUsMjUgMCAxLDEgNDcuMjc1MTYzMTA0NywzNy4zNDk3NjI0OTM1IEwyNSw4MS4wNjcyMzE2MTQ2IFoiIHN0eWxlPSJzdHJva2U6bm9uZTsgICBmaWxsOiAj' +
btoa(color) +
'OyIgLz4NCgk8cGF0aCBkPSJNMy42MTU4NDM0MTk1LDM2Ljg5NTc3MTk5MzcgQTI0LDI0IDAgMSwxIDQ2LjM4NDE1NjU4MDUsMzYuODk1NzcxOTkzNyBMMjUsNzguODY0NTQyMzUgWiIgc3R5bGU9InN0cm9rZTojMDAwMDAwOyBzdHJva2Utd2lkdGg6MnB4OyBzdHJva2Utb3BhY2l0eTogMC4xNTsgZmlsbDogbm9uZTsiIC8+DQoJPHBhdGggZD0iTTUuODQzMzU5NzMsMzUuNzYwNzk1NzQ0NCBBMjEuNSwyMS41IDAgMSwxIDQ0LjE1NjY0MDI3LDM1Ljc2MDc5NTc0NDQgTDI1LDczLjM1NzgxOTE4ODYgWiIgc3R5bGU9InN0cm9rZTojZmZmZmZmOyBzdHJva2Utd2lkdGg6M3B4OyBzdHJva2Utb3BhY2l0eTogMC4zNTsgZmlsbDogbm9uZTsiIC8+DQoNCgk8cGF0aCBkPSJNMzkuNzIyNDMxODY0MywzNC41IEwyNSw0MyBMMTAuMjc3NTY4MTM1NywzNC41IEwxMC4yNzc1NjgxMzU3LDE3LjUgTDI1LDkgTDM5LjcyMjQzMTg2NDMsMTcuNSBaIE0xNS40NzM3MjA1NTg0LDIwLjUgTDM0LjUyNjI3OTQ0MTYsMjAuNSBMMjUsMzcgWiBNMjUsMjYgTDE1LjQ3MzcyMDU1ODQsMjAuNSBNMjUsMjYgTDM0LjUyNjI3OTQ0MTYsMjAuNSBNMjUsMjYgTDI1LDM3IE0zOS43MjI0MzE4NjQzLDM0LjUgTDMyLjc5NDIyODYzNDEsMzAuNSBNMTAuMjc3NTY4MTM1NywzNC41IEwxNy4yMDU3NzEzNjU5LDMwLjUgTTI1LDkgTDI1LDE3IiBzdHlsZT0ic3Ryb2tlOiNmZmZmZmY7IHN0cm9rZS13aWR0aDoyLjVweDsgc3Ryb2tlLW9wYWNpdHk6IDE7IGZpbGw6IG5vbmU7IiAvPg0KDQoNCjwvc3ZnPg==';
var svgIcon = window.plugin.drawTools.markerTemplate.replace(/%COLOR%/g, color);
// As we have a svg icon, we can use the same icon for the regular and the retina version.
return L.icon({
iconUrl: svgIcon,
iconRetinaUrl: svgIcon,
return L.divIcon({
iconSize: new L.Point(25, 41),
iconAnchor: new L.Point(12, 41),
popupAnchor: new L.Point(1, -34),
shadowSize: new L.Point(41, 41),
// L.icon does not use the option color, but we store it here to
html: svgIcon,
className: 'leaflet-iitc-custom-icon',
// L.divIcon does not use the option color, but we store it here to
// be able to simply retrieve the color for serializing markers
color: '#' + color
color: color
});
}
window.plugin.drawTools.currentColor = '#a24ac3';
window.plugin.drawTools.currentMarker = window.plugin.drawTools.getMarkerIcon('a24ac3');
window.plugin.drawTools.markerTemplate = '@@INCLUDESTRING:images/marker-icon.svg.template@@';
window.plugin.drawTools.currentMarker = window.plugin.drawTools.getMarkerIcon(window.plugin.drawTools.currentColor);
window.plugin.drawTools.setOptions = function() {
@ -99,7 +88,7 @@ window.plugin.drawTools.setOptions = function() {
window.plugin.drawTools.setDrawColor = function(color) {
window.plugin.drawTools.currentColor = color;
window.plugin.drawTools.currentMarker = window.plugin.drawTools.getMarkerIcon(color.substr(1));
window.plugin.drawTools.currentMarker = window.plugin.drawTools.getMarkerIcon(color);
window.plugin.drawTools.drawControl.setDrawingOptions({
'polygon': { 'shapeOptions': { color: color } },
@ -269,7 +258,7 @@ window.plugin.drawTools.import = function(data) {
break;
case 'marker':
var extraMarkerOpt = {};
if (item.color) extraMarkerOpt.icon = window.plugin.drawTools.getMarkerIcon(item.color.substr(1));
if (item.color) extraMarkerOpt.icon = window.plugin.drawTools.getMarkerIcon(item.color);
layer = L.marker(item.latLng, L.extend({},window.plugin.drawTools.markerOptions,extraMarkerOpt));
break;
default: