<b>Windsor Public Libraries</b>
<div id="map-div" style="width:750px;height:530px;"></div>
<!-- Using City of Windsor Open Data : http://www.citywindsor.ca/003713.asp -->
map = new OpenLayers.Map({
div: "map-div",
projection: new OpenLayers.Projection('EPSG:900913'),
'displayProjection': new OpenLayers.Projection('EPSG:4326')
});
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var long = -83.0201 ;
var lat = 42.298 ;
var centerlonlat = new OpenLayers.LonLat( long , lat );
centerlonlat=centerlonlat.transform(map.displayProjection, map.projection);
var zoom = 13;
map.setCenter(centerlonlat,zoom);
// Step 1: Create new layerstyle : vector
layerStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
// Step 2: Create new pointlayer (for all points)
pointLayer = new OpenLayers.Layer.Vector("Layer Name", {style: layerStyle});
// Step 3: Add pointlayer to map
map.addLayer(pointLayer);
// Step 4: Create new sample style for several points
// branch locations
var bridgeview_long = -83.05012 ;
var bridgeview_lat = 42.296991 ;
var walkerville_long = -83.004268 ;
var walkerville_lat = 42.30018 ;
var remington_long = -83.006215 ;
var remington_lat = 42.284915 ;
var seminole_long = -82.9793 ;
var seminole_lat = 42.316972 ;
var budimir_long = -83.026716 ;
var budimir_lat = 42.268296 ;
var riverside_long = -82.960902 ;
var riverside_lat = 42.329794 ;
var forestglade_long = -82.915847 ;
var forestglade_lat = 42.303067 ;
var sandwich_long = -83.077893 ;
var sandwich_lat = 42.299659 ;
var central_long = -83.03431 ;
var central_lat = 42.31127 ;
var fontainbleau_long = -82.953236 ;
var fontainbleau_lat = 42.29525 ;
// Bridgeview
myPoint = new OpenLayers.Geometry.Point(bridgeview_long, bridgeview_lat).transform( map.displayProjection, map.projection);
var sampleStyle = OpenLayers.Util.extend({}, layerStyle);
sampleStyle.externalGraphic ="http://google-maps-icons.googlecode.com/files/library-uni.png";
sampleStyle.pointRadius = 18;
sampleStyle.fillOpacity = 1; // from 0 (transparent) to 1 (opaque)
myPointFeature = new OpenLayers.Feature.Vector( myPoint,null,sampleStyle);
// set up smart properties before adding myPointFeature to the map
myPointFeature.attributes = {
name: "Bridgeview Library",
description: " 1295 Campbell Avenue",
wikiPage: "http://www.windsorpubliclibrary.com/branches/bridgeview/hours.php"
};
pointLayer.addFeatures( [ myPointFeature ] );
// CENTRAL LIBRARY
myPoint = new OpenLayers.Geometry.Point(central_long, central_lat).transform( map.displayProjection, map.projection);
var sampleStyle = OpenLayers.Util.extend({}, layerStyle);
sampleStyle.externalGraphic ="http://google-maps-icons.googlecode.com/files/library-publ.png";
sampleStyle.pointRadius = 18;
sampleStyle.fillOpacity = 1; // from 0 (transparent) to 1 (opaque)
myPointFeature = new OpenLayers.Feature.Vector( myPoint,null,sampleStyle);
// set up smart properties before adding myPointFeature to the map
myPointFeature.attributes = {
name: "Central Library",
description: " 850 Ouellette Avenue",
wikiPage: "http://www.windsorpubliclibrary.com/branches/central/hours.php"
};
pointLayer.addFeatures( [ myPointFeature ] );
// SOUTH WALKERVILLE
myPoint = new OpenLayers.Geometry.Point(walkerville_long, walkerville_lat).transform( map.displayProjection, map.projection);
var sampleStyle = OpenLayers.Util.extend({}, layerStyle);
sampleStyle.externalGraphic ="http://google-maps-icons.googlecode.com/files/library-uni.png";
sampleStyle.pointRadius = 18;
sampleStyle.fillOpacity = 1; // from 0 (transparent) to 1 (opaque)
myPointFeature = new OpenLayers.Feature.Vector( myPoint,null,sampleStyle);
// set up smart properties before adding myPointFeature to the map
myPointFeature.attributes = {
name: "South Walkerville",
description: "1425 Tecumseh Road East",
wikiPage: " http://www.windsorpubliclibrary.com/branches/southwalkerville/hours.php "
};
pointLayer.addFeatures( [ myPointFeature ] );
// REMINGTON
myPoint = new OpenLayers.Geometry.Point(remington_long, remington_lat).transform( map.displayProjection, map.projection);
var sampleStyle = OpenLayers.Util.extend({}, layerStyle);
sampleStyle.externalGraphic ="http://google-maps-icons.googlecode.com/files/library-uni.png";
sampleStyle.pointRadius = 18;
sampleStyle.fillOpacity = 1; // from 0 (transparent) to 1 (opaque)
myPointFeature = new OpenLayers.Feature.Vector( myPoint,null,sampleStyle);
// set up smart properties before adding myPointFeature to the map
myPointFeature.attributes = {
name: "Remington Park Neighbourhood Library",
description: " 2710 Lillian Street",
wikiPage: "http://www.windsorpubliclibrary.com/branches/remingtonpark/hours.php "
};
pointLayer.addFeatures( [ myPointFeature ] );
// SEMINOLE
myPoint = new OpenLayers.Geometry.Point(seminole_long, seminole_lat).transform( map.displayProjection, map.projection);
var sampleStyle = OpenLayers.Util.extend({}, layerStyle);
sampleStyle.externalGraphic ="http://google-maps-icons.googlecode.com/files/library-uni.png";
sampleStyle.pointRadius = 18;
sampleStyle.fillOpacity = 1; // from 0 (transparent) to 1 (opaque)
myPointFeature = new OpenLayers.Feature.Vector( myPoint,null,sampleStyle);
// set up smart properties before adding myPointFeature to the map
myPointFeature.attributes = {
name: "Seminole Community Library",
description: " 4285 Seminole Street",
wikiPage: "http://www.windsorpubliclibrary.com/branches/seminole/hours.php "
};
pointLayer.addFeatures( [ myPointFeature ] );
// BUDIMIR
myPoint = new OpenLayers.Geometry.Point(budimir_long, budimir_lat).transform( map.displayProjection, map.projection);
var sampleStyle = OpenLayers.Util.extend({}, layerStyle);
sampleStyle.externalGraphic ="http://google-maps-icons.googlecode.com/files/library-uni.png";
sampleStyle.pointRadius = 18;
sampleStyle.fillOpacity = 1; // from 0 (transparent) to 1 (opaque)
myPointFeature = new OpenLayers.Feature.Vector( myPoint,null,sampleStyle);
// set up smart properties before adding myPointFeature to the map
myPointFeature.attributes = {
name: "Nikola Budimir Memorial Resource Library",
description: " 1310 Grand Marais West",
wikiPage: "http://www.windsorpubliclibrary.com/branches/budimir/hours.php "
};
pointLayer.addFeatures( [ myPointFeature ] );
// create a Control that watches for clicking on a feature
selectControl = new OpenLayers.Control.SelectFeature( pointLayer );
map.addControl(selectControl);
selectControl.activate();
// it calls events (featureselected and featureunselected) and we connect those events to functions
pointLayer.events.on({
'featureselected': onFeatureSelect,
'featureunselected': onFeatureUnselect
});
// sample (and super-effective) popup opening and closing code
// from http://openlayers.org/dev/examples/ and http://ushahidi.com/
function onFeatureSelect(clickInfo) {
clickedFeature = clickInfo.feature;
popup = new OpenLayers.Popup.FramedCloud(
"featurePopup",
clickedFeature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(120,250),
"<a target='_blank' href='" + clickedFeature.attributes.wikiPage + "'>" + clickedFeature.attributes.name + "</a><br>" + clickedFeature.attributes.description,
null,
true,
onPopupClose
);
clickedFeature.popup = popup;
popup.feature = clickedFeature;
map.addPopup(popup);
}
function onFeatureUnselect(clickInfo) {
feature = clickInfo.feature;
if (feature.popup) {
popup.feature = null;
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
}
function onPopupClose(closeInfo) {
selectControl.unselect(this.feature);
}