skyl/gist:778973

## gistfile1.txt

<!DOCTYPE html>
<html lang="en-us">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>
    Example Site : Welcome
  </title>


<style>
div.featureDesc {margin: 1em; width: 300px; height: 100px;}
</style>


  </head>
  <body class="home">
    <div id="tabs">
      <button id="getArticles">Get articles!</button>
    </div>

    <div id="body">
      <div id="map" style="width: 100%; height: 600px;"></div>
    </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script>
            var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
            // each of the three lines below means the same, if only one of
            // them is active: the image will have a size of 24px, and the
            // aspect ratio will be kept
            // style_mark.pointRadius = 12;
            // style_mark.graphicHeight = 24;
            // style_mark.graphicWidth = 24;

            // if graphicWidth and graphicHeight are both set, the aspect ratio
            // of the image will be ignored
            style_mark.graphicWidth = 24;
            style_mark.graphicHeight = 20;
            //style_mark.graphicXOffset = 10; // default is -(style_mark.graphicWidth/2);
            //style_mark.graphicYOffset = -style_mark.graphicHeight;
            style_mark.externalGraphic = "http://www.pointgphone.com/market/Death.Star.Clock_small.png";
</script>


<script>
                var style = new OpenLayers.Style({
                    pointRadius: "${radius}",
                    fillColor: "#ffcc66",
                    fillOpacity: 0.8,
                    strokeColor: "#cc6633",
                    strokeWidth: 2,
                    strokeOpacity: 0.8
                }, {
                    context: {
                        radius: function(feature) {
                            return Math.min(feature.attributes.count, 7) + 3;
                        }
                    }
                });


var map, osm, sundials, select;
var wikipedia_BB_url = "http://ws.geonames.org/wikipediaBoundingBoxJSON?";
var wikipedia_point_url = "http://ws.geonames.org/findNearbyWikipediaJSON?maxRows=100&";
var proj = new OpenLayers.Projection("EPSG:4326");
var pi = parseInt;


function onPopupClose(evt) {
    select.unselectAll();
}
function onFeatureSelect(event) {
    var feature = event.feature;
    var cluster = event.feature.cluster;
    var content = new String()
    cluster.forEach(function(feature) {
      content += "<h2>"+feature.attributes.title+"</h2>"
      content += '<div class="featureDesc">'
      content += feature.attributes.summary
      content += '</div><br><a target="_blank" href="http://'+feature.attributes.wikipediaUrl+'">';
      if (feature.attributes.thumbnailImg != undefined) {
        content += '<img src="'+feature.attributes.thumbnailImg+'" alt="article"></a>';
      } else {
        content += 'article</a>';
      }
    });
    popup = new OpenLayers.Popup.FramedCloud("chicken",
                         feature.geometry.getBounds().getCenterLonLat(),
                         new OpenLayers.Size(100,100),
                         content,
                         null, true, onPopupClose);
    feature.popup = popup;
    map.addPopup(popup);
}

function onFeatureUnselect(event) {
    var feature = event.feature;
    if(feature.popup) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        delete feature.popup;
    }
}


function setMapCenter(map, lon, lat, zoom)
{
    var point = new OpenLayers.LonLat(lon, lat);
    map.setCenter(point.transform(proj, map.getProjectionObject()), zoom);
}
function getMapCenter(map) {
    var point = map.getCenter();
    return point.transform(map.getProjectionObject(), proj);
}
function getMapBounds(map) {
    var bounds = map.getExtent();
    return bounds.transform(map.getProjectionObject(), proj)
}


function moveEnd(event) {
  /*
  console.log(getMapCenter(map));
  var bb = getMapBounds(map);
  var url = wikipedia_BB_url+'north='+pi(bb['top'])+'&south='+pi(bb['bottom'])+'&east='+pi(bb['right'])+'&west='+pi(bb['left']);
  console.log(url);
  $.get(url, function(data) {
    console.log(data);
  });
  */
}

function getArticlesForView() {
  var point = getMapCenter(map);
  var radius = map.getScale()/8000;
  var url_point = wikipedia_point_url+'lat='+pi(point.lat)+'&lng='+pi(point.lon)+'&radius='+pi(radius);
  console.log(url_point);
  $.get(url_point, function(data) {
    console.log(data);
    if (data['geonames'] != undefined) { // it did not error, let's do sth
      var a = data['geonames'];
      var features = new Array();
      a.forEach(function(item) {
        lat = item['lat'];
        lon = item['lng'];
        point = new OpenLayers.Geometry.Point(lon, lat);
        point = point.transform(proj, map.getProjectionObject());
        f = new OpenLayers.Feature.Vector(point, item, style_mark);
        features.push(f);
      });
      console.log(features);
      sundials.addFeatures(features);
      map.zoomOut(1);
    }
  });
}
$('button#getArticles').click(getArticlesForView);

