Create Your Own Collaborative Online Map

Online mapping has come a long way. Basic online mapping services exist all over the Internet, so if you just need a map with a couple of markers, I recommend you try Google MyMaps, CommunityWalk.com or other websites to save yourself some time. But if your needs go beyond that and you don't have the money and time to hire a developer, here are the step-by-step instructions to build a mapping website like this for yourself - most of it is simply cloning the elements of this website, which makes the process as quick as 30min:

Creating your content type
Since you started reading these instructions, it's clear you need more than a form with title and description field for the markers. Zoho Creator is a great online database tool that is powerful, yet simple enough, to serve as our main repository.

  • First, create a user account at Zoho.com
  • Once you are logged in, go to this application on Zoho. We will start by cloning the application used for this prototype, which makes life a lot easier. On the application you just opened, click on More Actions > Copy Application. This will make a full copy directly to your account with all the settings already in place.
  • On your screen you now see the edit page for the basic form fields. If you want to make changes, rename fields etc. go ahead. To edit the existing fields, hover over the field, click on the pen symbol and select Edit this Field.  To add fields, drag them over from the panel on the left. I won't go into detail about customization, use Zoho's help files to dive into the details if necessary. Important: Leave the Address, City, Zip, State fields on the right untouched unless you feel comfortable making more sophisticated changes later on in the process (which I won't go into). Everything else you can tweak. By default anybody can view, add and edit items (not delete), click on the Share tab on top to change that.
  • Click on Access This Application on top to see your database in action. You can play around with it and enter a some test items. Leave this window open as we will come back to it in a minute. 

Putting entries on a map
Since we are collecting address information for each entry, the second step is to put them on a map. Zoho doesn't allow us to lookup the latitude/longitude information and put markers on a map. Which is why we need to use Yahoo Pipes, another free tool that allows users to easily manipulate RSS feeds and other data streams:

  • The procedure is somewhat similar, as Yahoo Pipes allows you to copy this prototype as well, sweet! Go to this app on Yahoo Pipes and click on Clone right underneath the main title and description. If you already have a Yahoo account, sign in, otherwise create a new user account. Once you are logged in, you should be redirected to a copy of the WikiAssetMap that is now part of your account. This is a copy, so let's go ahead and tweak so it works with the Zoho database that we just created in the first section.
  • Click on Edit Source and you will get to a schematic page that outlines all the data processing that happens behind the scenes. Bear with me, we only have to change one minor thing: Go back to your Zoho application and click on ListLong in the left menu. On that page, right behind the title, click on More Actions > Export Data. Select RSS feed and copy the link in the text box on the right. It should look something like https://creatorexport.zoho.com/per.lustig/copy-of-detroit-education-resources/rss/ListLong/. Go back to the window where Yahoo Pipes is open and look for the Fetch Feed box, the first one on the left. Paste your link into the URL field and overwrite the one that is already in there. That's it, click Save and then Run Application on the top. You will be directed back to the overview page and the map should show your entries (if you entered some earlier in Zoho).


Adding it all to a website
At this point we really have all the pieces in place, but they are still on separate websites and not easy to navigate. For this last step, you can use your own website or any service that let's you host your own blog or website. I like Weebly.com, because they have nice designs, the sites are easy to create and it looks and feels like a real website, not like a blog used for something else. Whatever you choose, the steps are the same:

  • Go to Weebly.com and sign up for a user account. After logging in, create a new website and you will be redirected to the edit screen. Using the tabs on the top of the screen, you can pick different Designs and create a couple of Pages. For our purpose we need three pages: Create pages called Map, List and Add (or whatever you prefer.) and save.
  • Navigate to the Map page by clicking on the link in the site navigation (the website you see in edit mode is actually functional). Drag the Custom HTML button from the top onto the blank page. Click on the empty box and then Edit custom HTML on the top edit menu. Go back to Yahoo Pipes and click the Get as Badge link. Click on Embed, the last of the five buttons, and copy the code in the text box. Go back to Weebly and paste that code into the custom HTML box. Weebly automatically saves the content of boxes, so simply click on the whitespace around the page to stop editing. The map will not appear on the edit screen, only on the real website after publishing, so don't worry about the blank page at this point.
  • Navigate to the List page and create a custom HTML box on this page too. Go back to your Zoho application and click on the List page (I created the ListLong list for processing in Pipes with all info and the shorter List to embed on the website to avoid overlap.). Click on More Action > Embed in your Website and copy the HTML code. Paste that into the custom HTML box and your list will appear. Repeat the same steps for the Add page: Go to Zoho, click Add, copy the embed code and paste it into a custom HTML box. 
  • The only thing left, in case you are using Weebly, is to click on the Publish button on the top to make your website live. Visit your website to try it out and explore the map.
This is it, you now have an online map that others can add to and edit or simply explore as a list or map. In case you have any questions, post a comment on my blog >>.