Bing Maps Aerial Generator Webapp

Project summary:

On the most basic level, the web application will generate aerial map images with custom map markers containing corporate logos showing the locations of retailers surrounding a particular address. User can export the generated aerial image in JPG or PNG format. By selecting from a list of POI groups (fast food, banks, etc), the application populates the map with matching company logos. User can manipulate the map markers by moving, resizing, or deleting them. Custom user-defined map markers can be added through a pop-up dialog, allowing the user to upload their own images/text or by browsing through an available list of logos. Users can perform global manipulation to all markers using sliders (adjust size, etc).

Overall design guidelines:

Importance should be placed on the website being clean and easy to navigate. Extensive use of AJAX is highly preferred to eliminate redundant page loads. Buttons must be easy to recognize and identify. Use of jQuery themed form elements and buttons is encouraged as long as they work with the layout and style (e.g., the buttons used in Gmail). Contrasting colors are a plus. Please see attached design samples for an idea of how the website should look. A rough wireframe is also attached.

This is a full ground-up build. The developer will need to first make sure they can make the critical functions work first (required Bing Maps functionality). Once those are confirmed and working, the layout and user interaction development can begin. Should be comfortable working with payment providers (Spreedly, Recurly, etc). No CMS or other pre-made systems, please.

Map layout requirements:

Map markers should not overlap. They must have a stylized look with adequate padding around the logo. “Speech bubble” style markers are desired, but may be omitted if they prove difficult for accurately placing markers on the map. The primary address (the center point address) must be highlighted separately from the rest (perhaps a different border on the marker).

Programming requirements:

* LAMP architecture.

* AJAX interaction with the map and application.

* Save current state in real time.

* MVC coding practices, either using a well-known framework (must be fast and easy to manipulate) or one that is custom written.

* jQuery or similar for front-end interaction.

Procedural flow:

1. Convert address to geocode location and center map. Place graphic marker on address.

2. Once user confirms that the address is correct (visual confirmation by looking at map), make application call to bill user. Prevent user from from changing the address past a certain boundary (perhaps limit address changes to within 100-500 feet)

3. In a checkbox list next to the map, select points of interest such as “Banks” and “Fast Food.”

4. Using Bing Maps Search Service, convert selected points of interests (from the checkbox list) to markers on the map. Use current map zoom as radius for search.

5. Match names of markers to their corporate logos (for instance, a marker for “Walmart” should have a Walmart logo; a pool of logos will be provided for the developer).

6. Allow user to click and move markers. Clicking at corner allows user to resize marker (and logo image inside marker).

7. User can manipulate the size of street names on the map by using a slider.

8. Pop-up dialog that allows user to add custom marker on map (either as just text inside a box or an image). Ask if user wants to save marker for future maps (ask to name).

9. Pop-up dialog allows user to add watermark image in corner of map (slightly transparent). Can be saved for future maps.

10. Export current view of map as either a JPG or PNG image.

Optional:

* Integrate with ParcelStream parcel boundry API (SDK and documentation available). Use ParcelStream to outline just the address entered.

* Create maps with Birds Eye View images instead of just map or satellite images.

AJAX Картографія та карти CSS jQuery / Prototype PHP

ID Проекту: #1177097

Про проект