Archive for category Web Maps

How to Design a Good Webmap, a Table of Awesomeness

No Comments

Making of High Park Fire Map

Snapshot of the map:

View the interactive map here.

The Colorado High Park Fire, which started on Saturday June 9, has burned over 56,000 acres so far, and continues to burn. On Sunday June 10, my husband, Kris, and I decided to get a map of the fire out to the public, since none existed at that time. Kris is the owner of Mapbiquity, which happens to be a service that is already built to allow rapid deployment of web maps, so it was natural that we should give it a spin with the fire data. Another reason we jumped on this was because the fire is very close to home. In fact, here’s a picture I took from our window on June 11, when the fire was 5.5 miles away as the crow flies:

You can see a couple of red spots–fire–on the foothills in the picture. Kris and I took Monday off work to continue to fine-tune the map, which was getting so many hits that it was running very slowly. I spent quite a lot of time interpreting Larimer County’s text on evacuation issues and lifts in order to digitize them.

To date, our map is the only one that has the evacuation areas digitized. I do have to caveat that there is at least one evacuation area that is not on our map. This is due to my inability to interpret the Larimer County text in sufficient detail to create even a semi-accurate boundary.

BIG THANKS to Nick Armstrong, a small business Colorado-based marketing expert, who read our tweets about the fire map and subsequently purchased a dedicated domain/host for us to put the map on: www.cohighparkfiremap.org. Prior to this we had been using a mapbiquity domain.

The map has had 50,000 hits. To deal with the traffic, we enacted the following measures:
1) Moved it to a larger server with more processing power
2) Disabled most of the log files
3) Moved the JavaScript file into the main html page, which creates some sloppy-looking code, but reduces the amount of calls back and forth to the server
4) Began caching, though this means some users need to refresh and reload the page before they see the updates, unfortunately

The benefits / design considerations of the high park fire map that we put together are as follows:
1) It is interactive, people can zoom in to see where their home is or where their relative’s home is, while also viewing the latest fire perimeter, to determine how concerned they need to be.
2) You can measure distances on the map with an easy tool. People have been using this to tell their family and friends “the fire is 6.5 miles away” for example.
3) Each layer has an “i” button with more information on the layer. For the evacuation areas, clicking the “i” button displays the official evacuation wording (though we had to fix many typos in the official wording. For example, they did not spell Hewlett Gulch correctly in one instance.)
4) Having a disclaimer noting that the map is not “to the scale of individual houses” was the best way to inform the public that the evacuation areas are not very high-resolution. They have to visit the text or call an official number (provided) to make individual house determinations.
5) Twitter was used as the main form of communication to let people know when map updates were/are posted.

The map is featured in the Coloradoan. We thank them for making it known to a wider audience.

5 Comments

Kartograph: a new opensource web mapping tool

A new opensource framework for mapping is on my radar today. It’s called Kartograph, and it is still in the early stages of development by Gregor Aisch (@driven_by_data). From the website:

The core concept of Kartograph is to separate the mapping process in the map generation and map rendering part. The client-side library kartograph.js renders pre-generated maps stored in SVG files. You can chose among hundreds of ready-to-use maps or simply generate your own using kartograph.py, the open source Python SVG map generator.

You’ve definitely got to check this out, even if it is just to gaze in awe at the examples that he has posted.

Thanks to @sgillies for tweeting about it.

1 Comment

Skeuomorphs: Relics from the Olde Days

A skeuomorph is a new design that still retains a function and/or appearance of the old, physical object that it replaces. In the old object, the function and/or appearance was essential, but in the new design, it is just a relic – according to the Wikipedia entry. (However, it may be argued that design that seems to have no “useful” function does indeed – it has the useful function of transitioning the user from the analog object to the digital object.) For example, window shutters on new homes that you can’t actually use are physical skeuomorphs.

