Map Toolkit

Draw cost-zone maps with km radii and a translatable price legend, or build an annotated map on top of OSM, Carto, OpenTopoMap or Esri satellite. Export as PNG, HTML iframe, or Shopify Liquid — all in your browser, no API keys.

Place an origin, add concentric km bands with prices, and export the map as PNG, interactive embed or Liquid block.

Live map

Click to move origin · drag the origin pin to fine-tune · drag annotation markers to reposition.Show 0 annotations

Origin & zones

Origin label

CurrencyLocale

Look up address

Lat

Lng

Zones (price by max km)

Columns: color · label · max km · base price · optional per-km · per-zone export. The smallest matching zone wins.

Outside-zones labelBase price (DKK)

Per km (DKK/km)

Beyond the largest zone, price = base + per-km × distance from origin. Leave the base empty to mark anything outside as “not served”.

Export — static PNG

Width (px)

Height (px)

Zoom

Render legend onto imageInclude 0 annotations

Tiles fetched from Carto Light. © OpenStreetMap · © Carto

Load zones (JSON)Reuse a zone configuration on a different origin or device.

Embed translations

Strings used in the embed’s document title and legend rows. Pick a preset on the right or edit individual fields. Use {origin}, {km}, {price} and {perKm} as placeholders. The outside-zone row is shown automatically when a base price is set.

Origin label (in this embed)TitleZone rowOutside row (base price)Outside row (with per-km)Not-served row

Export — interactive embed & Liquid

Allow scroll-wheel zoom inside embed

HTML iframe (paste anywhere)

