Go back to: General discussion
1. If you're into graphic design, news, or want to learn more HTML: Improve the New York Times's map at http://www.nytimes.com/interactive/2011/02/18/world/middleeast/map-of-key-locations-in-manama-bahrain.html
This map of Bahrain doesn't make a lot of visual sense to me. It took me a few minutes to understand what each panel was, and how they related to each other. And though the New York Times often uses OpenStreetMap in stories, this map was put together using Google and DigitalGlobe and it can't easily be shared and re-used by other websites.
Use at least one interactive OpenLayers map, and perhaps the Static Maps API from http://pafciu17.dev.openstreetmap.org/ to redesign this page. You could use an HTML <table> to arrange items on the page. For example, to make a left and right column:
<table>
<tr><td>
Put your first column here
<div id="map-div"></div>
</td><td>
<div id="second-column">
Put your second column stuff here
</div>
</td></tr>
<tr colspan="2">
A second row, covering two columns, would go here
</tr>
</table>
2. Let's work on using web services, such as using mapped photos from Panoramio ( http://www.panoramio.com/map/ ) and articles from Wikipedia. I don't believe this works in jsFiddle, but it will work locally. If you don't know how to make your own HTML page, download the attached map.zip ( below this text ), take the HTML file out, edit, and view in your web browser to get started.
I'm writing up a draft at http://pad.p2pu.org/openlayers-feeds to explain how to request articles from WikiLocation.org and add them to your map. Edit the instructions and add comments to the chat on the right side. Then, once you have this working, it's very similar to request photos from Panoramio. Start a conversation on this page if you get stuck.
Not sure what to map? Two optional assignments
1. If you're into graphic design, news, or want to learn more HTML: Improve the New York Times's map at http://www.nytimes.com/interactive/2011/02/18/world/middleeast/map-of-key-locations-in-manama-bahrain.html
This map of Bahrain doesn't make a lot of visual sense to me. It took me a few minutes to understand what each panel was, and how they related to each other. And though the New York Times often uses OpenStreetMap in stories, this map was put together using Google and DigitalGlobe and it can't easily be shared and re-used by other websites.
Use at least one interactive OpenLayers map, and perhaps the Static Maps API from http://pafciu17.dev.openstreetmap.org/ to redesign this page. You could use an HTML <table> to arrange items on the page. For example, to make a left and right column:
<table>
<tr><td>
Put your first column here
<div id="map-div"></div>
</td><td>
<div id="second-column">
Put your second column stuff here
</div>
</td></tr>
<tr colspan="2">
A second row, covering two columns, would go here
</tr>
</table>
2. Let's work on using web services, such as using mapped photos from Panoramio ( http://www.panoramio.com/map/ ) and articles from Wikipedia. I don't believe this works in jsFiddle, but it will work locally. If you don't know how to make your own HTML page, download the attached map.zip ( below this text ), take the HTML file out, edit, and view in your web browser to get started.
I'm writing up a draft at http://pad.p2pu.org/openlayers-feeds to explain how to request articles from WikiLocation.org and add them to your map. Edit the instructions and add comments to the chat on the right side. Then, once you have this working, it's very similar to request photos from Panoramio. Start a conversation on this page if you get stuck.