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

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

``` html
<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

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.
1

``` css substitute your page background color
.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

1

``` css
.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

in the way. No worries - by setting ```pointer-events``` to ```none``` on the overlay mouse events will pass through it.
1

``` css
.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

in IE<11 it="" will="" reply="" "hells="" yeah="" i="" support="" that!",="" but="" in="" reality="" only="" supports="" for="" svg="" elements.="" best="" thing="" to="" do="" is="" head="" [modernizr](http:="" modernizr.com="" )="" and="" build="" with="" css-pointerevents="" (it's="" under="" non-core="" detects).="" that'll="" a="" little="" unit="" test="" you="" can="" toss="" out="" the="" div="" if="" isn't="" supported.<="" span="">
1

``` javascript
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]);
    //}
}