MasterMaps

Previously, I’ve used three.js to create 3D terrain maps in the browser ( 1 , 2 , 3 , 4 , 5 , 6 ). It worked great for smaller areas, but three.js doesn’t have built-in support for tiling and advanced LOD algorithms needed to render large terrains. So I decided to take Cesium for a spin. Cesium is a JavaScript library for creating 3D globes and 2D maps in the browser without a plugin. Like three.js, it uses WebGL for hardware-accelerated graphics. Cesium allows you to add your own terrain data, and this blog post will show you how. Impressed by the terrain rendering in @CesiumJS - with a 10m elevation model for Norway! Farewell Google Earth. pic.twitter.com/RQKvfu2hBb — Bjørn Sandvik (@thematicmapping) October 4, 2014 Compared to  the dying Google Earth plugin , it's quite complicated to get started with Cesium. The source code is well documented and the live coding Sandcastle is great, but there is a lack of tutorials  and my development slows down when ...

In my last blog post , I presented a new plugin, Leaflet.Photo , that allows you to display geotagged photos from any source. Among them was Google+ Photos and Picasa Web Albums API. My plan is to use this API for my travel map , and this is why. Does Picasa Web Albums still exist?  It's a bit messy these days. Google is trying to transition from Picasa Web Albums to Google+ Photos, as photos are the number one things that people want to share on social networks. When you use Picasa to share your albums ( Sync to Web ), the album URL is now on your Google+ profile, and not on Picasa Web Albums (which is just redirecting me to Google+). This is the URL to the public album from my trip to the Trollfjord : https://plus.google.com/photos/+BjørnSandvik/albums/6052628080819524545 It also works with your Google+ user id: https://plus.google.com/photos/118196887774002693676/albums/6052628080819524545 My public Google+ web album . The album contains both photos and videos....

Using Instagram for my real-time travel map had too many limitations, so I decided to use Google+ photos or Picasa Web Albums instead. I've create a new plugin, Leaflet.Photo , that allows you to add geotagged photos to your map, from any source. The plugin plays well with the great Leaflet.markercluster plugin, showing your photos in clusters. To make the plugin more versatile, it doesn't deal with AJAX loading or image presentation except the thumbnails on the map. Use your AJAX loader of choice, and simply pass on an array of photo objects to the plugin.  The photo objects can include the properties you like, but the following are required: lat: latitude of photo lng: longitude og photo thumbnail: url to thumbnail photo I've kept the squared thumbnails of Instagram, as I think it look nicer than variable size thumbnails. Since the photos can have any dimensions, I'm using a CSS technique to crop and center the thumbnails.  I've created t...

I take a lot of photos while trekking, and most of the time I'm also carrying a GPS with me. As my camera don't have a built-in GPS, my photos are not geotagged while shooting. Luckily, this is an easy task if you've kept your GPS logs from the trip.  I'm still very happy with my Garmin GPSmap 60CSx that I bought 7 years ago. By changing the setup, the GPS allows me to automatically save the tracks to the memory card. I get one GPX file for each day trekking named with the date. I can easily transfer these tracks to my computer or smartphone with a cable or a card reader.  Before I converted to Mac, I used GeoSetter to geotag my photos on Windows. Now, I want to do it on the command line using the great ExifTool by Phil Harvey. I installed it on my MacBook using Homebrew : brew install exiftool After copying my GPX file to the image folder, I'm simply running: exiftool -geotag=my.gpx ./ If you forgot to sync the camera and GPS time befor...

Last weekend, I had a great trip to scenic Lofoten and Vesterålen in Northern Norway. I brought my tracking gear to test my new real time travel map . How did it go? Our first trip was to Trollfjord , a 2 km long fjord with a narrow entrance and steep-sided mountains. It's a famous tourist spot in the Lofoten archipelago , but not many leave the boat at the fjord's end to hike up to the Trollfjord hut . The small Trollfjord hut. Trollfjord goes in an east-west direction, and I expected to be in the "satellite shadow" being far north and having steep mountains blocking the sky towards the south. My good old Garmin GPSmap 60CSx did well in the rugged landscape, while my satellite SPOT messenger  had some difficulties finding and sending positions.  Live track from my SPOT messenger ( interactive map ). GPS track from my Garmin GPS. The great thing of using CartoDB to sync my SPOT-data , is that you can edit your positions with ease after...

I had to quit my trip form Oslo to Bergen already on day three - and I have to wait until August 2015 for a second try. I still got time to gain some experience in real time tracking - and mapping. Based on this experience I've made a new version of my live travel map: turban.no This is a private project to learn new skills - where I care more about new standards and less about old browsers. I'm using CSS3 and HTML5 extensively, the the map will probably not show in Internet Explorer < 10, but it should work well on your tablet or smartphone. . @thematicmapping has upped the bar for travel maps! @LeafletJS , @cartoDB , @Highcharts . Oh my. Beautiful and useful | http://t.co/AAW6A0TinF — Zev Ross (@zevross) July 31, 2014 My previous map was about 1 MB to load on my mobile, as I really took off mixing Leaflet, Highcharts, Ext JS, jQuery and Fancybox. I'm now left with only Leaflet and D3.js and only 72 kB gzipped JavaScript. It was a bit more work to cre...

Update August 2: I had to cancel the trip on day 3 due to serious illness in close family. Follow the trip on:  oslobergen.no facebook.com/groups/oslo.bergen instagram.com/instanturban Tomorrow, Thursday 31 July, I'm starting on my four weeks hike from Oslo to Bergen. It's been a very nice and warm summer in Norway, so it's been hard to work on my real-time trekking map. But if everything works, you should be able to follow me on this map :  [ Fullscreen map | Code ] The map shows the real-time position sent from my SPOT device and -  Place name, altitude and terrain types fetched from the the Norwegian Mapping Authority . Weather forecast for the specific time and position . Instagram photos along the way.   Real-time elevation profile.   Sortable table of all recorded positions.  GPS track (in the map menu), more detailed than the SPOT track. I'll blog about the technicalities after the trip. The expedition c...

I was quite happy with the real-time map from the hike to Preikestolen yesterday. There were some issues with the SPOT Satellite Messenger I'll write about later. First I want to make a second test on a biking trip to Sjernarøyane archipelago. We'll bring a normal GPS on the trip, to be able to check the accuracy of the SPOT Satellite Messenger. [ Fullscreen map ] We'll start biking about 9:15 am (Central European Summer Time) Sunday June 15th. New positions should appear on the map as we bike (every 5 minutes), but you still need to refresh the page to get new Instagram photos. Update: Test results I'm much more satisfied with the performance of my SPOT Satellite Messenger on this trip. I brought with me a Garmin GPS to get the full track of the biking trip, and it's shown as a blue line on the map. The track shows an overlap between the SPOT positions and the Garmin GPS. Automatically retrieving place name, terrain type, altitude and weath...

In my previous blog posts, I've worked on the various parts of an expedition map that I plan to use on a 4-weeks hike between Oslo in Bergen . Now I'm ready for a test run. Tomorrow Friday, I'm leaving the island for a hike up to Preikestolen . From one of my previous trips to Preikestolen.  It's a short but scenic hike, just 4 km each way. It should be sufficient to test if the various parts of the my live tracking map: Showing real-time positions from my SPOT Satellite Messenger . Show the altitude and placename for each position, using an external API .  Showing the weather at each position, fetched from api.yr.no .  Showing Instagram photos and videos as we walk .  If you have nothing smart to do, and if everything works, you can follow us on this map from around 11 AM tomorrow (Central European Summer Time), Friday June 13th.  [ Fullscreen map ] New positions should appear on the map as we walk (every 5 minutes), but you need to refr...

I've created a new plugin, Leaflet.Instagram , that allows you to add Instagram photos and videos to your maps. You can load photos with the Instagram API or from CartoDB . You can choose to show your images in a popup or a lightbox. The small images on the map can be clustered.  The plugin is very easy to use: L.instagram('https://api.instagram.com/v1/users/209969753/media/recent?access_token= your_access_token ').addTo(map); Just add the url and endpoint to the Leaflet API together with your access token . If you don't want to expose you're access token, I suggest that you create a proxy or sync your data with CartoDB . The plugin has built-in support for CartoDB: L.instagram('http://turban.cartodb.com/api/v2/sql?q=SELECT * FROM instagram WHERE the_geom && ST_SetSRID(ST_MakeBox2D(ST_Point(5.952, 59.329), ST_Point(5.982, 59.342)), 4326)').addTo(map);  Using CartoDB has the added benefit of allowing a wide range of spatial queri...