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.
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:
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:
For our example, we’re using the Northern Landscapes noticeboard. So, the URL for the feed of all the posts on that noticeboard is:
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:
You may have a need for RSS output instead. That URL would be:
The API documentation will help you create more specific feeds for your needs:
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:
- 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.
- 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.
- 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
- See Step 2 above where you identified the content feed of your choice. Use that URL.
- 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:
- Add a link to your map icon at the end of your n0tice feed URL:
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.
- Create a plain text file. This will be a KML file with the extension .kml.
- 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>
- 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.
- 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>
- Save your KML file. Post it to your web server.
- 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:
STEP 5: RINSE AND REPEAT
- Paste your KML URL into Google Maps just as we did in Step 2.
- Embed your new map on a web page on your domain just as we did in Step 3.
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.
Crowdmapping in practice
The Guardian has been actively applying crowdmapping to a range
of concepts from investigations to advertising campaigns tocommunity participation projects.