How to crowdmap using n0tice

Create, customise and embed a crowdmap

One of the most exciting ways to engage communities in mass movements today is through crowdmapping, collectively sharing things at specific locations to visualise a larger picture on a map. n0tice is designed to make it very easy for publishers, brands, communities and developers to setup and run any kind of crowdmapping project.

In this example, we will create a crowdmap of activity in Manchester, England via a noticeboard called Northern Landscapes. You will learn how to create a map from n0tice data, and then we will look at how to customise the experience.

STEP 1: SETUP NOTICEBOARD AND A MAP PAGE

First,     on n0tice. You can customize it with your own logo, a background image and typeface and font colors. We’ve explained how to do that here.

You don’t have to create a noticeboard in order to crowdmap activity via n0tice.  We are doing that in this example in order to demonstrate one common approach.

Second, create a page on your web site where you plan to host your map. You’ll want to include a big button that links to the form where users can post things to your map.

Users will post content on your noticeboard. In the next step you’ll see how to feed those posts into your map.

STEP 2: GET A FEED OF CONTENT

Next you need the feed of posts to include in your map.

This is the URL for the feed of all posts from across the entire n0tice network:

http://n0ticeapis.com/2/search

You want a small subset of that, so let’s refine your feed.

There are lots of ways to refine your feed. You could include all posts with a certain tag, events only, things near a location, posts from a list of users, posts you have starred, etc.

The URL for the feed of all the posts from your noticeboard will look like this:

http://n0ticeapis.com/2/search?noticeboard=MYNOTICEBOARDNAME

For our example, we’re using the Northern Landscapes noticeboard. So, the URL for the feed of all the posts on that noticeboard is:

http://n0ticeapis.com/2/search?noticeboard=northernlandscapes

In our example here, we’ll refine the result to include reports that are centered around Manchester. We’ll look for posts that are within a 50 mile radius. And we need to specify a map-friendly output format for the feed. That’s called ‘KML’

Here’s the complete URL we need for our map now:

http://n0ticeapis.com/2/search?noticeboard=northernlandscapes&type=report&location=manchester%20uk&radius=50&format=kml

You may have a need for RSS output instead. That URL would be:

http://n0ticeapis.com/2/search?noticeboard=northernlandscapes&type=report&location=manchester%20uk&radius=50&format=rss

The API documentation will help you create more specific feeds for your needs:

http://n0tice.org/developers/api-documentation/

STEP 3: CREATE A MAP

Now that you have a feed of content, you need to drop that feed into a map that can display it. We’ll use Google Maps for this example, but there are a number of mapping tools that can be used to accomplish the same task.

Go to Google Maps http://maps.google.com/ and follow these steps:

1. Copy the final URL you created in Step 2 above and paste it right into the search box on the top of Google Maps. Wait a moment while Google gets the data and populates it appropriately on the map.
You should see a list of n0tice posts on the left and a map with pins on the right. If that’s not what you see, then go back to Step 2 and refine your URL. Be sure you are using a URL that includes “&format=kml“.
2. Look for the link icon in the left-hand sidebar on Google Maps, just above the list of n0tice posts. Click on it, and a window with sharing options will open. Copy the HTML embed code.Or you can also customize the size and center point for the map and then copy the embed code.
3. Paste the embed code into your web page in your own content management system. That code is just like a YouTube embed, so it will work in any web page and display the map with n0tice pins on it just as you defined it.

YOU DID IT!

Frighteningly easy, yes? Let’s customise it a little…

STEP 4: USE YOUR OWN MAP PIN ICON

1. See Step 2 above where you identified the content feed of your choice. Use that URL.
2. Get the URL of the map pin icon that you want to see for each post on your map. We’ll use the official Guardian Travel icon in this example:
   http://image.guardian.co.uk/sys-images/Guardian/Pix/pictures/2011/01/24/pointyImage_for_travelMap.png
3. Add a link to your map icon at the end of your n0tice feed URL:

   http://n0ticeapis.com/2/search?type=report&location=manchester%20uk&radius=10&format=kml&iconUrl=http://image.guardian.co.uk/sys-images/Guardian/Pix/pictures/2011/01/24/pointyImage_for_travelMap.png

LOOKS GREAT!

We’re on a roll here. Let’s keep going…

STEP 4: ADD MULTIPLE FEEDS

Things will get a little more complicated from here, but it’s all still pretty easy if you know HTML. This next step requires that you create a new file and that you put it on your web server somewhere. It doesn’t matter where, as people won’t go to it. But the map needs it to sit somewhere on the Internet, so you must have access to publish a file somewhere.

1. Create a plain text file. This will be a KML file with the extension .kml.
2. Include the basic KML information in the file. There’s some good documentation on KML at Google. In this case, we’ll just use the following:

   <?xml version="1.0" encoding="UTF-8"?>
   <kml xmlns="http://www.opengis.net/kml/2.2">
     <Folder>
       <name>My Map</name>
       <visibility>0</visibility>
       <open>1</open>
       <description>What's happening near you?</description>
   
       <NetworkLink>
         <name>Posts</name>
         <visibility>0</visibility>
         <open>1</open>
         <description></description>
         <flyToView>1</flyToView>
         <Link>
           <href>YOUR-FEED-URL-HERE</href>
         </Link>
       </NetworkLink>
   
     </Folder>
   </kml>

3. Add a second feed of KML data. See the ‘NetworkLink‘ tag in the KML code above. Copy and paste that so you have two of those.
4. In your second ‘NetworkLink’ replace the Linkyou just pasted with your second feed URL. Your KML file should now look like this:

   <?xml version="1.0" encoding="UTF-8"?>
   <kml xmlns="http://www.opengis.net/kml/2.2">
     <Folder>
       <name>My Map</name>
       <visibility>0</visibility>
       <open>1</open>
       <description>What's happening near you?</description>
   
       <NetworkLink>
         <name>Posts</name>
         <visibility>0</visibility>
         <open>1</open>
         <description></description>
         <flyToView>1</flyToView>
         <Link>
           <href>YOUR-FIRST-FEED-URL-HERE</href>
         </Link>
       </NetworkLink>
   
       <NetworkLink>
         <name>Posts</name>
         <visibility>0</visibility>
         <open>1</open>
         <description></description>
         <flyToView>1</flyToView>
         <Link>
           <href>YOUR-SECOND-FEED-URL-HERE</href>
         </Link>
       </NetworkLink>
   
     </Folder>
   </kml>

5. Save your KML file. Post it to your web server.
6. Check to make sure your KML file is using valid code. Find the URL of your KML file. Paste it into a KML validator such as this one:
   http://www.feedvalidator.org/

STEP 5: RINSE AND REPEAT

1. Paste your KML URL into Google Maps just as we did in Step 2.
2. Embed your new map on a web page on your domain just as we did in Step 3.

YOU’RE DONE!

It actually doesn’t get much harder than that. Of course, you can always customise further by using other map providers like OpenStreetMap and MapBox and digging deeper into the API to identify creative ways to pull data out of n0tice.

REFINE YOUR PROJECTS

This solution can work equally well for publishers, brands and communities. The following are some ideas to get you thinking depending on what you’re trying to achieve:

• Create an “Editor’s Picks” map by pulling a feed of posts that have been starred as interesting by a user or list of users.
• Show upcoming events near you on an iPhone app that knows your current location.
• Run a photo contest on a noticeboard and show the most popular images taken on a map on your contest web site.