Map of local shops and services based on OpenStreetMap

This project is about building a responsive webmap of shops and services based on OpenStreetMap (OSM) data of a desired location. The goal is to provide a local map for people from a village, a town or a city, showing all shops and services, with their full contact information (including phone number and website) and opening hours. Coded in HTML/CSS/Javascript, with jQuery, Bootstrap and LeafletJS. Versions based on OpenLayers2 and OpenLayers3 were also initiated.

This project can be divided in two main sections: 1) the collection of OSM data and 2) the development of the webmap.

The data displayed in this webmap (named points of interests (POI)) represents shops and services. These POI are collected through an overpass-turbo query based on a collection of key-value OSM tags. Data is exported from overpass-turbo as a geoJSON file. Note that for most of POI, both node and ways are queried, because these POI may be represented either by a point (node) or a polygon delineating a building (ways). But some POI appeared to be also modelled as relations (e.g., school). The table osm_tags_filter.ods hold the collection of key-value tags from OSM that are displayed in the map. This table is then used:

• to generate the overpass query (from the second page of the ods file)
• to update the items.json file (from the first page of the ods file, use csv2json converter, e.g., http://www.convertcsv.com/csv-to-json.htm)

The query is within the file overpass-query.txt, that can be generated from the osm_tags_filter.ods file. By adding center in out center body; at the end of the overpass query, ways and relations are summarized by a point (centroid of the polygons). There may be some duplicata when both a point and ways exist for the same POI. This is prevented by excluding polygon from the geojson in webmap.filterGeojson(feature). Queries are then exported as a geoJSON file.

The geoJSON file is used twice in the webmap (for the map and the list) but is loaded once in the loadGeojson(url) function.

The global architecture of the webmap is based on the responsive-webmap repository https://github.com/nobohan/responsive-webmap. However, LeafletJS was used instead of OpenLayers 3 as the mapping library. The webmap was mainly developed for smartphone and large screens views.

The list is generated by parsing the geoJSON file (see Data above). Items are included in the list only if they match certain conditions (e.g., have a name property).

The map icons are from https://mapicons.mapsmarker.com/. Colors of the icons can be changed there. Currently, it is #f75823.

This work is licensed under the MIT license https://opensource.org/licenses/MIT.

• OSM: Add mutuelles, which tagging? --> office=administrative
• Popups and highlight icons...: still to revise!!! highlight should be more clear + center the map! also on mobile...
• bug IE...
• bug mobile when scrolling
• sort items in the list
• autocomplete results should live modify the list
• add button zoom to village for demo purpose
• Filtering by topic (=icon name)
• Think about icons
• Sort POI in the list by type (icon) ~done
• another base map
• increase items in overpass queries and items.json
• mobile: remove "entry menu" when item is selected in the drop-down menu (so in webmap.filterList())
• mobile: swipe left panel
• mobile: geoloc

Further:

• About page in a bootstrap modal window
• try on large cities
• Script for analysing OSM data
• Make a sequence diagram for JS functions
• Display list as a function of map view, link map icons and list.
• Find smarter ways of handling opening hours data...