Year: 2014

Displaying running tracklogs on an Openlayers map

  By

So, I have started running with the Zombies, Run! 5k training app which is excellent, and their own tracklog map is great, here’s an example. But they have the option of downloading the tracklogs as .gpx files, and that made me want a personal map to see all my tracklogs on the same map. And I wanted to add some of Stamen Design’s beautiful map designs. This is not very hard, but I still want to share how to do this in case someone wants a similar map.

Mapstyles2The different map styles I have for my map, from top left going clockwise: Stamen watercolour, Stamen toner, OpenStreetMap CycleMap and Mapnik (the normal Openstreetmap).

The OpenStreetMap wiki has a good article on how to make this kind of map, and my map is based on that code. So I will not go into the details on how to to make the html file. To get the Stamen layers in my map I found the necessary pieces of code here. If you look at the sourcecode of my map (right click, view sourcecode if you didn’t know how to find it) you will see the code  below (but not this nice looking, this is from the editor). I added the stamen layers before the OpenStreetMap layers since I wanted the watercolour to be the default layer of my map.

code1After adding the two Stamen layers I uploaded the .gpx tracks to my hosting area and gave them all a simple name (Run1, Run2, Run3 and so on). In the html file I then just had to link to each .gpx file and change the name of the file, like in this example:

Code2In this example, you see that I named the track April 1 2014 (this name shows up in the layer selection box) and changed the url to Run6.gpx. The .gpx files obviously have to be in the same folder as the html file for this to work. This piece of code was then copied for each tracklog and changed to fit each track. The style of each track can be changed by changing the style attributes (strokeColor, strokeWidth, strokeOpacity).

Tracklogs-layers

The layer selection box of the finished map.

The size of the map can be changed with the width and height code on the bottom of the html file. To make my map more personal I added a title and reused a css file I had. For this map the css file only gives the map page a coloured background and a black border around the map, but the html and css files can be changed to get many different styles, or more text around the map for explanations. Here the possibilities are endless. Happy mapping, and feel free to comment if you make yor own map, I always like to see maps and trips done by others.

Photo spheres

  By

One of my big interests is photography, and within photography I am interested in interesting ways to take and display photos, such as timelapse photography and panoramas. I have for some time wanted to make a 360 degree panorama, but as I didn’t want to put my photos on another online service I have put it off. Then last week I found this blog post that gave me exactly the code I wanted. So then on Saturday, when the sun was shining I went to the fortress in Trondheim and took a lot of pictures using a tripod. I took 5 rows of pictures, in a clockwise rotation, like this:

I tried using Hugin (and will look more into that program later) and Photoshop to stitch together all the pictures I had taken, but both took a lot of time and resources from my laptop. So I went for a program I have used in the past to make panoramas, Microsoft Image Composite Editor which automatically makes good panoramas. To make sure it would make a good spherical panorama I used the adjust tool to check the horizon in the panorama. (Click on the pictures to see them bigger.)

Here is the adjust button in Microsoft ICE.

The drop down menu (second picture) tells you which projection you’re using. The white lines are used to adjust the horizon in the panorama.     I then ended up with this picture:

stitch4

Using the code linked to in the blog post above (can be found here) I only had to upload the code and panorama to my hosting area and change the link in the html file to the name of my picture, and that’s it. Below is the result, which can be seen in fullscreen here. The fortress looks a little weird due to the stretching of the panorama.

I can see several applications for this kind of panorama, and will for sure make more of them. Google is a big user of this kind of panoramas, and have a page on how to make them and add them to Google maps. Their streetview pictures are made in a similar way to this. I think photospheres can be a nice addition to geotagged pictures in a map mashup, to allow people to see a place as if they were there themselves. This is not a new idea, panoramas made with Microsoft ICE can be uploaded to their Photosynth site, and can also be found on this map. But if you want a custom made solution, maybe with Openstreetmap as the background map, then this Photosphere code can be used.