Skip to content

Instantly share code, notes, and snippets.

@skyl skyl/gist:778973
Created Jan 14, 2011

Embed
What would you like to do?
rough openlayers example
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.