<iframe title="Delivery zones — Origin" loading="lazy" style="width:720px;max-width:100%;height:480px;border:0;border-radius:12px" srcdoc="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot; /&gt;
&lt;title&gt;Origin — delivery zones&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.9.4/dist/leaflet.css&quot; /&gt;
&lt;style&gt;
  html, body { margin: 0; padding: 0; height: 100%; font-family: system-ui, sans-serif; }
  #map { width: 100%; height: 100%; }
  .stl-legend {
    background: rgba(255,255,255,0.95); padding: 10px 12px; border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18); font-size: 12px; line-height: 1.4;
  }
  .stl-legend h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; }
  .stl-legend .row { display: flex; align-items: center; gap: 8px; }
  .stl-legend .sw { width: 12px; height: 12px; border-radius: 3px; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;map&quot; style=&quot;width:720px;max-width:100%;height:480px&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;https://unpkg.com/leaflet@1.9.4/dist/leaflet.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
(function(){
  var DATA = {&quot;origin&quot;:{&quot;lat&quot;:56.1629,&quot;lng&quot;:10.2039},&quot;originLabel&quot;:&quot;Origin&quot;,&quot;zones&quot;:[{&quot;label&quot;:&quot;Local&quot;,&quot;radiusKm&quot;:10,&quot;color&quot;:&quot;#16a34a&quot;,&quot;price&quot;:49,&quot;perKm&quot;:0},{&quot;label&quot;:&quot;Near&quot;,&quot;radiusKm&quot;:25,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;price&quot;:79,&quot;perKm&quot;:0},{&quot;label&quot;:&quot;Regional&quot;,&quot;radiusKm&quot;:60,&quot;color&quot;:&quot;#f59e0b&quot;,&quot;price&quot;:129,&quot;perKm&quot;:0},{&quot;label&quot;:&quot;Wider&quot;,&quot;radiusKm&quot;:150,&quot;color&quot;:&quot;#ef4444&quot;,&quot;price&quot;:199,&quot;perKm&quot;:0}],&quot;currency&quot;:&quot;DKK&quot;,&quot;locale&quot;:&quot;da-DK&quot;,&quot;tile&quot;:{&quot;url&quot;:&quot;https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png&quot;,&quot;attribution&quot;:&quot;© OpenStreetMap · © Carto&quot;,&quot;maxZoom&quot;:19},&quot;zoom&quot;:8,&quot;showLegend&quot;:true,&quot;scrollWheel&quot;:false,&quot;annotations&quot;:[],&quot;strings&quot;:{&quot;title&quot;:&quot;{origin} — delivery zones&quot;,&quot;zoneRow&quot;:&quot;≤ {km} km · {price}&quot;,&quot;outsideRow&quot;:&quot;&gt; {km} km · {price}&quot;,&quot;outsideRowWithPerKm&quot;:&quot;&gt; {km} km · {price} + {perKm}/km&quot;,&quot;notServedRow&quot;:&quot;&gt; {km} km · Not served&quot;},&quot;largestZoneKm&quot;:150,&quot;outsideRowText&quot;:&quot;&gt; 150 km · Not served&quot;};
  var fmt = function(n){
    try { return new Intl.NumberFormat(DATA.locale,{style:&quot;currency&quot;,currency:DATA.currency}).format(n); }
    catch(e){ return n.toFixed(2)+&quot; &quot;+DATA.currency; }
  };
  var map = L.map(&quot;map&quot;, { scrollWheelZoom: DATA.scrollWheel }).setView([DATA.origin.lat, DATA.origin.lng], DATA.zoom);
  L.tileLayer(DATA.tile.url, { attribution: DATA.tile.attribution, maxZoom: DATA.tile.maxZoom }).addTo(map);
  var sorted = DATA.zones.slice().sort(function(a,b){ return b.radiusKm - a.radiusKm; });
  sorted.forEach(function(z){
    L.circle([DATA.origin.lat, DATA.origin.lng], {
      radius: z.radiusKm * 1000, color: z.color, weight: 2, fillColor: z.color, fillOpacity: 0.18
    }).addTo(map).bindTooltip(z.label + &quot; — &quot; + fmt(z.price));
  });
  L.marker([DATA.origin.lat, DATA.origin.lng]).addTo(map).bindPopup(DATA.originLabel);
  (DATA.annotations||[]).forEach(function(a){
    if (a.kind===&quot;marker&quot;){
      var m=L.marker([a.position.lat,a.position.lng]).addTo(map);
      if (a.label){ if (a.permanentLabel) m.bindTooltip(a.label,{permanent:true,direction:&quot;top&quot;,offset:[0,-8]}); else m.bindPopup(a.label); }
    } else if (a.kind===&quot;line&quot; &amp;&amp; a.points.length&gt;1){
      var ln=L.polyline(a.points.map(function(p){return [p.lat,p.lng];}),{color:a.color,weight:a.weight}).addTo(map);
      if (a.label) ln.bindTooltip(a.label, a.permanentLabel?{permanent:true,sticky:true}:undefined);
    } else if (a.kind===&quot;polygon&quot; &amp;&amp; a.points.length&gt;2){
      var pg=L.polygon(a.points.map(function(p){return [p.lat,p.lng];}),{color:a.color,fillOpacity:a.fillOpacity}).addTo(map);
      if (a.label) pg.bindTooltip(a.label, a.permanentLabel?{permanent:true,sticky:true}:undefined);
    }
  });
  if (DATA.showLegend) {
    var legend = L.control({ position: &quot;bottomleft&quot; });
    legend.onAdd = function(){
      var div = L.DomUtil.create(&quot;div&quot;, &quot;stl-legend&quot;);
      var html = &quot;&lt;h4&gt;&quot; + DATA.originLabel + &quot;&lt;/h4&gt;&quot;;
      DATA.zones.slice().sort(function(a,b){ return a.radiusKm - b.radiusKm; }).forEach(function(z){
        var rowText = (DATA.strings &amp;&amp; DATA.strings.zoneRow ? DATA.strings.zoneRow : &quot;≤ {km} km · {price}&quot;)
          .replace(&quot;{km}&quot;, z.radiusKm).replace(&quot;{price}&quot;, fmt(z.price));
        html += &#39;&lt;div class=&quot;row&quot;&gt;&lt;span class=&quot;sw&quot; style=&quot;background:&#39; + z.color + &#39;&quot;&gt;&lt;/span&gt;&lt;span&gt;&#39; + rowText + &#39;&lt;/span&gt;&lt;/div&gt;&#39;;
      });
      if (DATA.outsideRowText) {
        html += &#39;&lt;div class=&quot;row&quot;&gt;&lt;span class=&quot;sw&quot; style=&quot;background:#9ca3af&quot;&gt;&lt;/span&gt;&lt;span&gt;&#39; + DATA.outsideRowText + &#39;&lt;/span&gt;&lt;/div&gt;&#39;;
      }
      div.innerHTML = html; return div;
    };
    legend.addTo(map);
  }
})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;"></iframe>

Shopify Liquid block

{% raw %}
<iframe title="Delivery zones — Origin" loading="lazy" style="width:720px;max-width:100%;height:480px;border:0;border-radius:12px" srcdoc="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot; /&gt;
&lt;title&gt;Origin — delivery zones&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.9.4/dist/leaflet.css&quot; /&gt;
&lt;style&gt;
  html, body { margin: 0; padding: 0; height: 100%; font-family: system-ui, sans-serif; }
  #map { width: 100%; height: 100%; }
  .stl-legend {
    background: rgba(255,255,255,0.95); padding: 10px 12px; border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18); font-size: 12px; line-height: 1.4;
  }
  .stl-legend h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; }
  .stl-legend .row { display: flex; align-items: center; gap: 8px; }
  .stl-legend .sw { width: 12px; height: 12px; border-radius: 3px; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;map&quot; style=&quot;width:720px;max-width:100%;height:480px&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;https://unpkg.com/leaflet@1.9.4/dist/leaflet.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
(function(){
  var DATA = {&quot;origin&quot;:{&quot;lat&quot;:56.1629,&quot;lng&quot;:10.2039},&quot;originLabel&quot;:&quot;Origin&quot;,&quot;zones&quot;:[{&quot;label&quot;:&quot;Local&quot;,&quot;radiusKm&quot;:10,&quot;color&quot;:&quot;#16a34a&quot;,&quot;price&quot;:49,&quot;perKm&quot;:0},{&quot;label&quot;:&quot;Near&quot;,&quot;radiusKm&quot;:25,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;price&quot;:79,&quot;perKm&quot;:0},{&quot;label&quot;:&quot;Regional&quot;,&quot;radiusKm&quot;:60,&quot;color&quot;:&quot;#f59e0b&quot;,&quot;price&quot;:129,&quot;perKm&quot;:0},{&quot;label&quot;:&quot;Wider&quot;,&quot;radiusKm&quot;:150,&quot;color&quot;:&quot;#ef4444&quot;,&quot;price&quot;:199,&quot;perKm&quot;:0}],&quot;currency&quot;:&quot;DKK&quot;,&quot;locale&quot;:&quot;da-DK&quot;,&quot;tile&quot;:{&quot;url&quot;:&quot;https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png&quot;,&quot;attribution&quot;:&quot;© OpenStreetMap · © Carto&quot;,&quot;maxZoom&quot;:19},&quot;zoom&quot;:8,&quot;showLegend&quot;:true,&quot;scrollWheel&quot;:false,&quot;annotations&quot;:[],&quot;strings&quot;:{&quot;title&quot;:&quot;{origin} — delivery zones&quot;,&quot;zoneRow&quot;:&quot;≤ {km} km · {price}&quot;,&quot;outsideRow&quot;:&quot;&gt; {km} km · {price}&quot;,&quot;outsideRowWithPerKm&quot;:&quot;&gt; {km} km · {price} + {perKm}/km&quot;,&quot;notServedRow&quot;:&quot;&gt; {km} km · Not served&quot;},&quot;largestZoneKm&quot;:150,&quot;outsideRowText&quot;:&quot;&gt; 150 km · Not served&quot;};
  var fmt = function(n){
    try { return new Intl.NumberFormat(DATA.locale,{style:&quot;currency&quot;,currency:DATA.currency}).format(n); }
    catch(e){ return n.toFixed(2)+&quot; &quot;+DATA.currency; }
  };
  var map = L.map(&quot;map&quot;, { scrollWheelZoom: DATA.scrollWheel }).setView([DATA.origin.lat, DATA.origin.lng], DATA.zoom);
  L.tileLayer(DATA.tile.url, { attribution: DATA.tile.attribution, maxZoom: DATA.tile.maxZoom }).addTo(map);
  var sorted = DATA.zones.slice().sort(function(a,b){ return b.radiusKm - a.radiusKm; });
  sorted.forEach(function(z){
    L.circle([DATA.origin.lat, DATA.origin.lng], {
      radius: z.radiusKm * 1000, color: z.color, weight: 2, fillColor: z.color, fillOpacity: 0.18
    }).addTo(map).bindTooltip(z.label + &quot; — &quot; + fmt(z.price));
  });
  L.marker([DATA.origin.lat, DATA.origin.lng]).addTo(map).bindPopup(DATA.originLabel);
  (DATA.annotations||[]).forEach(function(a){
    if (a.kind===&quot;marker&quot;){
      var m=L.marker([a.position.lat,a.position.lng]).addTo(map);
      if (a.label){ if (a.permanentLabel) m.bindTooltip(a.label,{permanent:true,direction:&quot;top&quot;,offset:[0,-8]}); else m.bindPopup(a.label); }
    } else if (a.kind===&quot;line&quot; &amp;&amp; a.points.length&gt;1){
      var ln=L.polyline(a.points.map(function(p){return [p.lat,p.lng];}),{color:a.color,weight:a.weight}).addTo(map);
      if (a.label) ln.bindTooltip(a.label, a.permanentLabel?{permanent:true,sticky:true}:undefined);
    } else if (a.kind===&quot;polygon&quot; &amp;&amp; a.points.length&gt;2){
      var pg=L.polygon(a.points.map(function(p){return [p.lat,p.lng];}),{color:a.color,fillOpacity:a.fillOpacity}).addTo(map);
      if (a.label) pg.bindTooltip(a.label, a.permanentLabel?{permanent:true,sticky:true}:undefined);
    }
  });
  if (DATA.showLegend) {
    var legend = L.control({ position: &quot;bottomleft&quot; });
    legend.onAdd = function(){
      var div = L.DomUtil.create(&quot;div&quot;, &quot;stl-legend&quot;);
      var html = &quot;&lt;h4&gt;&quot; + DATA.originLabel + &quot;&lt;/h4&gt;&quot;;
      DATA.zones.slice().sort(function(a,b){ return a.radiusKm - b.radiusKm; }).forEach(function(z){
        var rowText = (DATA.strings &amp;&amp; DATA.strings.zoneRow ? DATA.strings.zoneRow : &quot;≤ {km} km · {price}&quot;)
          .replace(&quot;{km}&quot;, z.radiusKm).replace(&quot;{price}&quot;, fmt(z.price));
        html += &#39;&lt;div class=&quot;row&quot;&gt;&lt;span class=&quot;sw&quot; style=&quot;background:&#39; + z.color + &#39;&quot;&gt;&lt;/span&gt;&lt;span&gt;&#39; + rowText + &#39;&lt;/span&gt;&lt;/div&gt;&#39;;
      });
      if (DATA.outsideRowText) {
        html += &#39;&lt;div class=&quot;row&quot;&gt;&lt;span class=&quot;sw&quot; style=&quot;background:#9ca3af&quot;&gt;&lt;/span&gt;&lt;span&gt;&#39; + DATA.outsideRowText + &#39;&lt;/span&gt;&lt;/div&gt;&#39;;
      }
      div.innerHTML = html; return div;
    };
    legend.addTo(map);
  }
})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;"></iframe>
{% endraw %}