Graphical User Interface Design for Community Asset point data using Leaflet

Web Map API

Annapolis County Community Mapping Project

Jean-Yves LandryProject Supervisor: Ed Symons

● 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

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

Purpose of the project

No such thing as too much data!

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

Many different web map APIs...

And More...

● 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

Result

The web map design was adapted from the Bootleaf template.

Web map functionalitiesLeaflet Plugins

● Markercluster

● Typeahead

● Locate

● Groupedlayercontrol

Other

● Navigation bar

○ About

○ Basemaps

○ Side Panel

● Point Data Popup

Leaflet Plugins ● Markercluster

● Typeahead

● Locate

● Groupedlayercontrol

Spiderfy option

available if point

data is located at

the same

location.

● 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

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

● 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.

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.

● 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.

W

id

th

red

uced

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.

● 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

● 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

● 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.

Problems encounteredIdeally, 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

Problems encounteredTrials 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)

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.

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.

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 .

What’s next● Improve Popups and sidebar information

Or realtor website

showing scroll down lists

of clusters in popups…

What’s next - Most Importantly

Continue consultation with the community mapping

volunteers...

● Ed Symons, Kathleen Stuart

Thank You Questions or Comments?