Video Tutorial: Draw Clickable Regions / Overlays on Custom Images

Recently, we have shared several custom image maps and shared tutorial about how to create your interactive image. Apart from adding pins and interactive infobox on the images, we have created another video about drawing editable overlays (circles, rectangles, polygons) on the image. Check out the video below:

Bubble Chart Map: A Month of Citi Bike

Almost two months ago, New York City has launched the bike-sharing program, and here is an interactive bubble chart map for displaying how far has the the program gone. The map is created by New Yorkers using live data, which is provided by Citi Bike, to pinpoint locations people rode for one month.

The bubble sizes are determined by number of available bikes in each station, and details can be been when mouseover it. You can also click the “PLAY” button to see the changes according to the timeline that it is unsurprisingly more people  are joining this program.

Video Tutorial: Add Markers to Interactive Image Map

Few weeks before, we have shared an interactive London Tube Map to recommend spots for hanging around, and here we are going to demonstrate how to mimic similar maps using your own image. From the video, you can learn how to add pin with custom images, insert URLs, videos and images to the image and publish it.

Video Tutorial: How to Create Interactive Images in Minutes

Last week, we have shared a clickable London Underground map that you can mouseover stations for getting detailed information with images, external links or videos. If you are wondering how to mime this map but know nothing about HTML coding, you can now resolve it referring to the following quick start video tutorial.

From the video, you will know how to import images, add interactive features, and share the maps online.

Australia Heat Map: Pay Gap between Indigenous and Non-Indigenous

There is an analysis report from Australian National University towards the pay gap between Indigenous and non-Indigenous in Australia, and it finds that income gap has widened. An interactive heat map is created based on the report, and you can mouseover the region for detailed information.

The analysis was done using census data from 2006 and 2011 censuses by Dr Nicholas Biddle, who is from Australian National University, that it break down the result by regions. According to the report, education is one of the strongest factors that determine the incomes though it also mentions higher education “will not completely eliminate the gap in socioeconomic outcomes”.


Crowdsourced Map: Best Beaches in the World

Stuff, a news and information website in New Zealand, has launched a campaign about finding the best beaches in the world. It has created an editable World map that displaying locations suggested from readers.

Click on the pins (or the numbered circles then see the clustered pins), and you can see photo and description that provided by world-wide readers. You can participate this campaign and haring your experience to people all around the world.

If you are interested in creating similar crowdsourced maps, you can seek assistant using several online mapping software, and normally the maps can be easily created in few steps. We have created a demonstration that details can be found there.

Video Tutorial: Demonstration for Creating HTML5 Maps Using Mapping Software

If you know little about programming or coding, please don’t let it stop you from creating your own clickable maps by yourself as there are various mapping software you can find online to finish the self-created map project.

We have prepared a video tutorial about how to edit HTML5 maps by utilizing those popular map features (e.g. pin locations, draw routes, add clickable regions) in mapping software.

Interactive Google Map: Hot Weather in New Jersey

Thursday, that temperature in Newark hit 100 degrees that remind us hot summer is in the town now. Though it’s not a record-breaking heat, an interactive annotating maximum temperature in each country has been created. Larger sun logo represents hooter the median so far in July 2013, and you can get detailed description when mouseovering specific county.

According to the data from the above maps, we can see that the median temperature is from 79 to 93.5, which is not that hot; and the annoyed factor is the humidity that some counties (e.g. Howell, Hamilton, Woodstown) could even reach 100%.

Heat Map: Home Prices Reaches the Highest in Five US States in May

A clickable US Heat Map has been created for showcasing the Home Price Index in May 2013, according to the latest CoreLogic’s Home Price Index Report.

You maybe a bit surprised by the home prices in Texas, Oklahoma, South Dakota, Alaska and Vermont as they are all higher than the time before the financial crisis hit.This heat map was created using discrete range colors that red represent the state’s home prices hit the top while green represents the home price is the cheapest. You can click on each state to get more information: