OpenLayers.ProxyHost = "/ba-simple-proxy.php?mode=native&url=";
// 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 = "https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/pf/wms/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: [], 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 wind_tiled = new OpenLayers.Layer.WMS( "Beschermde Archeologisceh sites", "http://kratos0.ugent.be:8080/geoserver/Windsnelheid/wms", { LAYERS: 'Windsnelheid:Windsnelheid 15m', transparent: true, format: 'image/png', buffer:0
}, { visibility: false } );
map.addLayers([wind_tiled]);
infoControls = { click: new OpenLayers.Control.WMSGetFeatureInfo({ url: 'https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms', title: 'Identify features by clicking', layers: [bas_tiled,SEVESO_tiled, aan_anker_tiled, RAMSAR_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], queryVisible: true })}
for (var i in infoControls) { infoControls[i].events.register("getfeatureinfo", this, showInfo); map.addControl(infoControls[i]); }
infoControls.click.activate();
function showInfo(evt) { if (evt.features.length) { highlightLayer.destroyFeatures(); highlightLayer.addFeatures(evt.features); highlightLayer.redraw(); } else { document.getElementById('south').innerHTML = evt.text; } }
function toggleControl(element) { for (var key in infoControls) { var control = infoControls[key]; if ( element.checked) { control.activate(); } else { control.deactivate(); } } }
function toggleFormat(element) { for (var key in infoControls) { var control = infoControls[key]; control.infoFormat = element.value; } }
function toggleLayers(element) { for (var key in infoControls) { var control = infoControls[key]; if (element.value == 'Specified') { control.layers = [water]; } else { control.layers = null; } } }
// create Base layers
//define OSM base layer mapnik = new OpenLayers.Layer.TMS( "OpenStreetMap", "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]);
// setup tiled layer Gemeente = new OpenLayers.Layer.WMS( "Gemeentegrenzen", "http://geo.vliz.be:80/geoserver/Scheldemonitor/wms", { LAYERS: 'Scheldemonitor:bcommunes', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
map.addLayers([Gemeente]);
// setup tiled layer Provincies = new OpenLayers.Layer.WMS( "Provincies", "http://geo.vliz.be:80/geoserver/Scheldemonitor/wms", { LAYERS: 'Scheldemonitor:bprovinces', transparent: true, format: 'image/png', buffer:0 }, { visibility: false } );
map.addLayers([Provincies]);
var panel = new OpenLayers.Control.EditingToolbar(map); map.addControl(panel); geojson = new OpenLayers.Format.GeoJSON();
} //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());
//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: 70 }),
{region: 'south', contentEl: 'south', split: true, xtype: 'panel', title: 'Ruimtelijke informatie', margins: '0 0 0 0', height: 150, collapsed: false, minSize: 175, maxSize: 400, collapsible: true, items: [
] },
{region: 'east', split: true, xtype: 'panel', title: 'WK13 tool', margins: '0 0 0 0', width: 200, minSize: 175, maxSize: 400, collapsible: true, items: [
{title: 'Omschrijving', contentEl: 'help', border: false },
{title: '', contentE2: 'vak2', 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: 'mapcontainer', title: 'Map', layout: 'fit', height: 'auto',
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', handler: info.activate, 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; } }
var info = new OpenLayers.Control.WMSGetFeatureInfo({ url: 'https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms', title: 'Identify features by clicking', queryVisible: true, eventListeners: { getfeatureinfo: function(event) { map.addPopup(new OpenLayers.Popup.FramedCloud( "chicken", map.getLonLatFromPixel(event.xy), null, event.text, null, true )); } } });
info.activate(); map.addControl(info);
// wire up the option button var options = document.getElementById("options"); options.onclick = toggleControlPanel;
// support GetFeatureInfo map.events.register('click', map, function (e) { document.getElementById('south').innerHTML = "Loading... please wait..."; var params = { REQUEST: "GetFeatureInfo", EXCEPTIONS: "application/vnd.ogc.se_xml", BBOX: map.getExtent().toBBOX(), SERVICE: "WMS", INFO_FORMAT: 'text/html', QUERY_LAYERS: map.layers[0].params.LAYERS, FEATURE_COUNT: 50, Layers: 'ps:ps_anker', WIDTH: map.size.w, HEIGHT: map.size.h, format: format, styles: map.layers[0].params.STYLES, srs: map.layers[0].params.SRS};
// handle the wms 1.3 vs wms 1.1 madness if(map.layers[0].params.VERSION == "1.3.0") { params.version = "1.3.0"; params.j = parseInt(e.xy.x); params.i = parseInt(e.xy.y); } else { params.version = "1.1.1"; params.x = parseInt(e.xy.x); params.y = parseInt(e.xy.y); }
// merge filters if(map.layers[0].params.CQL_FILTER != null) { params.cql_filter = map.layers[0].params.CQL_FILTER; } if(map.layers[0].params.FILTER != null) { params.filter = map.layers[0].params.FILTER; } if(map.layers[0].params.FEATUREID) { params.featureid = map.layers[0].params.FEATUREID; } OpenLayers.loadURL("https://www.mercator.vlaanderen.be:443/raadpleegdienstenmercatorpubliek/ps/wms", params, this, setHTML, setHTML); OpenLayers.Event.stop(e); });

Laden van interactieve kaart
Laden …
Een selectie van waardevolle en gevoelige natuurgebieden in Vlaanderen wordt aan de hand van layers toegevoegd aan deze ruimtelijke informatie kaart.
Deze layers zijn gekoppeld aan de database van Mercator Vlaanderen, opgemaakt door de Afdeling Land en Bodembescherming,
Ondergrond, Natuurlijke Rijkdommen.
Door deze koppeling met deze database, blijft deze ruimtelijke informatie up-to-date.
Door het toevoegen van deze ruimtelijke informatie is het mogelijk voor de gebruiker om op een heel vlotte en accurate
manier rekening te houden met vastgelegde waardevolle en gevoelige gebieden tijdens het vergunningsverleningsproces.
- Met steun van:
test
.
.
.
.
.
.
.
.
Mouse Position (Lat/Lon):
Mouse Position (British National Grid):