Skeuomorphs abound in the digital world. One example of a digital skeuomorph is the scrolling or flipping that an ebook reader employs – which is of course a relic of paper books, but which serves to make the ebook easier to use for those of us who are accustomed to paper books. Wired* reports that Flipboard gets rid of this skeuomorph and uses, instead, a center-pivot approach that they assert reduces eye fatigue. Another example of digital skeuomorphs are icons used in many types of software that represent out-dated or physical objects such as the floppy disk “save” icon, or the trash can icon.

Applying the concept of the skeuomorph to map design, what relics of print maps do digital maps still retain? What completely new design features are present in digital maps that we couldn’t do with print maps? Let us know. There’s got to be a lot of them. My contribution to the discussion:

Some people – ahem – complain about the overuse of pdf files on websites. For example, organizations often publish pdf maps instead of creating interactive maps. Whereas the map key could be dynamic, it is static. Whereas the user could have zoomed in and out easily, we have, instead, a static resolution and non-existant scale-dependent rendering. Pdfs, then, can be a type of skeuomorph. However, while the posting of pdf maps online has many flaws, it does have the benefit of being easy to understand for those not familiar with digital maps.

*Clive Thompson: Retro design is crippling innovation

2 Comments

Freshy Map

Their tagline is may the powder be with you. There’s been some buzz about this interactive Web map of late. Interestingly, yesterday it had some widget type of things on the bottom of the page, but today they don’t seem to be there. (The screenshot is from yesterday.)

The main point of this map is to show the relative snow conditions of various ski resorts in Colorado, as indicated by graduated circle sizes. It also reports on their “Freshy Factor” via mouseover, which is explained in their About tab as being a combination of snow reports, social media input, and other things such as the time of day when the snow fell/is falling. There appears to be a real-time precipitation layer shown on the map as well.

It’s simple, it looks good, and if their conditions factor, ahem…Freshy Factor, has credence, it’ll become a much visited site.

6 Comments

Announcing New Web Map Service!

To kick-off my new web mapping service, I’m offering to make and deliver the HTML code for simple web maps for only $300. This offer is only for October 2011. This price includes:

1) Up to 20 of your locations on a map.
2) Locations styled the way you want them: color and symbol can be customized.
3) A short HTML snippet that you copy/paste into your website. Sent to you within within 3 days of your order.
4) Service for one year (i.e., the map will work for one year). It can be renewed after one year for an additional fee.

I create the map data (up to 20 locations), style them the way you want, host your data on my own servers, and send you the code. The map you get is interactive. Your website visitors will be able to zoom in and out, change the map background (imagery, roads, terrain, hybrid), and pan. This is really helpful if your locations are spread out because your website visitors can see all the locations at a glance but then zoom in to a specific location to see exactly where it is.

If you want a map of your store locations, or your bike route, the counties that your company operates in, or whatever, this is exactly what you need. You have two other options, but both are not very helpful: One option is for you to learn how to make web maps yourself (a very time consuming process) and to figure out how to make and host your own data. Another option is to use one of the free services that are out there to give you html code for a map, but you won’t be able to put your own locations on the map.

Here’s an example showing independent coffee shop locations in downtown Fort Collins, Colorado:


TO BUY
– Use the Buy Now button below or contact me. My contact information is in the Contact tab, above. When you place the payment with the Buy Now button there is a place for you to list the addresses, describe your locations, and colors or icons that you want. If you have regions for me to map you can define them using most kinds of political boundaries like states, counties, towns or zip codes. The service is guaranteed. If you do not like what I send you, you are guaranteed your money back (though the code will not work after a refund is made).

Note: If your areas are highly specialized such that I have to hand-digitize them, I may need more time and may not let your payment go through until we’ve discussed the requirements further (i.e., it may cost a bit more). I reserve the right to cancel and return your funds for any reason. If you have more than 20 locations, contact me and we can discuss the additional cost. This offer is valid through October 31, 2011.

3 Comments