Fun with map borders

Bear in mind, I make no suggestion one should do these things. This is probably a terrible idea. What can I tell you - trying this out was more fun than the other stuff on my todo list.

Sometimes the border around an interactive map on a web page feels a little harsh. If you’re making an infographic or something similar, you might want the map to appear to be “in” the page rather than “on” it, and that’s hard to do with a chopped-off tile ending in a x-pixel border. Maybe you want to fade the map into the background, or maybe do some sort of torn-page effect. Here’s how you could do that.

First you’ll need a div to sit on top of your map (our map in this case is going in #map). It’s also helpful to put that map into a map container so you can use it to set the size of the map and the overlay. So something like this:

1
2
3
4
<div class="map-container">
    <div id="map"></div>
    <div class="map-blend"></div>
</div>

Then we’ll set up the map sizing and position the overlay in CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.map-container {
    height: 600px;
    width: 600px;
    position: relative;
}
#map {
    height: 100%;
    width: 100%;
}
.map-blend {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

So far no surprises. Depending on your mapping library of choice, you might need to tack on a z-index value to .map-blend to get it where you want. With Leaflet and no messing about with the z-index this seems to drop .map-blend over the layers but under the controls, which is kind of magical. Now you can drop an inset shadow to blend your map boundary into the background.

substitute your page background color
1
2
3
.map-blend {
    box-shadow: inset 0 0 35px 35px #666;
    ...

Now your map borders blend with your page background.

Now for some fun. Let’s make a torn-page kind of effect. First we’ll need to make an image like that. I did it with Inkscape. To paraphrase the process:

  • Make a rectangle the size of your map.
  • Make a smaller rectangle.
  • Convert the smaller rectangle to a path (Path->Object to Path).
  • Go into node editing, select all the nodes, and hit the Node + button a few times until you have a fair amount.
  • Go to Extensions->Modify Path->Jitter Nodes and play with the settings until you get something you like. We’re aiming for random-ish.
  • Convert the first rectangle into a path, line up the second over the first, and do a Path->Difference to chop out the middle.

Now set the image to the background of the overlay, using background-size to make it fill the whole div.

1
2
3
4
5
.map-blend {
    background: url(../images/map-blend.png);
    background-size: 100% 100%;
    ...
}

Now we have a fun map border.

Now for the problems.

First, if you followed the directions exactly you’ll quickly notice that the map won’t react to the mouse. That’s because we stuck a div in the way. No worries - by setting pointer-events to none on the overlay mouse events will pass through it.

1
2
3
4
.map-blend {
    pointer-events: none;
    ...
}

But our good friend Internet Explorer is about to screw us. Only IE11 supports pointer-events on HTML elements. Furthermore, it will kind of lie about it. If you try to test for it via document.documentElement.style in IE<11 it will reply “hells yeah I support that!”, but in reality it only supports it for SVG elements. Best thing to do is head to Modernizr and build it with css-pointerevents (it’s under non-core detects). That’ll do a little unit test and you can toss out the div if it isn’t supported.

1
2
3
4
5
6
7
8
if (!Modernizr.pointerevents) {
    $('.map-blend').remove();
    // If you're a JS purist/snob:
    //var eList = document.getElementsByClassName('map-blend');
    //while(eList[0]) {
    //    eList[0].parentNode.removeChild(eList[0]);
    //}
}