IG
Ivo Garcia

S V G Map Uploader - Copy this Html, Bootstrap Component to your project

Create a web application that allows users to upload SVG files from their computer. The interface should start with a large, centrally located button labeled 'Upload SVG'. Once the user uploads an SVG file, the application should display an interactive preview of the uploaded SVG. Each element within the SVG (such as regions of a map) should be identifiable and clickable. When the user clicks on a region of the map, the name of the region (extracted from the 'label' attribute of the SVG) should appear in an information box to the right of the map preview. Below the region name, there should be a section displaying additional details, such as population, area, and other relevant statistics, which can be loaded from an associated JSON file. The interface should also include an 'Export Data' button that allows users to export the interactive data as a JSON file. Add a configuration panel at the top of the application that lets users customize the colors of the map regions and the style of the information box, with options for background color, font, and font size." Analysis of the Prompt: Specificity and Description: The prompt clearly describes each part of the interface and how it should function, including how users interact with the SVG file and what information should be displayed. Detailed Functionality: In addition to the basic function of uploading an SVG file, the prompt details interactive functionalities, such as clicking on regions and displaying additional information, as well as customizing colors and styles. Identification of Necessary Components: The prompt specifies essential components such as the 'Upload SVG' button, the interactive SVG preview, the information box for details, and the configuration panel. Interaction and Usability: By detailing how the interaction should occur (e.g., clicking on a region to display details), the prompt ensures the application is intuitive and easy to use. Use of Specific Attributes and Data Export: It mentions the use of specific SVG attributes (like 'label') and includes a data export functionality, adding practical value to the application. By following these guidelines, the prompt provides a comprehensive and clear description of what is needed to create a functional and interactive web application, ensuring that all important aspects of the user interface and experience are addressed.

Prompt
Component Preview

About

SVG Map Uploader - Upload SVG files, preview interactive maps, click regions for details, customize colors, and export data as JSON. Bu. Get free template!

Share

Last updated 1 month ago