When I set out to create Map it!, the idea was to develop a seamless, user-friendly application that generates links to popular map services from geo-coordinates, all while being accessible across devices.
However, there was a significant challenge: my programming skills were fairly basic, primarily limited to Python. That’s where ChatGPT-4 became an invaluable resource. Acting as a coding assistant, it helped bridge my knowledge gap. From debugging PHP functions to optimizing JavaScript for frontend interactions, ChatGPT played a pivotal role in the development process. With its help, I was able to overcome challenges, implement features I had initially thought were beyond my reach, and ultimately bring this project to completion.
Map it! is now live at map-links.net and also available at the Google Play Store. With it, you can easily create shareable map links:
✔️ by entering an address
✔️ by uploading a photo (with GPS data in EXIF format)
✔️ by manually entering coordinates (supports DD, DMS, DDM)
Links are created for 7 different map services, including Google Maps, Apple Maps, Bing Maps, Waze and OpenStreetMap.
Screenshots from the app (click to enlarge)
In the next sections I will outline the different project phases – from conceptualization to deployment – and explore how each stage was tackled with a combination of problem-solving, technical strategies, and assistance from ChatGPT.
Phase 1: Conceptualization
The initial concept for Map it! revolved around providing users with a tool to generate direct links to major mapping services like Google Maps, Apple Maps, OpenStreetMap, and more. A key requirement was to allow users to input geo-coordinates in various formats, such as Decimal Degrees (DD), Degrees Minutes Seconds (DMS), and Degrees Decimal Minutes (DDM).
Key Requirements:
- Support for popular map services.
- Flexibility in accepting and converting geo-coordinate formats.
- Responsiveness and usability across devices.
- Integration with tools like Nominatim for address-based coordinate fetching.
- Deployment as a PWA with mobile app capabilities.
Once these requirements were defined, the focus shifted to building the backend, which would serve as the foundation for the app.
Phase 2: Backend Development
The backend formed the backbone of the app. Written in PHP, it handled tasks such as processing uploaded image files to extract GPS data and validating manually entered coordinates. One major challenge was dealing with corrupted or missing GPS data. For instance, some mobile browsers zero out GPS values in photos to preserve user privacy.
To address this, I implemented a validation function that could identify and gracefully handle these cases. Invalid files were automatically deleted from the server, ensuring clean and efficient file management. This ensured that corrupted GPS data didn’t disrupt the application.
Code example for GPS data extraction and its validation:
function extract_gps_info($coordinates, $ref) {
$degrees = (int) $coordinates[0];
$minutesRaw = explode('/', $coordinates[1]);
$minutes = $minutesRaw[0] / $minutesRaw[1];
$secondsRaw = isset($coordinates[2]) ? explode('/', $coordinates[2]) : [0, 1];
$seconds = $secondsRaw[0] / $secondsRaw[1];
$direction = ($ref == 'W' || $ref == 'S') ? -1 : 1;
return $direction * ($degrees + ($minutes / 60) + ($seconds / 3600));
}
if ($latitude_dd == 0 && $longitude_dd == 0) {
echo "<small>Error: The GPS data might be corrupted or missing.</small><br><br>";
if (file_exists($uploadFilePath)) {
unlink($uploadFilePath);
echo "<small>The invalid file has been deleted from the server.</small><br><br>";
}
return;
}Phase 3: Frontend Development
Address-Based Coordinate Fetching
Integration with Nominatim’s API enabled users to type an address and receive geo-coordinates in real time. This functionality required careful handling of API responses to ensure accurate results.
Input Validation
Mobile-specific challenges like handling decimal separators and validating coordinate formats were addressed with a mix of client-side and server-side validation. For example, mobile browsers often replace decimal dots with commas, requiring normalization to ensure compatibility.
Phase 4: UI/UX Design
The design phase aimed to create an intuitive interface that would be accessible to users on both desktop and mobile devices. I focused on:
- Structuring input forms to accept different geo-coordinate formats.
- Ensuring accessibility by following responsive design principles.
- Using collapsible sections to present additional details without overwhelming the user.
ChatGPT was instrumental in refining some of these UI/UX decisions, offering practical advice for aligning elements and optimizing the user experience.
Phase 5: Testing and Optimization
Before launch, extensive testing was conducted to ensure:
- Compatibility across browsers and devices.
- Proper handling of edge cases, such as corrupted GPS data.
- Optimal performance for address lookups and file uploads.
Phase 6: Deployment and PWA Integration
To make Map it! accessible as both a website and an app, I leveraged Progressive Web App (PWA) technology. This involved creating a manifest file and a service worker to provide offline functionality and an app-like experience.
The app was also packaged using Trusted Web Activity (TWA) for deployment on the Google Play Store, enabling users to install it directly on their devices.
Conclusion
Throughout the development of Map it!, ChatGPT-4 proved to be an indispensable tool. Acting as a virtual coding assistant, it filled the gaps in my programming knowledge and significantly accelerated the development process.
That said, the collaboration was not without its hurdles. ChatGPT occasionally introduced errors or proposed solutions that didn’t quite fit the context. For instance, some initial code suggestions required significant refinement to work as intended. These moments underscored the importance of understanding and validating the code rather than relying blindly on AI-generated outputs.
Despite these setbacks, ChatGPT’s overall contributions far outweighed its occasional missteps. This project demonstrates how tools like ChatGPT can amplify the capabilities of solo developers, enabling them to tackle complex projects and deliver bugless, user-centric applications.