function mapEvent(event) {
  //console.log(event.type);
}
function mapBaseLayerChanged(event) {
  //console.log(event.type + " " + event.layer.name);
}
function mapLayerChanged(event) {
  //console.log(event.type + " " + event.layer.name + " " + event.property);
}


function init() {
  map_controls = [
    //new OpenLayers.Control.OverviewMap(),
    new OpenLayers.Control.LayerSwitcher(),
    new OpenLayers.Control.PanZoom(),
    //new OpenLayers.Control.PanZoomBar(),
    //new OpenLayers.Control.MouseToolbar(),
    new OpenLayers.Control.MousePosition(),
    new OpenLayers.Control.MouseDefaults(),
    //new OpenLayers.Control.Navigation(),
    //new OpenLayers.Control.NavigationHistory(),
    //new OpenLayers.Control.NavToolbar(),
    new OpenLayers.Control.KeyboardDefaults()
  ];


  map = new OpenLayers.Map('map', {
    controls: map_controls,
    eventListeners: {
      "moveend": moveEnd,
      "zoomend": mapEvent,
      "changelayer": mapLayerChanged,
      "changebaselayer": mapBaseLayerChanged
    },
    //projection: "EPSG:4326"
    //projection: "EPSG:900913",
  });

  osm = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)",
                    [
                        "http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
                        "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
                        "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
                    ],
  { numZoomLevels: 19 });


  sundials = new OpenLayers.Layer.Vector("features", {
      strategies: [
        new OpenLayers.Strategy.Cluster()
      ],
      styleMap: new OpenLayers.StyleMap({
        "default": style,
        "select": {
          fillColor: "#8aeeef",
          strokeColor: "#32a8a9"
        }
      })

    //projection: map.displayProjection,
    //strategies: [new OpenLayers.Strategy.Fixed()],
    //protocol: new OpenLayers.Protocol.HTTP({
    //  url: "kml/sundials.kml",
    //  format: new OpenLayers.Format.KML({
    //    extractStyles: true,
    //    extractAttributes: true
    //  })
    //})
  });
  select = new OpenLayers.Control.SelectFeature(sundials);
  sundials.events.on({
    "featureselected": onFeatureSelect,
    "featureunselected": onFeatureUnselect
  });
  map.addLayers([osm, sundials]);
  map.addControl(select);
  select.activate();
  //map.zoomToMaxExtent();
  setMapCenter(map,-84, 34, 8);
}

init();

</script>


    </body>
