-
-
Save bartvde/a54fba599d4e87241e5c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Add all your dependencies here. | |
* | |
* @require Popup.js | |
* @require LayersControl.js | |
*/ | |
// ========= config section ================================================ | |
var url = '/geoserver/ows?'; | |
var infoFormat = 'application/vnd.ogc.gml/3.1.1'; // can also be 'text/html' | |
var center = [16523793.703807741, -5121134.055529997]; | |
var zoom = 6; | |
// ========================================================================= | |
// override the axis orientation for WMS GetFeatureInfo | |
ol.proj.addProjection( | |
new ol.proj.EPSG4326('http://www.opengis.net/gml/srs/epsg.xml#4326', 'enu') | |
); | |
// create a new popup with a close box | |
// the popup will draw itself in the popup div container | |
// autoPan means the popup will pan the map if it's not visible (at the edges of the map). | |
var popup = new app.Popup({ | |
element: document.getElementById('popup'), | |
closeBox: true, | |
autoPan: true | |
}); | |
// in recent ol3 version this is not needed, featureNS and featureType will be determined on the fly | |
// create a GML format to read WMS GetFeatureInfo response | |
var gfiFormats = { | |
'topp:tasmania_state_boundaries': new ol.format.GML({featureNS: 'http://www.openplans.org/topp', featureType: 'tasmania_state_boundaries'}), | |
'topp:tasmania_water_bodies': new ol.format.GML({featureNS: 'http://www.openplans.org/topp', featureType: 'tasmania_water_bodies'}) | |
}; | |
// create a vector layer to contain the feature to be highlighted | |
var highlight = new ol.layer.Vector({ | |
style: new ol.style.Style({ | |
stroke: new ol.style.Stroke({ | |
color: '#00FFFF', | |
width: 3 | |
}) | |
}), | |
source: new ol.source.Vector() | |
}); | |
// when the popup is closed, clear the highlight | |
$(popup).on('close', function() { | |
highlight.getSource().clear(); | |
}); | |
// create the OpenLayers Map object | |
// we add a layer switcher to the map with two groups: | |
// 1. background, which will use radio buttons | |
// 2. default (overlays), which will use checkboxes | |
var layers = [ | |
// MapQuest streets | |
new ol.layer.Tile({ | |
title: 'Street Map', | |
group: "background", | |
source: new ol.source.MapQuest({layer: 'osm'}) | |
}), | |
// MapQuest imagery | |
new ol.layer.Tile({ | |
title: 'Aerial Imagery', | |
group: "background", | |
visible: false, | |
source: new ol.source.MapQuest({layer: 'sat'}) | |
}), | |
// MapQuest hybrid (uses a layer group) | |
new ol.layer.Group({ | |
title: 'Imagery with Streets', | |
group: "background", | |
visible: false, | |
layers: [ | |
new ol.layer.Tile({ | |
source: new ol.source.MapQuest({layer: 'sat'}) | |
}), | |
new ol.layer.Tile({ | |
source: new ol.source.MapQuest({layer: 'hyb'}) | |
}) | |
] | |
}), | |
new ol.layer.Tile({ | |
title: "Tasmania State Boundaries", | |
source: new ol.source.TileWMS({ | |
url: url, | |
params: {'LAYERS': 'topp:tasmania_state_boundaries', 'TILED': true}, | |
serverType: 'geoserver' | |
}) | |
}), | |
new ol.layer.Tile({ | |
title: "Tasmania Water Bodies", | |
source: new ol.source.TileWMS({ | |
url: url, | |
params: {'LAYERS': 'topp:tasmania_water_bodies', 'TILED': true}, | |
serverType: 'geoserver' | |
}) | |
}), | |
highlight | |
]; | |
var map = new ol.Map({ | |
controls: ol.control.defaults().extend([ | |
new app.LayersControl({ | |
groups: { | |
background: { | |
title: "Base Layers", | |
exclusive: true | |
}, | |
'default': { | |
title: "Overlays" | |
} | |
} | |
}) | |
]), | |
// add the popup as a map overlay | |
overlays: [popup], | |
// render the map in the 'map' div | |
target: document.getElementById('map'), | |
// use the Canvas renderer | |
renderer: 'canvas', | |
layers: layers, | |
// initial center and zoom of the map's view | |
view: new ol.View2D({ | |
center: center, | |
zoom: zoom | |
}) | |
}); | |
// register a single click listener on the map and show a popup | |
// based on WMS GetFeatureInfo | |
map.on('singleclick', function(evt) { | |
var viewResolution = map.getView().getView2D().getResolution(); | |
var layers = map.getLayers(); | |
var gfi = []; | |
var formats = [], titles = []; | |
layers.forEach(function(layer) { | |
if (layer.getVisible() === true && layer instanceof ol.layer.Tile && layer.getSource() instanceof ol.source.TileWMS) { | |
var url = layer.getSource().getGetFeatureInfoUrl( | |
evt.coordinate, viewResolution, map.getView().getView2D().getProjection(), | |
{'INFO_FORMAT': infoFormat}); | |
if (url) { | |
gfi.push($.ajax({url: url})); | |
titles.push(layer.get('title')); | |
formats.push(gfiFormats[layer.getSource().getParams()['LAYERS']]); | |
} | |
} | |
}); | |
$.when.apply($, gfi).then(function() { | |
var features = []; | |
var i, ii; | |
for (i=0, ii=arguments.length; i<ii; ++i) { | |
var f = formats[i].readFeatures(arguments[i][0]); | |
if (f[0] !== null) { | |
features.push(f[0]); | |
} | |
} | |
highlight.getSource().clear(); | |
var html = '', hasContent = false; | |
for (i=0, ii=features.length; i<ii; ++i) { | |
var feature = features[i]; | |
feature.getGeometry().transform('EPSG:4326', 'EPSG:3857'); | |
highlight.getSource().addFeature(feature); | |
html += '<p style="font-weight: bold; margin-top: 5px; margin-bottom:5px">' + titles[i] + '</p>'; | |
html += '<table class="table table-striped table-bordered table-condensed">'; | |
var values = feature.getProperties(); | |
for (var key in values) { | |
if (key !== 'the_geom' && key !== 'boundedBy') { | |
html += '<tr><td>' + key + '</td><td>' + values[key] + '</td></tr>'; | |
hasContent = true; | |
} | |
} | |
html += '</table>'; | |
} | |
if (hasContent === true) { | |
popup.setPosition(evt.coordinate); | |
popup.setContent(html); | |
popup.show(); | |
} else { | |
popup.hide(); | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment