The access map on our company profile page is rotated just 2.5° to the right with CSS. This article first uses various official sources to work through the two questions behind that choice——why roads aren’t aligned to true north, and why web maps are locked to “north-up”——and then explains how to tilt a Google Maps embed, which does not support rotation, using CSS.

For comparison, let’s first look at the plain embed with no modifications. It has the same center and the same zoom as the map on the company profile page, only without the rotation. The red pin in the center marks our location, with Oshiage Station (Tokyo Skytree) above it and Kinshicho Station below.

▲ Plain, unrotated Google Maps (north-up)

Roads aren’t aligned to true north

In the map above, the road running vertically between Oshiage and Kinshicho is “Tower View Street,” and the one crossing it east-to-west partway along is “Kasuga Street.” Taking the coordinates of both ends of each road from OpenStreetMap and computing the azimuth, these two roads are tilted by:

  • Tower View Street — about 3.5° west of north
  • Kasuga Street — about 3.2° off the east-west line

Because of this, in a composition that fits Oshiage and Kinshicho vertically, Tower View Street—the axis of the composition—appears slightly tilted relative to the frame.

The origin of the tilt — not magnetic north, but Edo’s canals

There are two references for direction: “true north,” which points along the Earth’s axis of rotation, and “magnetic north,” which a compass points to. According to the Geospatial Information Authority of Japan’s magnetic chart, the declination (the gap between true north and magnetic north) near Tokyo is about 7 degrees west. Our figure of about 3.5° does not match this value, so the streets were not laid out with reference to a compass.

The reason lies in how the district was formed. Streets are generally laid out with reference to terrain, water systems, and existing highways rather than astronomical directions. This area——the former Honjo district in southern Sumida Ward——is a new town that was developed after the Great Fire of Meireki (1657), and its grid-like streets and the waterways running crosswise through it originate from the planned development of that time (Sumida Ward materials). The Ohyokogawa Water Park, which Tower View Street runs alongside, is likewise the former site of the Yokogawa canal that was dug out in this development. In other words, the road’s tilt of about 3.5° is a 370-year-old remnant of the fact that the grid set out in the Edo period was slightly off from true north.

How maps are locked to “north-up”

Google Maps’ 2D maps work by projecting the Earth onto a square plane using the Mercator projection and delivering pre-divided images (tiles) for each zoom level (Map and Tile Coordinates). Because the tiles are ready-made images drawn with north at the top, the operation of “rotation” simply does not exist for this kind of map. Indeed, looking at the Maps Embed API documentation, the parameters you can specify in map mode are limited to things like center and zoom, with no orientation parameter (heading can only be specified for the camera direction in Street View mode).

On the other hand, the vector maps of the Maps JavaScript API render shape data on the client side rather than tile images, so they support rotation and tilt via setHeading(). This does require obtaining an API key and setting up billing, however. On a static site that uses key-free embeds, you can’t rotate the map data itself. So we decided to rotate only the display with CSS.

Rotating the display with CSS

Let’s start with the result. The map below is the same embed as at the top of the article, rotated 2.5° with CSS. Tower View Street, running vertically through the center, is now nearly parallel to the vertical axis of the frame.

▲ The embed rotated 2.5° with CSS. Compared with the plain map at the top, the roads are now aligned to the vertical and horizontal of the frame.

The implementation has the following structure and is complete with just the outer element and the iframe. The same CSS is applied to the map above (on the company profile page, the same thing is written with Tailwind CSS classes).

.map-frame {
  position: relative;
  height: 500px;
  overflow: hidden;      /* clip off the corners that stick out */
  border-radius: 12px;
}
.map-frame iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;           /* make it a size larger */
  height: 120%;
  transform: translate(-50%, -50%) rotate(2.5deg);
}

There are three key points.

Don’t rotate the outer frame—rotate only the contents — Keep the outer frame with its rounded corners and border as is, and rotate only the inner iframe with transform’s rotate().

Make the iframe a size larger — If you rotate a rectangle as is, triangular gaps appear at the four corners, revealing the background. To cover a frame of width w and height h without gaps even after rotating by angle θ, the required size can be derived from the rotation’s coordinate transformation as width w·cosθ + h·sinθ and height w·sinθ + h·cosθ. Our site’s frame is roughly 740px wide and 500px tall, so at θ = 2.5° (sin θ ≈ 0.044), about 22px (+3%) for the width and about 32px (+7%) for the height are enough by calculation. In the implementation, we set width 110% and height 120% to leave some margin.

Clip it with the outer frame’s overflow: hidden — The overhang from enlarging and rotating is clipped off by the outer frame. Inside the frame, only the map with roads aligned to the vertical and horizontal of the screen remains.

Note that CSS transforms do not affect the document’s layout; they apply to rendering and pointer hit testing (CSS Transforms Module Level 1). Therefore, dragging and zooming within the iframe still work as usual even after rotation, and the browser handles the coordinate transformation.

Regarding the angle of rotation, rotating by 3.5° exactly as measured would make Tower View Street perfectly parallel to the frame, but as a range in which the overall tilt including the text in the map is less perceptible, we adopted 2.5° for this site.

A note — on the map’s composition

Our company (Yokokawa, Sumida Ward) is located roughly midway between Oshiage Station and Kinshicho Station, and we use these two stations as landmarks when giving directions. That is why the map on the company profile page uses a composition that fits both stations into a single view. To align Tower View Street—the axis of the composition (the road we face is the one street to its east)—with the vertical axis of the frame, we add a 2.5° rotation.

Summary

  • The road’s tilt of about 3.5° is separate from the magnetic declination (about 7 degrees west in Tokyo); it originates from the fact that the Honjo grid, laid out with canals as its framework after the Great Fire of Meireki, is slightly off from true north.
  • Because 2D web maps work by delivering “north-up” tile images drawn with the Mercator projection, raster-style embeds have no rotation operation (vector maps’ setHeading() does support rotation).
  • By rotating the iframe with the CSS transform, enlarging it a size larger based on w·cosθ + h·sinθ, and clipping it with the outer frame’s overflow: hidden, you can adjust only the apparent orientation.
  • The angle of rotation we adopted is 2.5° (against the measured 3.5°, prioritizing the imperceptibility of the overall tilt of the map).

You can confirm the effect of the rotation by comparing the plain embed at the top of this article with the rotated embed in the “Rotating the display with CSS” section. A real-world example is the map on the company profile page, which applies the same rotation with additional styling such as grayscale display.

References