Saturday, 30 August 2014

Bootstrap map viewer templates

So this past week, I attended another hackathon and our hack was yet-another-twitter-bootstrap-with-openlayers concoction. The problem it seems, every time I go down this path, I lose several critical hours re-creating my desired responsive layout of a map viewer with sidebar with bootstrap CSS every time. You'd think that having done this many times now, I'd have memorised the necessary HTML markup and CSS to do this by now.

But that is just not the case, so after the event (and a good long post-hackathon sleep), I fired up Sublime Text and set out to solve this problem once and for all: A set of starter bootstrap templates that should serve a useful foundation to build a bootstrap-based map viewer web application on top of. Several hours later, there's two templates available.

A 2-column template. A full-screen map viewer with a sidebar to the left:


And a 3-column template, which has sidebars to the left and right which is reminiscent of the classic MapGuide AJAX viewer.


A key feature of both templates is that the floating sidebars are both collapsible.


On small displays, sidebars start off initially collapsed, but can be brought out through their respective toggle buttons.


You can check out the templates below:


Do you have ideas for improving my initial design and have some web design skills? Send me some pull requests.

12 comments:

Mike Herel said...

This is very interesting. Is this something we can expect to see in MapGuide and if so, when?

Norman said...

I have recently used your 3 column example for my web GIS template.

I have made few modifications to the position of the menu on right hand side and shifting the search bar from the top left to top right.

Your template rocks.

Amitabh Basu said...

Any idea how we can have a 4th column at the bottom in the template?

Dean Something said...

How do I set the left column to be closed by default?

Jon Caves said...

I have been trying to get the 2column template working byt downloading and updating the various links to local versions of javascript,css etc. Everything renders correctly and there are no errors in the FF web developer console, but the map wont load. I've been scratching my head for days. I'm sure the problem is very straight forward. Any pointers would be appreciated.

Thanks

Dean Something said...

I adapted your code for leaflet, and it MOSTLY works. The only annoying thing is that the zoom control doesn't toggle to the right on page load. You have to collapse the panel to the left and then expand it to get the zoom control into position. Any ideas?

elbert moyon said...

I just want to try it. I like it. Can't these templates be downloads? how can i have the templates?

Jackie Ng said...

Hey everyone,

There's another map viewer template I found, which I think is just plain superior to the ones I've made and shown in this post in every facet.

http://themapguyde.blogspot.com.au/2015/07/a-better-map-viewer-template.html

Works with Leaflet, OpenLayers 2/3 and Google Maps out of the box. I think you'd be better off using that template as the starting point.

Azad IŞIK said...

Really useful viewers, how can we have the templates?

Abhijit Gujar said...

I am trying to add the dynamic layer control to this template does any one like to join me ? so far i can get the layer in a separate panel

Abhijit Gujar said...

I am trying to add dynamic layer control to this template has anyone done this before ? can any one guide me >

Sergio Santillana said...

Hi, first of all, thanks for the marvellous templates, they look awesome, unfortunately, I'm unable to make it load the make I have in the MapGuide server, and I was wondering if you know about any tutorial I could use to link both, the template and the map uploaded to MapGuide

Thank you very much