Add responsiveness to example pages + screenshot figures to the spec

[Malvoz]

I thought it'd be nice to have responsive maps in the examples. It allows people to test the capabilities of the example maps on their mobile phones as they'd expect them to look on any given website today.

And while it may look like there's much to this PR, most of the additions & deletions are just coming from indentation fixes.

The big change is how custom scripts are added to the document, while before it was:

<script class="example">
  ...
</script>

now it's:

<div class="script-example">
  <script>
    ...
  </script>
</div>

to allow for scrolling the overflow.

Also, there are quite some changes to examples.css, e.g. to prevent the inherited controls and custom controls from overlapping, and to restrict maps from being wider than a 100% of the viewport.

We haven't discussed doing this at all prior to this PR; but I thought it'd be fun to do and while there are still things to be done this seems pretty solid. If y'all don't want to do this I'm okay with that.

You can compare the live examples to those hosted on raw.githack.com, by resizing the viewport etc, see for example:

• create-map.html (live)
• add-custom-control.html (live)
• multiple-location-markers.html (live)
• set-view-zoom.html (live)

(Some embeds fail on raw.githack.com because it's unauthorized.)

[NickFitz]

+1 from me.

[Malvoz]

Please note that I have now added screenshot figures (as proposed in https://github.com/Maps4HTML/HTML-Map-Element-UseCases-Requirements/issues/35). It would probably have been ideal to have done this in a separate PR, but because I had been working on the master branch in my fork, a separate PR would still include commits of this PR (I'm still learning the ropes of Github). Besides, the screenshots are taken from the example pages with the new styles for responsiveness.

I have included at least 1 image from each reference JS tool. View the screenshots (again, hosted on raw.githack.com) for the use cases here:

• Display an interactive map within a web page
• Display a map centered on a point location
• Display multiple point locations as map markers
• Display custom imagery as a map layer
• Provide alternative map layers which the user can select
• Display drawings or schematics without geographic coordinates
• Add a custom control to a map
• Control which layers are currently visible & which can be hidden by the user

[AmeliaBR]

I've just merged in @NickFitz's example updates, so that's creating merge conflicts. If either of you have time to clean that up, it'd be great. Otherwise, I'll run through them later in the week when I'm back home.

Beyond that, both of these changes are definitely welcome. (Even if they'd ideally be 2 PRs. But we've all been there with Git.) I'd been kind of thinking that we'd just create a dedicated use case / example set for "responsive map size", but you're right that it's better to be able to check out the responsiveness of individual features and interaction patterns.

[Malvoz]

Thanks @AmeliaBR, I was expecting the merge conflicts, I have resolved them now.

I'd been kind of thinking that we'd just create a dedicated use case / example set for "responsive map size"

I think that's definitely a use case to address - it's not all that straight forward for some of the reference tools, do you want to open an issue for that or should I?

[AmeliaBR]

I think that's definitely a use case to address - it's not all that straight forward for some of the reference tools, do you want to open an issue for that or should I?

I started an issue in #174, but additional details/thoughts would be welcome!

Thanks again for the commits!