Skip to content

Instantly share code, notes, and snippets.

@snelis

snelis/gist:1408688

Created November 30, 2011 11:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save snelis/1408688 to your computer and use it in GitHub Desktop.
Save snelis/1408688 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=0, minimum-scale=0, maximum-scale=1.0">
</HEAD>
<BODY>
<DIV id='map' style='position:absolute; left:0px; top:000px; width:320px; height:415px;'></div>
<script type="text/javascript">
// json
var JSON;if(!JSON){JSON={}}(function(){"use strict";function f(n){return n<10?'0'+n:n}if(typeof Date.prototype.toJSON!=='function'){Date.prototype.toJSON=function(key){return isFinite(this.valueOf())?this.getUTCFullYear()+'-'+f(this.getUTCMonth()+1)+'-'+f(this.getUTCDate())+'T'+f(this.getUTCHours())+':'+f(this.getUTCMinutes())+':'+f(this.getUTCSeconds())+'Z':null};String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function(key){return this.valueOf()}}var cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,escapable=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,gap,indent,meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'},rep;function quote(string){escapable.lastIndex=0;return escapable.test(string)?'"'+string.replace(escapable,function(a){var c=meta[a];return typeof c==='string'?c:'\\u'+('0000'+a.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+string+'"'}function str(key,holder){var i,k,v,length,mind=gap,partial,value=holder[key];if(value&&typeof value==='object'&&typeof value.toJSON==='function'){value=value.toJSON(key)}if(typeof rep==='function'){value=rep.call(holder,key,value)}switch(typeof value){case'string':return quote(value);case'number':return isFinite(value)?String(value):'null';case'boolean':case'null':return String(value);case'object':if(!value){return'null'}gap+=indent;partial=[];if(Object.prototype.toString.apply(value)==='[object Array]'){length=value.length;for(i=0;i<length;i+=1){partial[i]=str(i,value)||'null'}v=partial.length===0?'[]':gap?'[\n'+gap+partial.join(',\n'+gap)+'\n'+mind+']':'['+partial.join(',')+']';gap=mind;return v}if(rep&&typeof rep==='object'){length=rep.length;for(i=0;i<length;i+=1){if(typeof rep[i]==='string'){k=rep[i];v=str(k,value);if(v){partial.push(quote(k)+(gap?': ':':')+v)}}}}else{for(k in value){if(Object.prototype.hasOwnProperty.call(value,k)){v=str(k,value);if(v){partial.push(quote(k)+(gap?': ':':')+v)}}}}v=partial.length===0?'{}':gap?'{\n'+gap+partial.join(',\n'+gap)+'\n'+mind+'}':'{'+partial.join(',')+'}';gap=mind;return v}}if(typeof JSON.stringify!=='function'){JSON.stringify=function(value,replacer,space){var i;gap='';indent='';if(typeof space==='number'){for(i=0;i<space;i+=1){indent+=' '}}else if(typeof space==='string'){indent=space}rep=replacer;if(replacer&&typeof replacer!=='function'&&(typeof replacer!=='object'||typeof replacer.length!=='number')){throw new Error('JSON.stringify');}return str('',{'':value})}}if(typeof JSON.parse!=='function'){JSON.parse=function(text,reviver){var j;function walk(holder,key){var k,v,value=holder[key];if(value&&typeof value==='object'){for(k in value){if(Object.prototype.hasOwnProperty.call(value,k)){v=walk(value,k);if(v!==undefined){value[k]=v}else{delete value[k]}}}}return reviver.call(holder,key,value)}text=String(text);cx.lastIndex=0;if(cx.test(text)){text=text.replace(cx,function(a){return'\\u'+('0000'+a.charCodeAt(0).toString(16)).slice(-4)})}if(/^[\],:{}\s]*$/.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,'@').replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,']').replace(/(?:^|:|,)(?:\s*\[)+/g,''))){j=eval('('+text+')');return typeof reviver==='function'?walk({'':j},''):j}throw new SyntaxError('JSON.parse');}}}());
// Scoping for the map
var map;
/**
* The API object & functions
*/
var api = {
layer: null,
featureSelectControl: null,
selectedFeature: null,
lastEvent: null,
styles:{
"default": {
graphicWidth: 15,
graphicHeight:26,
externalGraphic:"pin.png",
fillOpacity:0.5,
strokeColor:'#000000',
fillColor: '#ff0000',
strokeWidth:1
},
"select": {
graphicWidth: 15,
graphicHeight:26,
externalGraphic:"pin_selected.png"
}
}
};
/**
* Add a layer with filters
* @param object
*/
api.filter = function(params) {
// First we remove the old layer
if(api.layer) map.removeLayer(api.layer);
// Create the base layer properties
layerProperties = {
visibility:true,
strategies:[new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.WFS({
url: "http://kaart.almere.nl:8081/geoserver/wfs",
srsName: "EPSG:28992",
featureType: params.featureType,
featureNS: "http://kaart.almere.nl",
version: "1.1.0"
})
};
// Add the filters if specified
if(params.style) {
for (var styleParam in params.style) {
api.styles['default'][styleParam] = params.style[styleParam];
}
}
// Construct the stylemap
layerProperties.styleMap = new OpenLayers.StyleMap({
"default":new OpenLayers.Style(api.styles['default']),
"select": new OpenLayers.Style(api.styles['select'])
});
// Add the filters if specified
if(params.filters) {
// Create the base properties
layerFilterProperties = {
type: OpenLayers.Filter.Logical.OR,
filters:[]
};
// Create the specified properties
for(var i=0;i<params.filters.length;i++) {
var filter = params.filters[i];
layerFilterProperties.filters.push(new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property:filter.property,
value: filter.value
}));
}
// Add the filters
layerProperties.filter = new OpenLayers.Filter.Logical(layerFilterProperties);
}
// Create the layer
api.layer = new OpenLayers.Layer.Vector("POI", layerProperties);
// Now add the new layer
map.addLayers([api.layer]);
// Register the click events
this.addFeatureEvents(api.layer);
// Set the center if specified
if(params.center) this.center.apply(this, params.center);
// Set the zoom if specified
if(params.zoom) this.zoom(params.zoom);
}
/**
* Set the map to specified lonlat
* @param lon
* @param lat
*/
api.center = function(lon, lat, zoom){
console.log('center', arguments);
// de map centreren in start
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom || 0);
}
api.echo = function(input){
alert(input);
return input;
}
/**
* Zoom the map
*/
api.zoom = function(zoom){
console.log('zoom', arguments);
// de map zoomen
map.zoomTo(zoom);
}
/**
* Add the feature events like featureselected
* @param layer
*/
api.addFeatureEvents = function(layer){
layer.events.register("featureselected", layer, function (evt) {
api.lastEvent = 'moveend';
var feature = evt.feature;
api.selectedFeature = feature;
var screenBounds = feature.layer.map.getExtent();
var featureBounds = feature.geometry.getBounds();
feature.data.bounds = featureBounds;
var data = {
x: Math.floor((featureBounds.left - screenBounds.left) / feature.layer.map.resolution),
y: Math.floor((screenBounds.top - featureBounds.top) / feature.layer.map.resolution),
feature:feature.data
};
window.location = 'almere://' + encodeURIComponent(JSON.stringify(data));
return true;
});
api.featureSelectControl = new OpenLayers.Control.SelectFeature(layer);
map.addControl(api.featureSelectControl);
api.featureSelectControl.activate();
}
/**
* Show or remove the controls
* @param bool
*/
api.showControls = function(bool){
if(bool == false) {
// Destroy
api.panZoombarControl.destroy();
} else {
// Create
api.panZoombarControl = new OpenLayers.Control.PanZoomBar();
map.addControl(api.panZoombarControl);
}
return false;
}
api.showSatteliteMap = function(bool){
if(bool == true) {
map.setBaseLayer(api.satelliteLayer);
} else {
map.setBaseLayer(api.townplanLayer);
}
}
// setTimeout(function(){
// api.showControls(true);
// api.showSatteliteMap(true);
// }, 1000);
/**
* Testing
*/
// setTimeout(function(){
// api.filter({
// featureType:'Hondenkaart',
// filters: [
// {property:'TYPE', value:'Verboden'}
// ],
// style:{
// fillColor: '#ff0000'
// }
// });
// }, 2000);
// setInterval(function(){
// api.center(143844, 486673, 5);
// }, 2000);
//
// setTimeout(function () {
// api.zoom(5);
// }, 2000);
function CreateMap() {
/**
* Class: OpenLayers.Control.PinchZoom
*
* Inherits:
* - <OpenLayers.Control>
*/
OpenLayers.Control.MyPinchControl = OpenLayers.Class(OpenLayers.Control, {
/**
* Constructor: OpenLayers.Control.PinchZoom
* Create a control for zooming with pinch gestures. This works on devices
* with multi-touch support.
*
* Parameters:
* options - {Object} An optional object whose properties will be set on
* the control
*/
initialize:function(options) {
OpenLayers.Control.prototype.initialize.apply(this, arguments);
this.handler = new OpenLayers.Handler.Pinch(this, {
start:this.trigger
}, this.handlerOptions);
},
trigger: function(e, data) {
if(api.selectedFeature) {
api.featureSelectControl.unselect(api.selectedFeature);
api.selectedFeature = null;
}
window.location = 'almere://zoom';
}
});
// Aanmaken van map-object van openlayers
var options = {
projection: "EPSG:28992",
units: 'm',
maxExtent: new OpenLayers.Bounds(134000.00, 479250.000, 155000.00, 493750.00),
maxResolution:'auto',
maxZoomLevel: 1,
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()
]
};
map = new OpenLayers.Map('map', options);
var strWMS = "http://kaart.almere.nl/wmsconnector/com.esri.wms.Esrimap?SERVICENAME=AIKWMS";
var StadsplattegrondZWSLD = "http://kaart.almere.nl/AIKWMS/Default/StadsplattegrondZWSLD.asp";
var pointsOfInterestLink = "&REQUEST=GetFeature&VERSION=1.0.0&TYPENAME=app:Plangebied&namespace=xmlns('app=http://www.deegree.org/app')&FILTER=<Filter%20xmlns='http://www.opengis.net/ogc'%20xmlns:app='http://www.deegree.org/app'><And><PropertyIsEqualTo><PropertyName>app:historisch</PropertyName><Literal>false</Literal></PropertyIsEqualTo><PropertyIsEqualTo><PropertyName>app:overheidscode</PropertyName><Literal>0034</Literal></PropertyIsEqualTo></And></Filter>&maxFeatures=5";
// Baselayers stadsplattegrond en luchtfoto
var Stadsplattegrond = new OpenLayers.Layer.WMS.Untiled("Stadsplattegrond", strWMS, {layers:'KLHOpenbaargebied,KLHBebouwing,KLHBedrijventerrein,KLHBos,KLHWater,KLHStrand,KLHHoofdweg,KLHWeg,KLHVliegveld,KLHSnelweg,KLHGemeentegrens,KLHBusbaan,KLHSpoorlijn,KLHTeksten,KLTAutosnelweg,KLTBebouwingCentrum,KLTBedrijven,KLTBedrijventerrein,KLTBijzondereBebouwing,KLTBosvak,KLTCentrum,KLTFietspad,KLTGras,KLTHoofdweg,KLTLandbouwVeeteelt,KLTMoerasNatuur,KLTOVbaan,KLTOverigePaden,KLTSpoorlijnWit,KLTSpoorlijnZwart,KLTSportvelden,KLTSteiger,KLTStrand,KLTWater,KLTWijkwegen,KLTWoningen,KLTWoongebied,KLTGemeentegrens,KLTHoogspanningsleiding,KLTHoogspanningsmasten,KLTInOntwerp,KLTKabelbaan,KLTKavelsloot,KLTWijknamen,KLTParknamen,KLTOpenwaternamen,KLTIndustrienamen,KLTDreefnamen,GBKAWater,GBKAGras,GBKAPlantvak,GBKABeton,GBKABosvak,GBKABraakLiggend,GBKAAsfalt,GBKAHalfverhard,GBKAHout,GBKAKlinkers,GBKAKunstobject,GBKAAgrarisch,GBKAZand,GBKATegels,GBKATuinvergroting,GBKAVerharding,GBKAVolkstuin,GBKAParticulier,GBKABebouwing,GBKAVerblijfsobject,GBKAAdresloosverblijfsobject,GBKAOverbouw,GBKATeksten,GBKALichtmasten1,GBKALichtmasten2,GBKABomen1,GBKABomen2'}, {isBaseLayer:true});
//map.addLayer(Stadsplattegrond);
//Stadsplattegrond.events.on();
var StadsplattegrondZW = new OpenLayers.Layer.WMS.Untiled("Stadsplattegrond (Z/W)", strWMS, {layers:'KLHOpenbaargebied,KLHBebouwing,KLHBedrijventerrein,KLHBos,KLHWater,KLHStrand,KLHHoofdweg,KLHWeg,KLHVliegveld,KLHSnelweg,KLHGemeentegrens,KLHBusbaan,KLHSpoorlijn,KLHTeksten,KLTAutosnelweg,KLTBebouwingCentrum,KLTBedrijven,KLTBedrijventerrein,KLTBijzondereBebouwing,KLTBosvak,KLTCentrum,KLTFietspad,KLTGras,KLTHoofdweg,KLTLandbouwVeeteelt,KLTMoerasNatuur,KLTOVbaan,KLTOverigePaden,KLTSpoorlijnWit,KLTSpoorlijnZwart,KLTSportvelden,KLTSteiger,KLTStrand,KLTWater,KLTWijkwegen,KLTWoningen,KLTWoongebied,KLTGemeentegrens,KLTHoogspanningsleiding,KLTHoogspanningsmasten,KLTInOntwerp,KLTKabelbaan,KLTKavelsloot,KLTWijknamen,KLTParknamen,KLTOpenwaternamen,KLTIndustrienamen,KLTDreefnamen,GBKAWater,GBKAGras,GBKAPlantvak,GBKABeton,GBKABosvak,GBKABraakLiggend,GBKAAsfalt,GBKAHalfverhard,GBKAHout,GBKAKlinkers,GBKAKunstobject,GBKAAgrarisch,GBKAZand,GBKATegels,GBKATuinvergroting,GBKAVerharding,GBKAVolkstuin,GBKAParticulier,GBKABebouwing,GBKAVerblijfsobject,GBKAAdresloosverblijfsobject,GBKAOverbouw,GBKATeksten', SLD:StadsplattegrondZWSLD}, {isBaseLayer:true});
//map.addLayer(StadsplattegrondZW);
api.townplanLayer = new OpenLayers.Layer.WMS("Stadsplattegrond", strWMS, {
layers: 'KLHOpenbaargebied,KLHBebouwing,KLHBedrijventerrein,KLHBos,KLHWater,KLHStrand,KLHHoofdweg,KLHWeg,KLHVliegveld,KLHSnelweg,KLHGemeentegrens,KLHBusbaan,KLHSpoorlijn,KLHTeksten,KLTAutosnelweg,KLTBebouwingCentrum,KLTBedrijven,KLTBedrijventerrein,KLTBijzondereBebouwing,KLTBosvak,KLTCentrum,KLTFietspad,KLTGras,KLTHoofdweg,KLTLandbouwVeeteelt,KLTMoerasNatuur,KLTOVbaan,KLTOverigePaden,KLTSpoorlijnWit,KLTSpoorlijnZwart,KLTSportvelden,KLTSteiger,KLTStrand,KLTWater,KLTWijkwegen,KLTWoningen,KLTWoongebied,KLTGemeentegrens,KLTHoogspanningsleiding,KLTHoogspanningsmasten,KLTInOntwerp,KLTKabelbaan,KLTKavelsloot,KLTWijknamen,KLTParknamen,KLTOpenwaternamen,KLTIndustrienamen,KLTDreefnamen,GBKAWater,GBKAGras,GBKAPlantvak,GBKABeton,GBKABosvak,GBKABraakLiggend,GBKAAsfalt,GBKAHalfverhard,GBKAHout,GBKAKlinkers,GBKAKunstobject,GBKAAgrarisch,GBKAZand,GBKATegels,GBKATuinvergroting,GBKAVerharding,GBKAVolkstuin,GBKAParticulier,GBKABebouwing,GBKAVerblijfsobject,GBKAAdresloosverblijfsobject,GBKAOverbouw,GBKATeksten,GBKALichtmasten1,GBKALichtmasten2,GBKABomen1,GBKABomen2',
transparent:"true",
format: "image/gif"
}, {
isBaseLayer:true,
tileSize: new OpenLayers.Size(480, 920),
buffer: 1
});
map.addLayer(api.townplanLayer);
var pinchControl = new OpenLayers.Control.MyPinchControl();
map.addControl(pinchControl);
pinchControl.activate();
api.satelliteLayer = new OpenLayers.Layer.WMS.Untiled("Luchtfoto", strWMS, {
layers:'mrsid2008,luchtfotos2008,GEENKAART,PERC_UITZONDERINGEN'
}, {
isBaseLayer:true,
setOpacity:10
});
map.addLayer(api.satelliteLayer);
api.townplanLayer.events.register("move", api.townplanLayer, function (e) {
if (api.lastEvent != 'move') {
window.location = 'almere://move';
}
});
api.townplanLayer.events.register("moveend", api.townplanLayer, function (evt) {
api.lastEvent = 'moveend'
});
api.satelliteLayer.events.register("move", api.satelliteLayer, function (e) {
if (api.lastEvent != 'move') {
window.location = 'almere://move';
}
});
api.satelliteLayer.events.register("moveend", api.satelliteLayer, function (evt) {
api.lastEvent = 'moveend'
});
//layerswitcher aanzetten
// var LayerSwitcher = new OpenLayers.Control.LayerSwitcher();
// map.addControl(LayerSwitcher);
// de map centreren in start
map.setCenter(new OpenLayers.LonLat(143844, 486673), 4);
// de map zoomen
//map.zoomTo(4);
}//einde createmap
</script>
<script type="text/javascript">
CreateMap();
</script>
</BODY>
</HTML>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment