Edit Map Marker

Name

Also known as (comma separated)

Brief definition Pin indicating a location on a map.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "color", "type": "color", "label": "Colour", "default": "#E8A020", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "size", "type": "number", "label": "Size", "default": 28, "min": 16, "max": 48, "step": 2 }, { "id": "pulse", "type": "toggle", "label": "Pulse ring", "default": true }, { "id": "shape", "type": "select", "label": "Shape", "default": "pin", "options": [ "pin", "dot" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"map-marker-swatch\" aria-hidden=\"true\">\n <div class=\"map-marker map-marker--{{shape}}\" style=\"--marker-color:{{color}};--marker-size:{{size}}px;\">\n {{#if pulse}}<span class=\"map-marker__ring\"></span>{{/if}}\n <svg class=\"map-marker__pin\" viewBox=\"0 0 24 24\" width=\"{{size}}\" height=\"{{size}}\" role=\"img\" aria-label=\"Map marker\"><path d=\"M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z\" fill=\"{{color}}\"/><circle cx=\"12\" cy=\"9\" r=\"2.6\" fill=\"#FAF7F2\"/></svg>\n <svg class=\"map-marker__dot\" viewBox=\"0 0 24 24\" width=\"{{size}}\" height=\"{{size}}\" role=\"img\" aria-label=\"Map marker\"><circle cx=\"12\" cy=\"12\" r=\"8\" fill=\"{{color}}\" stroke=\"#FAF7F2\" stroke-width=\"2\"/></svg>\n </div>\n</div>\n<style>\n.map-marker-swatch { max-width: 220px; aspect-ratio: 4 / 3; border-radius: 12px; background: #FAF7F2 repeating-linear-gradient(0deg, #24143014 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, #24143014 0 1px, transparent 1px 22px); border: 1px solid #24143022; display: flex; align-items: center; justify-content: center; }\n.map-marker { position: relative; display: flex; align-items: center; justify-content: center; }\n.map-marker__pin, .map-marker__dot { display: none; }\n.map-marker--pin .map-marker__pin { display: block; }\n.map-marker--dot .map-marker__dot { display: block; }\n.map-marker__ring { position: absolute; width: calc(var(--marker-size) * 1.8); height: calc(var(--marker-size) * 1.8); border-radius: 50%; background: var(--marker-color); opacity: .35; }\n@keyframes map-marker-pulse { 0% { transform: scale(.5); opacity: .45; } 100% { transform: scale(1.4); opacity: 0; } }\n@media (prefers-reduced-motion: no-preference) {\n .map-marker__ring { animation: map-marker-pulse .2s ease-out infinite; }\n}\n</style>", "tailwind": "<div class=\"map-marker-swatch-tw max-w-[220px] border border-[#24143022] rounded-xl flex items-center justify-center\" style=\"aspect-ratio:4/3;background-color:#FAF7F2;background-image:repeating-linear-gradient(0deg,#24143014 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,#24143014 0 1px,transparent 1px 22px);\" aria-hidden=\"true\">\n <div class=\"map-marker-tw map-marker-tw--{{shape}} relative flex items-center justify-center\" style=\"--marker-color:{{color}};--marker-size:{{size}}px;\">\n {{#if pulse}}<span class=\"map-marker-tw__ring absolute rounded-full\" style=\"width:calc(var(--marker-size) * 1.8);height:calc(var(--marker-size) * 1.8);background:var(--marker-color);opacity:.35;\"></span>{{/if}}\n <svg class=\"map-marker-tw__pin\" viewBox=\"0 0 24 24\" width=\"{{size}}\" height=\"{{size}}\" role=\"img\" aria-label=\"Map marker\"><path d=\"M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z\" fill=\"{{color}}\"/><circle cx=\"12\" cy=\"9\" r=\"2.6\" fill=\"#FAF7F2\"/></svg>\n <svg class=\"map-marker-tw__dot\" viewBox=\"0 0 24 24\" width=\"{{size}}\" height=\"{{size}}\" role=\"img\" aria-label=\"Map marker\"><circle cx=\"12\" cy=\"12\" r=\"8\" fill=\"{{color}}\" stroke=\"#FAF7F2\" stroke-width=\"2\"/></svg>\n </div>\n</div>\n<style>\n.map-marker-tw__pin, .map-marker-tw__dot { display: none; }\n.map-marker-tw--pin .map-marker-tw__pin { display: block; }\n.map-marker-tw--dot .map-marker-tw__dot { display: block; }\n@keyframes map-marker-tw-pulse { 0% { transform: scale(.5); opacity: .45; } 100% { transform: scale(1.4); opacity: 0; } }\n@media (prefers-reduced-motion: no-preference) {\n .map-marker-tw__ring { animation: map-marker-tw-pulse .2s ease-out infinite; }\n}\n</style>", "react": "export function MapMarker({\n color = \"{{color}}\",\n size = {{size}},\n pulse = {{pulse}},\n shape = \"{{shape}}\",\n}) {\n return (\n <div style={{ maxWidth: 220, aspectRatio: \"4 / 3\", borderRadius: 12, border: \"1px solid #24143022\",\n display: \"flex\", alignItems: \"center\", justifyContent: \"center\", background: \"#FAF7F2\",\n backgroundImage: \"repeating-linear-gradient(0deg, #24143014 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, #24143014 0 1px, transparent 1px 22px)\" }} aria-hidden=\"true\">\n <div style={{ position: \"relative\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}>\n {pulse && (\n <span style={{ position: \"absolute\", width: size * 1.8, height: size * 1.8, borderRadius: \"50%\",\n background: color, opacity: 0.35 }} />\n )}\n {shape === \"pin\" ? (\n <svg viewBox=\"0 0 24 24\" width={size} height={size} role=\"img\" aria-label=\"Map marker\">\n <path d=\"M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z\" fill={color} />\n <circle cx=\"12\" cy=\"9\" r=\"2.6\" fill=\"#FAF7F2\" />\n </svg>\n ) : (\n <svg viewBox=\"0 0 24 24\" width={size} height={size} role=\"img\" aria-label=\"Map marker\">\n <circle cx=\"12\" cy=\"12\" r=\"8\" fill={color} stroke=\"#FAF7F2\" strokeWidth=\"2\" />\n </svg>\n )}\n </div>\n </div>\n );\n}" }