Google Summer of Code/2012/OSM widget constructor

From OpenStreetMap Wiki
Jump to navigation Jump to search


The goal of this project is to create a very simple to use OpenStreetMap widget that can be embedded on websites, blogs and social network sites. The widget editor will consist with the following functionalities:

  • Create a Placemark: Create a mark centered around a single waypoint.
  • Create a route map: Draw a route / path on a map. This editor will be implemented using modes. It will have two main modes: single-point and multi-point mode
  • Create an advanced map: Multiple placemarks with custom icons, polygon regions and routes (paths) can be drawn. Placemarks will be moveable, deletable and editable (name description and symbol icon can be edited).

These editing modes should make it easy to create both simple and advanced maps. To make things easier, most editor elements will also have hover tooltips. Various elements will also have questionmark-buttons besides them which show popup help explanations.


The widget editor additional features (designed so far):

  • Welcome screen: A dialog that explains the widget editor's functionalities and lets the user choose one.
  • Send link by email and SMS: Where the created (and shortened) link of the map can be sent via email and SMS. A mobile friendly feature.
  • iframe format: The user can embed the map that he created on a site using an iframe, customizing the iframe's dimensions.
  • Multiple map styles: The user an choose between maps styles in the create and show segments. The selected map style in the create segment will be displayed in the show segment, but can be changed if needed.
  • Tooltips: After the 'Welcome screen', the user is presented with additional help tips in the bottom left area.

Additional updates: Late June and early to mid July the widget constructor have (and will continue) to change it's UI in order to get a more intuitive and simplistic design. The simple (create a placemark/target will consist with a click to place and click to share method. The target and all of the elements on the map will be editable (in the "show" part). The more advanced features will be placed in the contextual menu (rightclick/longpress event). So far, the idea is to have the following features: Right click on:

  • Map:
    • Add placemark
    • Start polyline
    • Start polygon
    • Reset map
    • Cancel
  • Placemark:
    • Add/edit details
    • Delete
    • Reset location
    • Cancel
  • Polyline/Poligon line:
    • Add node
    • Cancel
  • Polyline/Poligon node:
    • Delete node
    • Reset node location
    • Cancel

(This options are still in an early demo phase and are prone to changes and additions, but will be final in a couple of weeks)