Tiltshift is an interesting experiment in creating an interactive map with a tilt-shift effect. Tilt-shift is a technique which is often used in photography to make subjects appear miniaturized. You can view some example photographs with a tilt shift effect applied, and even add a tilt-shift effect to your own photographs, at Tilt Shift Maker.
Many moons ago I created something similar for adding a tilt-shift effect to Google Maps Street View images. Unfortunately because of Google's new
I also have the information which I posted about how I created this effect with Street View. To create the effect you need to overlay
"... one Street View layer on top of another Street View of the same scene. You can then use CSS filter transparency to create a masking effect. If you add this transparency filter to a horizontal band in the top Street View you can see the bottom Street View through this band. Then all you have to do is add a CSS blur filter to the top Street View. The effect is a Street View that is blurred (apart from one horizontal strip) creating a reasonable tilt shift effect".
If you look at the html code for the Tiltshift map you can see that something similar has been done to apply the tilt-shift effect to this interactive map. One Mapbox map layer has been overlaid on top of another map layer. The top map has a transparency style applied to it so that you can partly see the map beneath through it. A linear gradient has also been applied to the top map so that the transparency is greatest along the middle of the map. A blur effect has also been applied to this top map. The result is that the top and bottom of the map is slightly blurred while the middle band isn't blurred.
I think the effect is improved on the Tiltshift map if you offset the pitch of the map a little. You can do this by pressing down on your mouse's right button and dragging up or down.
No comments:
Post a Comment