Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (9)
Recently uploaded
Recently uploaded (20)
Graphical user interface design for community asset point data using leaflet web map api
- 1. Graphical User Interface Design for Community Asset point data using Leaflet Web Map API Annapolis County Community Mapping Project Jean-Yves Landry Project Supervisor: Ed Symons
- 2. โ Community Mapping Project - Map Annapolis โ Community created assets โ Purpose of the Project โ Web Map Application program interface (API) โ Leaflet โ Web Map Graphical User Interface Result โ Problems encountered โ Next steps Overview
- 3. Community Mapping Project โ In 2013, the students at COGS and community members from Bridgetown and Annapolis Royal began collaborating on the Annapolis County Community Mapping Project โ As the community mappers have gained proficiency in mapping, the information added to the map has increased tremendously โ Groups are using different tools to map their assets; Google my maps and AGOL
- 4. Purpose of the project No such thing as too much data!
- 5. Purpose of the project โ Improve the Graphical User Interface using Leaflet web map API; โ Explore designs and plugins for: โ Clustering point data โ Sidebar listing of data in view โ Search filter of point data and geographic names โ Popup information
- 6. Many different web map APIs... And More...
- 7. โ Lightweight and easy to use, โ One of the most popular open source mapping library โ Hundreds of plugins available, โ Works efficiently across all major desktop and mobile platforms, โ Large active community constantly developing new plugins and templates, โ Great for showing and interacting with map data, but does not provide data or storage, it is solely a web interface tool
- 8. Result The web map design was adapted from the Bootleaf template.
- 9. Web map functionalities Leaflet Plugins โ Markercluster โ Typeahead โ Locate โ Groupedlayercontrol Other โ Navigation bar โ About โ Basemaps โ Side Panel โ Point Data Popup
- 10. Leaflet Plugins โ Markercluster โ Typeahead โ Locate โ Groupedlayercontrol Spiderfy option available if point data is located at the same location.
- 11. โ Markercluster โ Typeahead โ Locate โ Groupedlayercontrol Leaflet Plugins Side Panel lists visible point data. As mouse hovers over points the location is highlighted on the map On click of point data in either panels, the window zooms to the location and popup window is opened Side Panel Search using typeahead enables the user to search through visible point data and keeps matching Information in list Location Search on Navbar enables the user to find a location and any point data matching the search. The locations are from geonames.org and the search is limited to the western part of Nova Scotia
- 12. Leaflet Plugins โ Markercluster โ Typeahead โ Groupedlayercontrol โ Locate Clicking the layers in the grouped layer control will add them to the map. This plugin is highly customizable with the data added
- 13. โ Markercluster โ Typeahead โ Groupedlayercontrol โ Locate Leaflet Plugins By pressing the locate arrow, the window zooms on the user location enabling the user to visit the point data on the map.
- 14. On your mobile or Tablet? Iphone 6 Nexus 10 The web map application has a responsive design to the majority of devices due to its use of bootstrap plugin.
- 15. โ Navigation Bar โ About โ Basemaps โ Side Panel โ Point Data Popup Web map functionalities - Other The Navigation Bar uses Bootstrap to present pop up windows, drop down selection, and side Panel hide functions. As screen width is reduced, the Navigation Bar is modified to help keep the user interface clear and concise. Widthreduced
- 16. Web map functionalities - Other โ Navigation Bar โ About โ Basemaps โ Side Panel โ Point Data Popup The About popup gives the web designer the opportunity to give users important information about the project, the data used and the possibility to send questions or comments.
- 17. โ Navigation Bar โ About โ Basemaps โ Side Panel โ Point Data Popup Web map functionalities - Other Hundreds of maps are available freely online and can be easily displayed in the webmap. I.e. openstreetmap.org, mapquest, ESRI etc... Basemaps were inserted in the navigation bar to allow for more room on the grouped layer control located on the map
- 18. โ Navigation Bar โ About โ Basemaps โ Side Panel โ Point Data Popup Web map functionalities - Other Although the Side Panel is open when the Web Map is loaded, the user has the ability to hide it by selecting either buttons
- 19. โ Navigation Bar โ About โ Basemaps โ Side Panel โ Point Data Popup Web map functionalities - Other Popups are accessed by clicking on the point data or by selecting them from the side panel list or search list.
- 20. Problems encountered Ideally, the two volunteer groups continue to use their system to acquire data and the web map accesses the data directly from their maps. However... โ As leaflet uses Geojson, when KML data is translated with leaflet plugin omnivore, the folder tags are lost โ These tags are needed to differentiate the layers, therefore layers need to be separated prior to translating from kml to geojson โ Some attribute data becomes aggregated
- 21. Problems encountered Trials to separate kml with folder tag prior to translation to geojson was very slow Accessing data from google my maps through URL does not appear to work with leaflet. โ (https://www.google.com/maps/d/u/0/kml?mid=1ok5zJ0XzCLjXfWBr-nbbWbFIv-I&forcekml=1)
- 22. Whatโs next โ Investigate other option to automate data sync from Google my maps โ Hosting data on another platform such as Cartodb or mapbox to obtain better interoperability between data.
- 23. Whatโs next โ Investigate possibility to present Esri feature classes and other data in leaflet web map โ Groups would be able to use their preferred data entry method and share one Web map interface to display all the information.
- 24. Whatโs next โ Improve Popups and sidebar information As most web map APIs, Leaflet is fully customizable and with more time could allow better popups for cluster groups and the addition of pictures on the side panels similar to current AGOL maps used by the Age Advantage Association .
- 25. Whatโs next โ Improve Popups and sidebar information Or realtor website showing scroll down lists of clusters in popupsโฆ
- 26. Whatโs next - Most Importantly Continue consultation with the community mapping volunteers...
- 27. โ Ed Symons, Kathleen Stuart Thank You Questions or Comments?
Editor's Notes
- Good morning, my name is Jean-Yves Landry and today Iโll be talking about a new graphical user interface design using the leaflet web map API.
- To give you an overview for todayโs presentation; First weโll start with a small introduction of the community mapping project Map Annapolis. Then weโll move on to where my project fits in with this project Iโll do a quick overview of the web map API used (leaflet) Iโll go through the GUI design and finally Iโll go through some problems that iโve encountered and finish with possible next steps.
- In 2013, the students at COGS and community members from Bridgetown and Annapolis Royal began collaborating on the Annapolis County Community Mapping Project. all volunteers in the Mapping Project learned the technology and software that makes web-based mapping possible. And then, they chose the stories they wanted to tell with these maps by gathering and mapping the data that best described the place they call home. As the community mappers got better proficiency in mapping, the information added to the map increased tremendously. An important point is that the two different groups use two different tools to map their assets, google and AGOL.
- This is the data gathered by the group using google my maps. We can observe that the volunteers were really quite busy. With this data provided by the community mapping project, our main objective was to find a proper clustering; a better representation of the data (less overwhelming). Since every web map API has some type of clustering and they are all pretty decent, we decided to expand the scope of the project to include the design or adaptation of a new GUI that could potentially display the current and future data from both groups, google and AGOL. However, I missed Kathleenโs web programming class so we thought it would be wise to focus only on the google data.
- Just to reiterate a little bit, the main objectives was to explore designs and plugins for: Clustering point data Sidebar listing of data in view window Search filter of point data and geographic names Popup information And ultimately familiarize myself with Javascript and custom web mapping designs.
- So ya thereโs a couple types of web APIs, all with their pros and cons which could be the subject of another project. For this project we thought it would be interesting to try an open source API, leaflet. Also, Ed had been testing it for some time so didnโt take much convincing.
- So hereโs a little bit of information on the the web map API we decided to use for the new GUI. Lightweight and easy to use, One of the most popular open source mapping library Hundreds of plugins available, Works efficiently across all major desktop and mobile platforms, Large active community constantly developing new plugins and templates, Great for showing and interacting with map data, but does not provide data or storage, it is solely a web interface tool This works for us as our data is already hosted through google and ESRI
- So instead of keeping the result for the end Iโm going to start by showing you what we came up with. I had big plans of designing from scratch, but after fumbling with jquery and bootstrap to build a simple nav bar, I found a template that I could modify and adapt to fit our data. I have to tell you, I have to give it to AGOL for making it easy to drag and drop widgets onto your web map...
- Now Iโd like to run you through the web map functionalities and the plugins that were used to build the map. Like mentioned before, leaflet is light on its own with only some core features but to extend its functionality it uses third party plugins designed by users. These would be somewhat equal to widgets in ESRI. Should note Bootstrap plugin is also used to collapse windows (sidebar) and for responsive design. Iโm going to start by explaining the leaflet plugins then Iโll move to other functionalities.
- The first plugin that was used was definitely the most important for this project. Iโm sure everyone knows what clustering does this map shows huge improvement compared to the map presented at the beginning of this presentation. A note about this clustering is that it was setup to cluster all the different layers present in the overlay to show up in the same clusters. If the overlay is on then it is added to the cluster. Finally, the markercluster also has option โspiderfyโ where if a point data is located at the same location or the max zoom extent for the map is less than the clustering extent the cluster will open up to show the point data.
- The next plugin used was typeahead, along with some other coding, to create the filters. The point data that are present in the current window are appended in the sidebar panel with the name and community in bracket and are highlighted when the mouse hovers over them. With the help of lists that are created with the layers, if the layers are present in the sidebar then can be filtered. The navbar filter uses all the layers even if they are closed, it also searches geonames which is limited to western part of nova scotia. On click of any search results the window will zoom to the point data and the popup will open.
- The grouped layer control plug in is simple it adds an overlay to your map. Itโs also possible to add your basemaps in the overlay but then it takes a lot of room.
- The plugin locate works just like the google my location. It accesses the userโs location and positions it on the map allowing the user to visit markers. Because itโs not always best to use your laptop...
- ...The template was built with a responsive design, again through the bootstrap plugin which makes it fairly easy to customize your window when the screen size is reduced. On the left we can see the iphone and a tablet on the right.
- The responsive design can be seen in the navigation bar when the window size is reduced. Reduces the size and makes it easier to use
- I modified the nav bar to show three menus. The About is fairly self explanatory, it was designed so that the user can easily access a help panel, contact the web manager, and or refer to the metadata of the layers used in the map.
- The basemap can be changed through this menu. Again to save some space on the main window.
- As the sidebar is quite extensive especially on a small screen. You can hide it by pressing either of these buttons.
- Finally the popups are made with the leaflet bindPopup method that attaches a popup with the specified HTML content, in this case a table referring to the attributes of the cemetary layer.
- The Ideal situation would be that the two volunteer groups continue to use their system to enter data and then the web map accesses the kml (or feature class) directly from their maps . They could see their new data as soon as itโs added. However, because leaflet uses geojson and that our data is kml we need to translate it with the plugin omnivore. This works great if you donโt have a multilayer kml, unlike in our case. The kml is separated by a folder tag, cemetary, pre and post confederation, which is lost during the translation and some attribute data somehow becomes aggregated, making popups a bit more difficult.
- So then we tried with various plugins and xml filters with the help of GIS Stackexchange users but the map loading was incredibly slow, We also tried to access the data throught a direct google my maps URL to avoid having to filter, but although it works flawlessly with Arcgis API and Google API, after several days of head knocking we were not able to get it to work. But we did get the conversation going on Stackexchange
- So whatโs next. Well it would be important to investigate other options to automate data sync from google my maps. Or simply host it on another platform such as Cartodb or mapbox to obtain better interoperability between data.
- Investigate possibility to present Esri feature classes and other data in leaflet web map, practically each of these rows represent a different map. It would be interesting to investigate having all the layers in one single map. Again the groups to continue using their preferred data entry method while sharing the same Web map interface to display all the information.
- It would also be interesting to explore options to display more attribute information such as pictures on the sidebar, similar to the currently existing AGOL map used by the community project.
- Or like this realtor website which has this nifty scroll down popups for clusters.
- But most importantly, continue consultation with the community mapping volunteers and hear from them what they would like next.