Create Interactive Ecoregion SVG

[willthemoor]

SVG itself will from GIS team but interactions (hover tool tips) need to be created. This is the 'Map View' for the /ecoregions page.

May need to add fields to the Ecoregions CMB2 fieldsets in order to support the content in the tooltips. Could also come from Featured Image, Page Title and an excerpt.

[rhodges]

@ldford At present I'm only making them clickable links. For hovers to work as described above that work will have to be done by the OCS developer: I can only provide the tie-ins she'll need to trigger her code.

[ldford]

@rhodges yes exactly. Once we get the SVG from you, I will assign to Selena the hover interaction coding.

[rhodges]

Okay. I'm not sure exactly what she wants/needs/expects for a tie in. For now you can tell her I plan to ad 'a' tags and unique IDs that match the Ecoregions' assigned IDs (i.e. 'wv' for 'Willamette Valley'). If she needs something else I'll need to know.

[selenastrain]

@rhodges for now the unique IDs should be fine. If I need anything else I'll let you know.

[rhodges]

Awesome. Thanks @selenastrain ! I'll let you know when the SVG is ready.

[ldford]

@rhodges - is the SVG with clickable links ready? Drew will take it from there with the hover interaction piece.

[rhodges]

I still need to check with @nlyman to see if the non-clickable SVG is ready.

[ldford]

Pretty sure @nlyman told me it was ready, but Nick, I'm not seeing it in this google drive folder: https://drive.google.com/open?id=0B8GruttT7jCufjRoNWk2SGEwVE1CMkFvTjF3WldORjFGQkIyQVoxNnowQ1pQUF93VGRJS1U

[ghost]

The ecoregion .svg folder is uploaded to the Google Drive folder now.

[rhodges]

Alright. Pieces in place for @dnseminara Review files added in commit listed above. Let me know if you have any questions.

[willthemoor]

Thanks, Nick but this SVG wont work. It's an SVG of 14 even height rows with a base64 encoded image for each row. Like: <image width="3180" height="165" xlink:href="data:;base64, iVBORw0KGgoAAAANSUhEUgAA

We'll need an SVG of the ecoregion shapes/outlines themselves. Otherwise we can't know when someone is hovering over it or highlight part of it.

[rhodges]

@willthemoor See my last post. Nick and I worked it out. Sadly the SVGs are generated as 'raster rows' if you add anything to them. My last commit includes a 'pretty' png map and an unstyled 'vector' svg with ids and links for all features to be placed on top with 0 opacity. open the 'svg_test.html' file in a browser to see the solution for yourself.

[ghost]

Hey Will, Ryan and I fixed this issue after seeing the issue you describe above. I will remove the .svg files that are bad and replace with the .svg and underlying .png that Ryan prepped for Drew.

[willthemoor]

Ah, sorry guys, I missed that. Looks perfect. Thanks!

[dnseminara]

Have we decided on what content we want binded to the svg for interactivity? Currently, I have it pointing to the excerpt portion for each ecoregion. Looks like a possible image maybe included as well?

FYI, the popup will always appear to the right of the user's mouse cursor (I guess OSX screenshots hide them).

[willthemoor]

Great, the excerpt is perfect. There's a field in the admin they can use to put in a specific excerpt. If it's not filled in, WP will just pull the first N letters (like it's doing there).

@ldford can you add a blurb about this to the authoring guide please?

[ldford]

Yes!