Image may be NSFW.
Clik here to view.
I have submitted a pull request for the Map Block in Mozilla’s Webmaker App. This component was extremely helpful in learning nuances of programming with Node.js, Vue.js and Leaflet.js. Currently it will locate on a map based on latitude and longitude coordinates and display a marker on the specified location. You can optionally add information to a popup window which will give further information the user can input like address or address title.
The Map brick at this moment is the most complex and most memory-consuming brick in Webmaker App but in the future additions may be able to made to reduce it’s load on network such as better caching of the map tiles. However, making less network work means that the application will be more bloated so that is a trade-off to be explored in future fixes.
There were many issues, but to highlight:
- Choosing map provider was a very difficult process which took a great deal of research into licensing and map tile servers. In the end, I decided to use MapQuest as there are no limits on the use and is free for anyone to use within their application. Since what Webmaker App does is allow others to create their own applications, this was the most permissive server to use which will allow people enabled with creating their own apps, to not worry about licensing.
- Using maps in a dynamic application was difficult due to re-loading of the page and the fact that it is run on Vue.js which manages the presentation. Mitigating the presentation of the map with Leaflet involved re-setting the map during page re-loads.
- Multiple maps on the same page was perhaps one of the most difficult tasks to solve. I used the singleton paradigm to allow access to Leaflet through all blocks within the app. However, using a unique ID based on the newly created block for the map div and putting the map object within the module data in Javascript allowed me to have multiple maps for a single app, and multiple apps with maps.
- Leaflet has a strange proprietary statement for referencing the marker icon resource. However since Leaflet is imported as a node module, once the project compiles the node modules folder is no longer accessible. Therefore, I had to move the marker icon images into the static resources folder and reference this folder.
All in all, I am very happy with the map block. But for the future I would love to add geocoding in order to get longitude and latitude coordinates from an address and possibly customize the visuals.
