// prevent pink tiles OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; OpenLayers.Util.onImageLoadErrorColor = "transparent";
// reference local blank image Ext.BLANK_IMAGE_URL = 'http://mapdata.thehumanjourney.net/mapfish/client/mfbase/ext/resources/images/default/s.gif';
var layer, map, searchprotocol, p, mapnik //define variables here so they can be used globally
// define OSGB for proj4js Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs";
//prevent wfs from falling over OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
function createMap() { var options = { projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326"), units: "m", numZoomLevels: 19, maxResolution: 156543.0339, controls: [new OpenLayers.Control.PanZoomBar(),], maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34) }; return new OpenLayers.Map('map',options); } //end createmap
function addlayers(map){
// define wms layer = new OpenLayers.Layer.WMS("Bedrijventerreinen", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/pf/wms", {layers: 'pf:pf_bedter_ao', transparent: true, format: 'image/png', buffer:0},{visibility: false});
// define wms layer2 = new OpenLayers.Layer.WMS("Bedrijventerrein-percelen", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/pf/wms", {layers: 'pf:pf_bedter_perc_ao', transparent: true, format: 'image/png', buffer:0},{visibility: false});
// define wms layer3 = new OpenLayers.Layer.WMS("Bedrijventerrein-percelen", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/pf/wms", {layers: 'pf:pf_bedter_perc_ao', transparent: true, format: 'image/png', buffer:0},{visibility: false});
// setup tiled layer anker_tiled = new OpenLayers.Layer.WMS( "Ankerplaats", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_anker', transparent: true, format: 'image/png', buffer:0
}, { visibility: false });
// setup single tiled layer anker_untiled = new OpenLayers.Layer.WMS( "Ankerplaats - Untiled", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_anker', transparent: true, format: 'image/png', buffer:0 }, { visibility: false });
// setup tiled layer etll_tiled = new OpenLayers.Layer.WMS( "Erfgoed Traditionele Landschappen - lijnrelict", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/lu/wms", { LAYERS: 'lu:lu_trls_lr', transparent: true, format: 'image/png', buffer:0
}, { visibility: false } );
// setup single tiled layer etll_untiled = new OpenLayers.Layer.WMS( "Erfgoed Traditionele Landschappen - lijnrelict", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/lu/wms", { LAYERS: 'lu:lu_trls_lr', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
// setup tiled layer etlp_tiled = new OpenLayers.Layer.WMS( "Erfgoed Traditionele Landschappen - puntrelict", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/lu/wms", { LAYERS: 'lu:lu_trls_pr', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
// setup tiled layer etlr_tiled = new OpenLayers.Layer.WMS( "Erfgoed Traditionele Landschappen - relictzone", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/lu/wms", { LAYERS: 'lu:lu_trls_rz', transparent: true, format: 'image/png', buffer:0 },
{ visibility: false } );
// setup tiled layer etlr_tiled = new OpenLayers.Layer.WMS( "Erfgoed Traditionele Landschappen - relictzone", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/lu/wms", { LAYERS: 'lu:lu_trls_rz', transparent:true, format: 'image/png',
},
{ visibility: false } );
// setup tiled layer bl_tiled = new OpenLayers.Layer.WMS( "Beschermd landschap", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_land', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
// setup tiled layer bsed_tiled = new OpenLayers.Layer.WMS( "Beschermde stads- en dorpsgezichten", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_stdo', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
// setup tiled layer bos_tiled = new OpenLayers.Layer.WMS( "Bosreservaten", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_bosres', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
// setup tiled layer vogel_tiled = new OpenLayers.Layer.WMS( "Vogelrichtlijnen", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_vglrl', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
// setup tiled layer natuur_tiled = new OpenLayers.Layer.WMS( "Vlaamse Natuurreservaten", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_vlnres', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
// setup tiled layer hag_tiled = new OpenLayers.Layer.WMS( "Herbevestigde agrarische gebieden", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/lu/wms", { LAYERS: 'lu:lu_hag', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
// setup tiled layer bm_tiled = new OpenLayers.Layer.WMS( "Beschermde monumenten", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_monu', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
// setup tiled layer uw_tiled = new OpenLayers.Layer.WMS( "Unesco werelderfgoed", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_unesco', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
// setup tiled layer gd_tiled = new OpenLayers.Layer.WMS( "Gebieden duinendecreet", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_duin', transparent: true, format: 'image/png', buffer:0
}, { visibility: false } );
// setup tiled layer VEN_tiled = new OpenLayers.Layer.WMS( "VEN en IVON gebieden", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_ven', transparent: true, format: 'image/png', buffer:0
}, { visibility: false } );
// setup tiled layer RASAR_tiled = new OpenLayers.Layer.WMS( "RASAR richtlijnen", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_ramsar', transparent: true, format: 'image/png', buffer:0
}, { visibility: false } );
// setup tiled layer SEVESO_tiled = new OpenLayers.Layer.WMS( "SEVESO richtlijnen", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/pf/wms", { LAYERS: 'pf:pf_seveso', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
// setup tiled layer bas_tiled = new OpenLayers.Layer.WMS( "Beschermde Archeologisceh sites", "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", { LAYERS: 'ps:ps_arch', transparent: true, format: 'image/png', buffer:0
}, { visibility: false } );
map.addLayers([bas_tiled, SEVESO_tiled, RASAR_tiled, VEN_tiled, gd_tiled, uw_tiled, bm_tiled, hag_tiled, natuur_tiled, vogel_tiled, bos_tiled, bsed_tiled, bl_tiled, etlr_tiled, etlr_tiled, etlp_tiled, etll_untiled, anker_untiled, anker_tiled]);
// create Base layers
//define OSM base layer mapnik = new OpenLayers.Layer.TMS( "OpenStreetMap Mapping", "http://tile.openstreetmap.org/", { type: 'png', getURL: osm_getTileURL, displayOutsideMaxExtent: true } );
//define google satellite base layer //var gsat = new OpenLayers.Layer.Google( // "Google Satellite Imagery", // {'type': G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels: 22} // );
//add hillshade wms layer // var hills = new OpenLayers.Layer.WMS('Hillshade Map',"http://129.206.229.145/hillshade?", // {layers:"europe_wms:hs_srtm_europa", transparent: true, format: 'image/png'}, // {isBaseLayer: false});
//define protocol for searching searchprotocol = new OpenLayers.Protocol.WFS.fromWMSLayer(layer,{srsName: "EPSG:900913"}) p = mapfish.Protocol.decorateProtocol({ protocol: searchprotocol, TriggerEventDecorator: null });
//define pseudo-layer for highlighting selected features var select = new OpenLayers.Layer.Vector("Selection", { protocol: p, strategies: [new mapfish.Strategy.ProtocolListener({append: false})], styleMap: new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"]), displayInLayerSwitcher: false });
// add layers map.addLayers([layer, layer2, select, mapnik]);
} //end addlayers
function setMapCenter() { //define a new projection object so map can be centred using latlong var proj = new OpenLayers.Projection("EPSG:4326"); var point = new OpenLayers.LonLat(4.4, 50.5); this.setCenter(point.transform(proj, this.getProjectionObject()), 8); } //end setMapCenter
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//set up map var map = createMap(); addlayers(map);
// define the map controls and where they should all go infodiv = document.getElementById("info"); var scalep = infodiv.getElementsByTagName("p")[0]; map.addControl(new OpenLayers.Control.Scale(scalep));
//add mouse position in EPSG 27700 map.addControl(new OpenLayers.Control.MousePosition( {element: infodiv.getElementsByTagName("p")[4], numDigits:0}));
//add mouse position in EPSG 4326 var mousePositionlatlon = new OpenLayers.Control.MousePosition( {element: infodiv.getElementsByTagName("p")[2], numDigits:2, displayProjection: new OpenLayers.Projection("EPSG:4326")});
map.addControl(mousePositionlatlon);
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.Permalink());
//create toolbar var toolbar = new mapfish.widgets.toolbar.Toolbar({ map: map, configurable: false, id: 'toolbarid' });
// create a store to hold the county zoom data var shortcuts = new mapfish.widgets.Shortcuts({ map: map, store: countystore, templates: {header: new Ext.Template("Choose a region or county from the list"), footer: new Ext.Template("The map will zoom directly to it")}});
// create store to display results var store = new Ext.data.Store({ reader: new mapfish.widgets.data.FeatureReader({}, [ {name: 'projcode'}, {name: 'projectnam'}, {name: 'sitecode'}, {name: 'year', type: 'float'}, {name: 'projtype'}, {name: 'town'}, {name: 'county'}, {name: 'office'}]) });
// create search store mediator for adding search results to the store var searchstoreMediator= new mapfish.widgets.data.SearchStoreMediator({ protocol: p, store: store, append: false });
// create expander for search results var expander = new Ext.grid.RowExpander({ tpl: new Ext.Template('
Project Name: {projectnam}
', '
Project Type: {projtype}
', '
Project Code: {projcode}
', '
Site Code: {sitecode}
', '
Year: {year}
', '
Town: {town}
', '
County/Region: {county}
', '
Office: {office}
') });
//create viewport and items for components to live in var viewport = new Ext.Viewport({ layout:'border', listeners: { afterlayout: { fn: setMapCenter, scope: map, single: true } }, items:[ new Ext.BoxComponent({ region: 'north', el: 'north', height: 85 }),
{region: 'east', split: true, xtype: 'panel', title: 'Uitleg WK13 tool', margins: '0 0 0 0', width: 200, minSize: 175, maxSize: 400, collapsible: true, items: [{contentEl: 'help', border: false },
] }, //end region definition
{region: 'west', id: 'west-panel', title: 'Info', margins: '0 0 0 5', width: 200, minSize: 175, maxSize: 400, collapsible: true, border: true, split: true, items: [{ contentEl: 'west', title: 'Lagen', el: 'tree', xtype: 'layertree', height: 500, border: false, collapsible: true, showWmsLegend: true, map: map},
{title: 'Kaart informatie', contentEl: 'info', border: false, collapsible: true},
{title: 'Region/County Zoom', items: shortcuts, collapsed: true, collapsible: true, bodyStyle: 'padding: 7px', border: false},
{title: 'Postcode Zoom', xtype: 'datafieldrecenter', collapsed: true, collapsible: true, bodyStyle: 'padding: 7px 7px 7px 7px', listWidth: 200, width: 'auto', border: false, url: 'http://mapdata.thehumanjourney.net/featureserver/featureserver.cgi/postcodes_google', map: map, fieldLabel: 'Postcode', displayField: 'postcode'}, new Ext.grid.GridPanel ({ title: 'Zoek resultaten', region: 'south', plugins: expander, store: store, height: 300, width: 'auto', border: false, cm: new Ext.grid.ColumnModel([ expander, {id: 'projectnam', header: 'Project Name', sortable: true, dataindex: 'projectnam' }]),//end columns definition viewConfig: { forceFit:true } }) //end grid panel params ]}, {region: 'center', id: 'map', title: 'Map', layout: 'fit', xtype: 'mapcomponent', map: map, tbar: toolbar } ]
}); //end viewport setup
viewport.doLayout();
// define searcher to be activated by toolbar var searcher = new mapfish.Searcher.Map({ mode: mapfish.Searcher.Map.BOX, protocol: p });
//define spacers for toolbar var addSeparator = function(){ toolbar.add(new Ext.Toolbar.Spacer()); toolbar.add(new Ext.Toolbar.Separator()); toolbar.add(new Ext.Toolbar.Spacer()); }
// set up javascript zoom to initial view function zoominitial(){ var proj = new OpenLayers.Projection("EPSG:4326"); var bounds = new OpenLayers.Bounds(-16.43, 38.58, 20.35, 57.56) bounds.transform(proj, map.getProjectionObject()); map.zoomToExtent(bounds); };
//set up controls on toolbar
toolbar.addControl( new OpenLayers.Control.Button({ title: 'Zoom to initial map extent', trigger: zoominitial }), {iconCls: 'zoomfull', toggleGroup: 'map', icon: 'http://www.windkracht13.be/wp-content/uploads/2013/11/map1.png' } );
addSeparator();
toolbar.addControl( new OpenLayers.Control.ZoomBox({ title: 'Zoom in: click in the map or use the left mouse button and drag to create a rectangle' }), { iconCls: 'zoomin', toggleGroup: 'map', icon: 'http://www.windkracht13.be/wp-content/uploads/2013/11/zoom_in_16_ns.png' } );
toolbar.addControl( new OpenLayers.Control.ZoomBox({ out: true, title: 'Zoom out: click in the map or use the left mouse button and drag to create a rectangle' }), { iconCls: 'zoomout', toggleGroup: 'map', icon: 'http://www.windkracht13.be/wp-content/uploads/2013/11/zoom_out_16_ns.png' } );
toolbar.addControl( new OpenLayers.Control.DragPan({ isDefault: true, title: 'Pan map: keep the left mouse button pressed and drag the map' }), { iconCls: 'pan', toggleGroup: 'map', icon: 'http://www.windkracht13.be/wp-content/uploads/2013/11/hand.png' } );
addSeparator();
var nav = new OpenLayers.Control.NavigationHistory(); map.addControl(nav); nav.activate();
toolbar.add( new Ext.Toolbar.Button({ iconCls: 'back', tooltip: 'Previous view', handler: nav.previous.trigger, icon: 'http://www.windkracht13.be/wp-content/uploads/2013/11/arrow-back-sharp-thin.png' }) );
toolbar.add( new Ext.Toolbar.Button({ iconCls: 'next', tooltip: 'Next view', handler: nav.next.trigger, icon:'http://www.windkracht13.be/wp-content/uploads/2013/11/arrow-next-sharp-thin.png' }) );
addSeparator();
toolbar.addControl(searcher, { iconCls: 'infobox', togglegroup: 'map', tooltip: 'info', icon: 'http://www.windkracht13.be/wp-content/uploads/2013/11/info.png' }); //searcher.activate();
toolbar.activate();
// loading image Ext.get('loading').fadeOut({remove: true}); }); //end ext.onReady
// figure out which tiles we need from osm function osm_getTileURL(bounds) { var res = this.map.getResolution(); var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)); var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)); var z = this.map.getZoom(); var limit = Math.pow(2, z);
if (y < 0 || y >= limit) { return OpenLayers.Util.getImagesLocation() + "404.png"; } else { x = ((x % limit) + limit) % limit; return this.url + z + "/" + x + "/" + y + "." + this.type; } }
Laden …
- Het Windkracht 13 project (WK13) is een demonstratie- en disseminatieproject van de Universiteit Gent in het kader van het Nieuw Industrieel Beleid van de Vlaamse overheid.
- Via een interactieve kaart kan de gebruiker van de tool de ruwheid van het landschap en de obstakels (gebouwen, vegetatie e.d.) die in het landschap voorkomen ingeven. Zo kan geverifieerd worden of het plaatsen van een kleine of middelgrote windturbine al dan niet realiseerbaar is.
Mouse Position (Lat/Lon):
Mouse Position (British National Grid):