Sample

GeoJSON Editor

\n\n

Instructions

\n Use the tools on the map to draw shapes. Click save to store your\n GeoJSON data.\n

\n\n \n \n Save to Database\n \n\n \n Export GeoJSON\n \n\n \n Clear Map\n \n \n\n

\n Current Data ({geoJsonData.features.length} features)\n

\n \n {JSON.stringify(geoJsonData, null, 2)}\n \n

\n\n

\n Saved Items ({savedItems.length})\n

\n {savedItems.length === 0\n ? (\n \n No saved items yet\n

\n )\n : (\n \n {savedItems.map((item) => (\n \n

\n {item.name}\n

\n \n {item.timestamp}\n

\n \n Features: {item.data.features.length}\n \n loadFromDatabase(item)}\n style={{\n padding: \"6px 12px\",\n backgroundColor: \"#2196F3\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontSize: \"12px\",\n }}\n >\n Load\n \n \n ))}\n \n )}\n \n \n\n {/* Map */}\n \n \n );\n};\n\nfunction App() {\n return (\n <>\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Sample\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/nmsilva/campanhapsdalcofra/code/map-geojson.tsx","extension","actionData","errors"]