DEV Community

💻 Arpad Kish 💻
💻 Arpad Kish 💻

Posted on

Pixplore (2012): Discovering the World Through Maps and Social Media

#api #showdev #sideprojects #webdev

Finding interesting places to visit in a new city or even your own neighborhood can be a challenge. While maps give you directions, they don't always give you a feel for a location. Pixplore is a web-based application designed to bridge this gap by combining geographical mapping with the power of visual social media.

By integrating Google Maps, Facebook, and Instagram, Pixplore allows users to visually explore locations through the eyes of others before ever stepping foot there.

Core Features

Pixplore acts as a visual discovery engine centered around a map interface. Here is what it offers:

  • Map-Based Exploration: Users can view an interactive Google Map and search for specific addresses or center the map on their current physical location (using browser geolocation).
  • Visual Location Previews: When a user searches an area, the app drops pins on nearby points of interest. Clicking a pin pulls up a feed of recent Instagram photos tagged at that exact location.
  • Social Check-ins: Users can log into the app via Facebook. If they find a place they are currently visiting, they can use the "I have been there" button to directly publish a check-in to their Facebook timeline.

How It Works: The Architecture

Pixplore is built on a classic LAMP/LEMP stack, utilizing PHP for the backend and JavaScript for a dynamic frontend experience.

The Backend (PHP)
The server-side logic is heavily object-oriented and designed to act as a bridge between the frontend and the external APIs.

  • App Class: Manages the core application state, including establishing Facebook and Database connections and handling the registration of users via Facebook Access Tokens.
  • Database Management: A custom Database wrapper handles interactions with a MySQL database to save user data, register places they view, and track view counts.
  • Third-Party Integration: The application utilizes dedicated PHP classes for interacting with Facebook (via an OAuth wrapper) and Instagram. Interestingly, the Map class relies on the Instagram API to search for physical locations within a specific radius of given coordinates.

The Frontend (JavaScript & UI)
The user interface is built using HTML5 and stylized with Twitter Bootstrap for a responsive, clean layout.

  • Mapping: map.js initializes the Google Maps canvas, manages geocoding (converting search queries into coordinates), and dynamically draws custom markers based on the data returned by the backend.
  • Photo Feeds: The feed.js script handles fetching the images. It uses a client-side library called Instajam to query the Instagram API directly using the location ID provided by the map markers. It then populates the DOM with thumbnails of these photos.
  • AJAX Architecture: To keep the map fast and fluid, the frontend communicates with the ajax.php endpoint to perform searches, register places to the database, and handle authentication callbacks without needing to refresh the page.

The User Journey

  1. Authentication: A user lands on the index.php page and clicks "Login via Facebook". The Facebook JavaScript SDK handles the popup and permissions. Once authorized, the access token is sent to the PHP backend to register the user, and they are redirected to explore.php.
  2. Exploration: On the explore page, the user can click "Where am I" to center the map on their location. The app calculates a radius based on the map's current zoom bounds and sends a search request to the backend.
  3. Discovery: The backend queries Instagram for nearby locations and returns them to the frontend, which plots them as pins.
  4. Interaction: When the user clicks a pin, Pixplore displays the location's name and fetches the latest photos taken there. If the user decides to visit, they can click "I have been there" to trigger a Facebook Graph API call that creates a check-in at that venue's coordinates.

Conclusion

Pixplore is a neat example of mashing up multiple APIs to create a distinct utility. By utilizing Google Maps for navigation and geometry, Instagram for localized visual content, and Facebook for identity and sharing, it provides an engaging way to discover and interact with the world around you.

https://github.com/arpad1337/pixplore

Top comments (0)