Adding custom symbols to svg_symbols utils

[MatheusAnciloto]

Adding methods for custom symbols to svg_symbols utils.

function clusterSummary(style, feature) {
  const properties = feature.getProperties();
  const { cat } = properties;
  if (!cat) return null;

  const themeCat = style.cat;
  const size = 25;
  const getStrokeColor = (value) => {
    return themeCat[value].style.strokeColor;
  };
  const getPercentage = (value) => {
    if (!cat) return 0;
    return (
      (cat.filter((c) => {
        try {
          return c.toString().trim() === value.toString().trim();
        } catch (e) {
          return false;
        }
      }).length *
        100) /
      cat.length
    );
  };
  const getDashArray = (value) => {
    const percentage = getPercentage(value);
    const rest = 100 - percentage;
    return `${percentage.toFixed(2)} ${rest.toFixed(2)}`;
  };
  const getOffset = (value) => {
    const precedingSegments = Object.keys(themeCat).reduce(
      (acc, key, id) => (acc += id < value ? getPercentage(key) : 0),
      0
    );
    return 100 - precedingSegments + 25;
  };
  const circles = Object.keys(themeCat)
    .map((value, id) => {
      const strokeColor = getStrokeColor(value);
      const dashArray = getDashArray(value);
      const offset = getOffset(id);
      return `<circle cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="${strokeColor}" stroke-width="5" stroke-dasharray="${dashArray}" stroke-dashoffset="${offset}"></circle>`;
    })
    .join("\n");
  const icon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width="${size}" height="${size}" viewBox="0 0 42 42" aria-labelledby="beers-title beers-desc" role="img">
        <circle cx="21" cy="21" r="15.91549430918954" fill="#f6f6f4" role="presentation"></circle>
        <circle cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="5" role="presentation"></circle>
        ${circles}
        <text x="21" y="24" style="text-anchor: middle; font-weight: 600; font-size: 10px; font-family: sans-serif; fill: rgb(85, 85, 85);">
          ${properties.count}
        </text>
        </svg>`;

  let result = `data:image/svg+xml,${encodeSVG(icon)}`;
  return result
}

function commonplacePin(style) {
  const icon = svg.node`
  <svg
    version="1.1"
    id="Layer_1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="-50 0 600 500"
    style="enable-background:new 0 0 24 18;"
    xml:space="preserve"
    width="20px"
    height="20px"
  >
    <path
      d="M256,0C153.755,0,70.573,83.182,70.573,185.426c0,126.888,165.939,313.167,173.004,321.035
      c6.636,7.391,18.222,7.378,24.846,0c7.065-7.868,173.004-194.147,173.004-321.035C441.425,83.182,358.244,0,256,0z M256,278.719
      c-51.442,0-93.292-41.851-93.292-93.293S204.559,92.134,256,92.134s93.291,41.851,93.291,93.293S307.441,278.719,256,278.719z"
      fill=${style.pinColor}
      style="filter: drop-shadow(0 0 2.75rem #a3a3a3)"
    />
  `;

  return `data:image/svg+xml,${encodeURIComponent(
    xmlSerializer.serializeToString(icon)
  )}`;
}

function customSvg(style) {
  return `data:image/svg+xml,${encodeSVG(style.contribution_svg)}`;
}

[dbauszus-glx]

I will add an example plugin for a custom svg symbol method.

[dbauszus-glx]

A very basic plugin would look like this.

// the exported iife will be executed when the plugin is loaded.
export default (function () {

  // Assign myIcon method to svgSymbols.
  mapp.utils.svgSymbols.template = (icon, feature) => {
   // The method receives the icon style object as well as the feature.
  // Create an SVG string.
  let svgString = `
  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   height="48"
   width="48"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs178" />
  <path
     d="M24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Z"
     id="path172"
     style="fill:#ffff00;stroke:#ff0000;stroke-opacity:1;fill-opacity:1" />
</svg>`
   // Return URLencoded SVG.
  return `data:image/svg+xml,${encodeURIComponent(svgString)}`;
  }


})()