</html>

	<!DOCTYPE html>
	<html lang="en-us">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>
	Example Site : Welcome
	</title>


	<style>
	div.featureDesc {margin: 1em; width: 300px; height: 100px;}
	</style>


	</head>
	<body class="home">
	<div id="tabs">
	<button id="getArticles">Get articles!</button>
	</div>

	<div id="body">
	<div id="map" style="width: 100%; height: 600px;"></div>
	</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
	<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
	<script>
	var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
	// each of the three lines below means the same, if only one of
	// them is active: the image will have a size of 24px, and the
	// aspect ratio will be kept
	// style_mark.pointRadius = 12;
	// style_mark.graphicHeight = 24;
	// style_mark.graphicWidth = 24;

	// if graphicWidth and graphicHeight are both set, the aspect ratio
	// of the image will be ignored
	style_mark.graphicWidth = 24;
	style_mark.graphicHeight = 20;
	//style_mark.graphicXOffset = 10; // default is -(style_mark.graphicWidth/2);
	//style_mark.graphicYOffset = -style_mark.graphicHeight;
	style_mark.externalGraphic = "http://www.pointgphone.com/market/Death.Star.Clock_small.png";
	</script>


	<script>
	var style = new OpenLayers.Style({
	pointRadius: "${radius}",
	fillColor: "#ffcc66",
	fillOpacity: 0.8,
	strokeColor: "#cc6633",
	strokeWidth: 2,
	strokeOpacity: 0.8
	}, {
	context: {
	radius: function(feature) {
	return Math.min(feature.attributes.count, 7) + 3;
	}
	}
	});


	var map, osm, sundials, select;
	var wikipedia_BB_url = "http://ws.geonames.org/wikipediaBoundingBoxJSON?";
	var wikipedia_point_url = "http://ws.geonames.org/findNearbyWikipediaJSON?maxRows=100&";
	var proj = new OpenLayers.Projection("EPSG:4326");
	var pi = parseInt;



	function onPopupClose(evt) {
	select.unselectAll();
	}
	function onFeatureSelect(event) {
	var feature = event.feature;
	var cluster = event.feature.cluster;
	var content = new String()
	cluster.forEach(function(feature) {
	content += "<h2>"+feature.attributes.title+"</h2>"
	content += '<div class="featureDesc">'
	content += feature.attributes.summary
	content += '</div><br><a target="_blank" href="http://'+feature.attributes.wikipediaUrl+'">';
	if (feature.attributes.thumbnailImg != undefined) {
	content += '<img src="'+feature.attributes.thumbnailImg+'" alt="article"></a>';
	} else {
	content += 'article</a>';
	}
	});
	popup = new OpenLayers.Popup.FramedCloud("chicken",
	feature.geometry.getBounds().getCenterLonLat(),
	new OpenLayers.Size(100,100),
	content,
	null, true, onPopupClose);
	feature.popup = popup;
	map.addPopup(popup);
	}

	function onFeatureUnselect(event) {
	var feature = event.feature;
	if(feature.popup) {
	map.removePopup(feature.popup);
	feature.popup.destroy();
	delete feature.popup;
	}
	}



	function setMapCenter(map, lon, lat, zoom)
	{
	var point = new OpenLayers.LonLat(lon, lat);
	map.setCenter(point.transform(proj, map.getProjectionObject()), zoom);
	}
	function getMapCenter(map) {
	var point = map.getCenter();
	return point.transform(map.getProjectionObject(), proj);
	}
	function getMapBounds(map) {
	var bounds = map.getExtent();
	return bounds.transform(map.getProjectionObject(), proj)
	}


	function moveEnd(event) {
	/*
	console.log(getMapCenter(map));
	var bb = getMapBounds(map);
	var url = wikipedia_BB_url+'north='+pi(bb['top'])+'&south='+pi(bb['bottom'])+'&east='+pi(bb['right'])+'&west='+pi(bb['left']);
	console.log(url);
	$.get(url, function(data) {
	console.log(data);
	});
	*/
	}

	function getArticlesForView() {
	var point = getMapCenter(map);
	var radius = map.getScale()/8000;
	var url_point = wikipedia_point_url+'lat='+pi(point.lat)+'&lng='+pi(point.lon)+'&radius='+pi(radius);
	console.log(url_point);
	$.get(url_point, function(data) {
	console.log(data);
	if (data['geonames'] != undefined) { // it did not error, let's do sth
	var a = data['geonames'];
	var features = new Array();
	a.forEach(function(item) {
	lat = item['lat'];
	lon = item['lng'];
	point = new OpenLayers.Geometry.Point(lon, lat);
	point = point.transform(proj, map.getProjectionObject());
	f = new OpenLayers.Feature.Vector(point, item, style_mark);
	features.push(f);
	});
	console.log(features);
	sundials.addFeatures(features);
	map.zoomOut(1);
	}
	});
	}
	$('button#getArticles').click(getArticlesForView);

	function mapEvent(event) {
	//console.log(event.type);
	}
	function mapBaseLayerChanged(event) {
	//console.log(event.type + " " + event.layer.name);
	}
	function mapLayerChanged(event) {
	//console.log(event.type + " " + event.layer.name + " " + event.property);
	}



	function init() {
	map_controls = [
	//new OpenLayers.Control.OverviewMap(),
	new OpenLayers.Control.LayerSwitcher(),
	new OpenLayers.Control.PanZoom(),
	//new OpenLayers.Control.PanZoomBar(),
	//new OpenLayers.Control.MouseToolbar(),
	new OpenLayers.Control.MousePosition(),
	new OpenLayers.Control.MouseDefaults(),
	//new OpenLayers.Control.Navigation(),
	//new OpenLayers.Control.NavigationHistory(),
	//new OpenLayers.Control.NavToolbar(),
	new OpenLayers.Control.KeyboardDefaults()
	];





	map = new OpenLayers.Map('map', {
	controls: map_controls,
	eventListeners: {
	"moveend": moveEnd,
	"zoomend": mapEvent,
	"changelayer": mapLayerChanged,
	"changebaselayer": mapBaseLayerChanged
	},
	//projection: "EPSG:4326"
	//projection: "EPSG:900913",
	});

	osm = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)",
	[
	"http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
	"http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
	"http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
	],
	{ numZoomLevels: 19 });


	sundials = new OpenLayers.Layer.Vector("features", {
	strategies: [
	new OpenLayers.Strategy.Cluster()
	],
	styleMap: new OpenLayers.StyleMap({
	"default": style,
	"select": {
	fillColor: "#8aeeef",
	strokeColor: "#32a8a9"
	}
	})

	//projection: map.displayProjection,
	//strategies: [new OpenLayers.Strategy.Fixed()],
	//protocol: new OpenLayers.Protocol.HTTP({
	// url: "kml/sundials.kml",
	// format: new OpenLayers.Format.KML({
	// extractStyles: true,
	// extractAttributes: true
	// })
	//})
	});
	select = new OpenLayers.Control.SelectFeature(sundials);
	sundials.events.on({
	"featureselected": onFeatureSelect,
	"featureunselected": onFeatureUnselect
	});
	map.addLayers([osm, sundials]);
	map.addControl(select);
	select.activate();
	//map.zoomToMaxExtent();
	setMapCenter(map,-84, 34, 8);
	}

	init();

	</script>


	</body>
	</html>