Port two blog posts from opencitiesproject.org including interactive maps

[vdeparday]

We need to move these two blog posts, keeping the maps:

http://www.opencitiesproject.org/casestudy/health/
http://www.opencitiesproject.org/casestudy/schools/

[apercas]

Hi, I think that the best idea to achieve that is to add them as embed (maybe inside an iframe) in each post. Please, tell us if you need some help with that.

[shanikadhettige]

@apercas I tried to add an iframe linking to the page by editing the html but it didn't work. From what I've read on the WP support pages it seems like the platform "kills" iframe unless you use a plugin. I also wasn't sure if there was at least a way to upload the .KML files as downloadable? Then we could at least upload an image of the map even if we can't put in the interactive one.

@vdeparday Did you want these as News or as Resources? The paragraphs are currently sitting as draft News posts until this is sorted but I think they might be better suited as Resources.
Also, where are the original interactive maps hosted?

[apercas]

@shanikadhettige That's weird, we've added several iframes to posts in WordPress. I've posted a demo here: http://opendri.simbiotica.es/iframe-example/

Hope this is good enough (we can change the size of the box, it's just an example).

[shanikadhettige]

Hi @apercas,

@vdeparday thinks it will look better to migrate the opencities content without using an iframe as it still looks somewhat messy and we will have more interactive content like this in the future. Is there a way we can use JavaScript or something else to just embed the interactive map into a blog post and add a download button for the zipped shapefiles and the automatically generated export from OSM?

http://www.opencitiesproject.org/casestudy/health/

We are flexible with posting this content either as news or within a project.

[shanikadhettige]

@apercas

[apercas]

In order to doing so we'll need the JS libraries they're using and the URL of the data the map is being fed from. Of course you can still add a link to the map or the downloadable content if you don't want an iframe.

[vdeparday]

It should all be on there: https://github.com/OpenCitiesProject/OpenCitiesProject.github.io but I can dig a bit more

[tiagojsag]

Hi @vdeparday

Is this discussion still relevant?

thanks

[tiagojsag]

http://mapbox-for-wordpress.stephanemartinw.com <- potentially relevant

[tiagojsag]

https://wordpress.org/plugins/mapbox-for-wp-advanced/

[tiagojsag]

We used a different plugin for this, which embeds layers from MapBox directly.

you can use the following shortcode to embed a map on a page:

[mapbox layers="gfdrr.map-wv1c9ry4,gfdrr.kathmandu-health"]

The result will be the top map on https://dev-gfdrr-opendri.pantheonsite.io/project/uganda/

more info on the available configuration options: https://wordpress.org/plugins/mapbox/

[vdeparday]

That looks much better thanks ! If you look on here: http://www.opencitiesproject.org/casestudy/health/ We also added a little bit of JS to enable a download of the data. What would be the easiest way to do that on the new website ?

[tiagojsag]

I would suggest adding those links to the body of the Wordpress page itself.

[vdeparday]

Actually , I just noticed that when zooming in on the new one, the icons dissappears (no more health center) when they stay on the original page. It looks like it may be related to a minimum zoom level but I am not sure, could you have a quick look into it? Thanks

[tiagojsag]

@vdeparday we may be able to limit that from MapBox's side. Would it be possible for you to give me access to that MapBox account?

Thanks

[tiagojsag]

As agreed, we developed a plugin which allows integrating the existing Mapbox maps into the OpenDRI site.

You can find usage instructions here:

https://github.com/GFDRR/opendri-website/blob/master/wp-content/plugins/mapbox-simple/README.md