Support #12955
closedLeaflet JS maps
0%
Description
Lidia Hernández-Tapia would like to embed some maps that a colleague has created using Leaflet JS. She wants to embed 8 maps to start with, with the option to add more at a later date. I asked if the maps are online - she said no, they don't have a URL. They are just html files with javascript inside. Is this something that the Commons can support? I know it would be a lot easier if they had a URL.
Here's the folder with the html files https://www.dropbox.com/sh/2n9i18r25zzdt40/AADyn4T021T_bvkhhV_ZAXh6a?dl=0 - she says the ones she is most interested in are in the Troubleshooting folder.
Lidia is a PhD student - her site is https://clacls.commons.gc.cuny.edu
Updated by Boone Gorges almost 4 years ago
The Commons has a number of plugins that can leverage Leaflet to generate maps. See https://clacls.commons.gc.cuny.edu/wp-admin/plugins.php?s=leaflet. But these plugins are intended for use with a Leaflet-compatible dataset. See eg https://clacls.commons.gc.cuny.edu/wp-admin/admin.php?page=leafletmapsmarker_import_export.
Can you say more about how the HTML files in the Dropbox folder were generated? leaflet.js is just a JS library; as far as I know, it doesn't (on its own) create full HTML output. Was some other tool used?
It's difficult for us to provide a tool for embedding generic HTML files, for security reasons. But if I can get more context for where the GIS data comes from, maybe I can help connect the dots.
Updated by scott voth almost 4 years ago
Hi - This is Lidia's response:
"The maps were generated using R, the statistical software. R has a Leaflet package that enables users to create these maps using their own data (in our case, census data) and export it in different formats like .jpg and .html. We uploaded our census data to R and used the Leaflet package to map them. These are not generic html files because they were done specifically by us using our data, so no one else had access to them. Is this helpful?"
Updated by Boone Gorges almost 4 years ago
- Status changed from New to Reporter Feedback
Thanks, this is helpful.
If this is a one-off project, where the user is able to provide me with a relatively small number of HTML files that need to be embedded, I should probably be able to write a shortcode that will make it work. So, I should probably be able to build a shortcode that will load the Troubleshooting and Interactive maps (there's 2 in the first folder and 16 in the other). If that sounds reasonable, let's go ahead with it. The caveat here is that it will not be easy to update or augment these maps in the future - all such requests will have to go through me.
It may also be possible for the user to load the source data into one of our Leaflet plugins, which would allow WordPress to generate its own (native, non-embedded) maps. This might provide more flexibility, if we expect that it'll be necessary to modify the maps or add new ones down the road. But it may also be a lot of work - I haven't worked with the Leaflet plugins and I'm not sure how good they are at generating this kind of thing.
Let me know how we should proceed.
Updated by scott voth almost 4 years ago
Here is Lidia's response:
The idea is to continue embedding more maps in the website on a regular basis in the future. However for now, because we need it as soon as possible, it'd be great if you could generate shortcodes for the ones we have so far. You can ignore the ones in the Troubleshooting folder and work with the ones in the Interactive folder. The 2 that are in the Troubleshooting folder are different versions of some in the Interactive folder.
There are 16 maps total in the Interactive folder but just use one of each number (map 1, map 2), and ignore the duplicates.
To make it easier for all in the future we will try to upload the source data to the Leaflet plugin.
Thanks!
Updated by Boone Gorges almost 4 years ago
- Status changed from Reporter Feedback to Staged for Production Release
- Target version set to 1.16.14
Thanks for the update.
For the time being, I've added the provided HTML files to our repo, and created a shortcode for their display. https://github.com/cuny-academic-commons/cac/commit/fb34336a46aff9f31f1f7682f21f8104da0ea5a5
Use is as follows:
[clacls-latino-data-project-map map='1-2017']
The map parameter is of the format `{map_number}-{year}` - so 1-2000, 1-2017, 2-2000, and so on. Optionally, you can also provide width and height parameters to make it play nice with the theme.
This will be available after tomorrow morning's release.
Updated by Boone Gorges almost 4 years ago
- Status changed from Staged for Production Release to Resolved