@randy.tarampi/jsx/esm/lib/components/map/google/styles.js

Some common JSX components for www.randytarampi.ca

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var ACCENT_COLOUR = "#ec7500";
var TEXT_FILL_COLOR = "#757575";
var TEXT_STROKE_COLOR = "#212121";
export var GoogleMapStyles = [{
  "elementType": "geometry",
  "stylers": [{
    "color": TEXT_STROKE_COLOR
  }]
}, {
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": TEXT_FILL_COLOR
  }]
}, {
  "elementType": "labels.text.stroke",
  "stylers": [{
    "color": TEXT_STROKE_COLOR
  }]
}, {
  "featureType": "administrative",
  "elementType": "geometry",
  "stylers": [{
    "color": TEXT_FILL_COLOR
  }]
}, {
  "featureType": "administrative",
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "administrative.country",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#9e9e9e"
  }]
}, {
  "featureType": "administrative.locality",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#bdbdbd"
  }]
}, {
  "featureType": "landscape",
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "poi",
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "poi",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": TEXT_FILL_COLOR
  }]
}, {
  "featureType": "poi.park",
  "elementType": "geometry",
  "stylers": [{
    "color": "#181818"
  }]
}, {
  "featureType": "poi.park",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#616161"
  }]
}, {
  "featureType": "poi.park",
  "elementType": "labels.text.stroke",
  "stylers": [{
    "color": "#1b1b1b"
  }]
}, {
  "featureType": "road",
  "elementType": "geometry.fill",
  "stylers": [{
    "color": "#2c2c2c"
  }]
}, {
  "featureType": "road",
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "road",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#8a8a8a"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry",
  "stylers": [{
    "color": "#373737"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "geometry",
  "stylers": [{
    "color": "#3c3c3c"
  }]
}, {
  "featureType": "road.highway.controlled_access",
  "elementType": "geometry",
  "stylers": [{
    "color": "#4e4e4e"
  }]
}, {
  "featureType": "road.local",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#616161"
  }]
}, {
  "featureType": "transit",
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "transit",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": TEXT_FILL_COLOR
  }]
}, {
  "featureType": "water",
  "elementType": "geometry",
  "stylers": [{
    "color": "#000000"
  }, {
    "lightness": 33
  }]
}, {
  "featureType": "water",
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "water",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#3d3d3d"
  }]
}];

var generateGoogleMapMarkerClustererUrlForColor = color => "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"-100 -100 200 200\"><defs><g id=\"a\" transform=\"rotate(45)\"><path d=\"M0 47A47 47 0 0 0 47 0L62 0A62 62 0 0 1 0 62Z\" fill-opacity=\"0.7\"/><path d=\"M0 67A67 67 0 0 0 67 0L81 0A81 81 0 0 1 0 81Z\" fill-opacity=\"0.5\"/><path d=\"M0 86A86 86 0 0 0 86 0L100 0A100 100 0 0 1 0 100Z\" fill-opacity=\"0.3\"/></g></defs><g fill=\"".concat(color, "\"><circle r=\"42\"/><use xlink:href=\"#a\"/><g transform=\"rotate(120)\"><use xlink:href=\"#a\"/></g><g transform=\"rotate(240)\"><use xlink:href=\"#a\"/></g></g></svg>"); // NOTE-RT: Shamelessly stolen from https://stackoverflow.com/a/37302915


var generateGoogleMapMarkerClustererUrlInternal = color => typeof btoa !== "undefined" ? "base64,".concat(btoa(generateGoogleMapMarkerClustererUrlForColor(color))) : "utf-8,".concat(generateGoogleMapMarkerClustererUrlForColor(color));

export var generateGoogleMapMarkerClustererUrl = color => "data:image/svg+xml;".concat(generateGoogleMapMarkerClustererUrlInternal(color));
export var generateGoogleMapMarkerClustererStyle = function generateGoogleMapMarkerClustererStyle() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var {
    url,
    color = ACCENT_COLOUR,
    height = 50,
    width = 50,
    textColor = TEXT_STROKE_COLOR,
    textSize = 11
  } = _ref,
      styles = _objectWithoutProperties(_ref, ["url", "color", "height", "width", "textColor", "textSize"]);

  return _objectSpread({
    url: url || generateGoogleMapMarkerClustererUrl(color),
    height,
    width,
    textColor,
    textSize,
    fontFamily: "Roboto,Arial,sans-serif"
  }, styles);
};
export var GoogleMapMarkerClustererStyles = [generateGoogleMapMarkerClustererStyle(), generateGoogleMapMarkerClustererStyle(), generateGoogleMapMarkerClustererStyle(), generateGoogleMapMarkerClustererStyle(), generateGoogleMapMarkerClustererStyle()];