https://penpot-map-editor.netlify.app/

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=23b2b087-5b61-4524-bcc2-fb57bfbcc54d
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9    <title>Penpot map editor</title>
10    

10<script type="module" crossorigin src="/index.js"></script>

10
11    <link rel="stylesheet" crossorigin href="/assets/index-DXVThex0.css">
12  </head>
13  <body>
14    <div class="export-settings">
15      <label for="map-height">
16        Height:
17        <input
18          type="number"
19          id="map-height"
20          name="map-height"
21          placeholder="300"
22          min="1"
23        />
24      </label>
25      <label for="map-width">
26        Width:
27        <input
28          type="number"
29          id="map-width"
30          name="map-width"
31          placeholder="410"
32          min="1"
33        />
34      </label>
35    </div>
36
37    <div class="export-settings">
38      <label for="select-map-provider">
39        Change map provider:
40        <select id="select-map-provider" class="select">
41          <option value="osm" selected="selected">OpenStreetMap</option>
42          <option value="thunderforest">Thunderforest</option>
43        </select>
44      </label>    
45      <label id="select-thunderforest-map-type-label" for="select-thunderforest-map-type" class="hidden">
46        Change map type:
47        <select id="select-thunderforest-map-type" class="select">
48          <option value="atlas" selected="selected">Atlas</option>
49          <option value="cycle">Cycle</option>
50          <option value="transport">Transport</option>
51          <option value="landscape">Landscape</option>
52          <option value="outdoors">Outdoors</option>
53          <option value="transport-dark">Transport Dark</option>
54          <option value="spinal-map">Spinal Map</option>
55          <option value="pioneer">Pioneer</option>
56          <option value="mobile-atlas">Mobile Atlas</option>
57          <option value="neighbourhood">Neighbourhood</option>
58        </select>
59      </label>
60    </div>
61
62    <div id="thunderforest-key-container" class="hidden">
63      <p class="alert">
64        You need a <a href="https://www.thunderforest.com/" target="_blank">free thunderforest API key</a> to use the advanced map styles.<br />
65        Once submitted, the key will be saved permanently in penpot.
66      </p>
67
68      <div class="thunderforest-key-input">
69        <label for="thunderforest-key">
70          Thunderforest API key:
71          <input
72            type="text"
73            id="thunderforest-key"
74            name="thunderforest-key"
75            placeholder="fn643abc099..."
76          />
77        </label>
78        <button type="button" data-appearance="primary" data-handler="save-thunderforest-key">
79          Save
80        </button>
81      </div>
82    </div>
83    
84    <div class="map-container">
85      <div class="auto-search-wrapper">
86        <input
87          type="text"
88          autocomplete="off"
89          id="search"
90          class="full-width"
91          placeholder="Search a place..."
92        />
93      </div>
94      <button type="button" data-appearance="primary" data-handler="create-image">
95        Take picture here
96      </button>
97      <div id="map"></div>
98    </div>
99
100  </body>
101</html>