Satish Sanaboyina

How Can I Add Popup In This Code On Polygons When I click?

Aug 31 2018 2:20 AM

<head>

<style>

.ol-zoom {

top: 52px;

}

.ol-toggle-options {

z-index: 1000;

background: rgba(255,255,255,0.4);

border-radius: 4px;

padding: 2px;

position: absolute;

left: 8px;

top: 8px;

}

#updateFilterButton, #resetFilterButton {

height: 22px;

width: 22px;

text-align: center;

text-decoration: none !important;

line-height: 22px;

margin: 1px;

font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;

font-weight: bold !important;

background: rgba(0,60,136,0.5);

color: white !important;

padding: 2px;

}

.ol-toggle-options a {

background: rgba(0,60,136,0.5);

color: white;

display: block;

font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;

font-size: 19px;

font-weight: bold;

height: 22px;

line-height: 11px;

margin: 1px;

padding: 0;

text-align: center;

text-decoration: none;

width: 22px;

border-radius: 2px;

}

.ol-toggle-options a:hover {

color: #fff;

text-decoration: none;

background: rgba(0,60,136,0.7);

}

body {

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: small;

}

iframe {

width: 100%;

height: 250px;

border: none;

}

/* Toolbar styles */

#toolbar {

position: relative;

padding-bottom: 0.5em;

}

#toolbar ul {

list-style: none;

padding: 0;

margin: 0;

}

#toolbar ul li {

float: left;

padding-right: 1em;

padding-bottom: 0.5em;

}

#toolbar ul li a {

font-weight: bold;

font-size: smaller;

vertical-align: middle;

color: black;

text-decoration: none;

}

#toolbar ul li a:hover {

text-decoration: underline;

}

#toolbar ul li * {

vertical-align: middle;

}

#map {

clear: both;

position: relative;

width: 768px;

height: 700px;

border: 1px solid black;

}

#wrapper {

width: 768px;

}

#location {

float: right;

}

/* Styles used by the default GetFeatureInfo output, added to make IE happy */

table.featureInfo, table.featureInfo td, table.featureInfo th {

border: 1px solid #ddd;

border-collapse: collapse;

margin: 0;

padding: 0;

font-size: 90%;

padding: .2em .1em;

}

table.featureInfo th {

padding: .2em .2em;

font-weight: bold;

background: #eee;

}

table.featureInfo td {

background: #fff;

}

table.featureInfo tr.odd td {

background: #eee;

}

table.featureInfo caption {

text-align: left;

font-size: 100%;

font-weight: bold;

padding: .2em .2em;

}

</style>

<title>OpenLayers map preview</title>

</head>

<body>

<ul>

<li>

<a>WMS version:</a>

</select>

</li>

<li>

<a>Tiling:</a>

<option value="untiled">Single tile</option>

<option value="tiled">Tiled</option>

</select>

</li>

<li>

<a>Antialias:</a>

<option value="none">Disabled</option>

</select>

</li>

<li>

<a>Format:</a>

</select>

</li>

<li>

<a>Styles:</a>

<option value="">Default</option>

</select>

</li>

<li>

<a>Width/Height:</a>

<!--

These values come from a statistics of the viewable area given a certain screen area

(but have been adapted a litte, simplified numbers, added some resolutions for wide screen)

You can find them here: http://www.evolt.org/article/Real_World_Browser_Size_Stats_Part_II/20/2297/

--><option value="auto">Auto</option>

</select>

</select>

</li>

<li>

<a>Filter:</a>

<option value="fid">FeatureID</option>

</select>

<a id="updateFilterButton" href="#" onClick="updateFilter()" title="Apply filter">Apply</a>

<a id="resetFilterButton" href="#" onClick="resetFilter()" title="Reset filter">Reset</a>

</li>

</ul>

</div>

</div>

</div>

<em>Click on the map to get feature info</em>

</div>

var pureCoverage = false;

// if this is just a coverage or a group of them, disable a few items,

// and default to jpeg format

var format = 'image/png';

var bounds = [-242584.78125, 967553.5625,

2621358.5, 3578299.5];

if (pureCoverage) {

document.getElementById('antialiasSelector').disabled = true;

document.getElementById('jpeg').selected = true;

format = "image/jpeg";

}

var supportsFiltering = true;

if (!supportsFiltering) {

document.getElementById('filterType').disabled = true;

document.getElementById('filter').disabled = true;

document.getElementById('updateFilterButton').disabled = true;

document.getElementById('resetFilterButton').disabled = true;

}

var mousePositionControl = new ol.control.MousePosition({

className: 'custom-mouse-position',

target: document.getElementById('location'),

coordinateFormat: ol.coordinate.createStringXY(5),

undefinedHTML: ' '

});

var untiled = new ol.layer.Image({

source: new ol.source.ImageWMS({

ratio: 1,

url: 'http://localhost:8080/geoserver/map9/wms',

params: {'FORMAT': format,

'VERSION': '1.1.1',

"STYLES": '',

"LAYERS": 'map9:map9',

"exceptions": 'application/vnd.ogc.se_inimage',

}

})

});

var tiled = new ol.layer.Tile({

visible: false,

source: new ol.source.TileWMS({

url: 'http://localhost:8080/geoserver/map9/wms',

params: {'FORMAT': format,

'VERSION': '1.1.1',

tiled: true,

"STYLES": '',

"LAYERS": 'map9:map9',

"exceptions": 'application/vnd.ogc.se_inimage',

tilesOrigin: -242584.78125 + "," + 967553.5625

}

})

});

var projection = new ol.proj.Projection({

code: 'EPSG:3857',

units: 'm',

axisOrientation: 'neu',

global: true

});

var Layer_OpenCycleMap = new ol.layer.Tile({

source: new ol.source.OSM({

attributions: [new ol.Attribution({ html: 'Maps <a href="#">OpenCycleMap</a>' }), ol.source.OSM.ATTRIBUTION],

url: 'http://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}'

})

});

var map = new ol.Map({

controls: ol.control.defaults({

attribution: false

}).extend([mousePositionControl]),

target: 'map',

layers: [Layer_OpenCycleMap,

untiled,

tiled

view: new ol.View({

projection: projection

})

});

map.getView().on('change:resolution', function(evt) {

var resolution = evt.target.get('resolution');

var units = map.getView().getProjection().getUnits();

var dpi = 25.4 / 0.28;

var mpu = ol.proj.METERS_PER_UNIT[units];

var scale = resolution * mpu * 39.37 * dpi;

if (scale >= 9500 && scale <= 950000) {

scale = Math.round(scale / 1000) + "K";

} else if (scale >= 950000) {

scale = Math.round(scale / 1000000) + "M";

} else {

scale = Math.round(scale);

}

document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;

});

map.getView().fit(bounds, map.getSize());

map.on('singleclick', function(evt) {

document.getElementById('nodelist').innerHTML = "Loading... please wait...";

var view = map.getView();

var viewResolution = view.getResolution();

var source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();

var url = source.getGetFeatureInfoUrl(

evt.coordinate, viewResolution, view.getProjection(),

{'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});

if (url) {

document.getElementById('nodelist').innerHTML = '<iframe seamless src="' + url + '"></iframe>';

}

});

// sets the chosen WMS version

function setWMSVersion(wmsVersion) {

map.getLayers().forEach(function(lyr) {

lyr.getSource().updateParams({'VERSION': wmsVersion});

});

if(wmsVersion == "1.3.0") {

origin = bounds[1] + ',' + bounds[0];

} else {

origin = bounds[0] + ',' + bounds[1];

}

tiled.getSource().updateParams({'tilesOrigin': origin});

}

// Tiling mode, can be 'tiled' or 'untiled'

function setTileMode(tilingMode) {

if (tilingMode == 'tiled') {

untiled.set('visible', false);

tiled.set('visible', true);

} else {

tiled.set('visible', false);

untiled.set('visible', true);

}

function setAntialiasMode(mode) {

map.getLayers().forEach(function(lyr) {

lyr.getSource().updateParams({'FORMAT_OPTIONS': 'antialias:' + mode});

});

}

// changes the current tile format

function setImageFormat(mime) {

map.getLayers().forEach(function(lyr) {

lyr.getSource().updateParams({'FORMAT': mime});

});

}

function setStyle(style){

map.getLayers().forEach(function(lyr) {

lyr.getSource().updateParams({'STYLES': style});

});

}

function setWidth(size){

var mapDiv = document.getElementById('map');

var wrapper = document.getElementById('wrapper');

if (size == "auto") {

// reset back to the default value

mapDiv.style.width = null;

wrapper.style.width = null;

}

else {

mapDiv.style.width = size + "px";

wrapper.style.width = size + "px";

}

// notify OL that we changed the size of the map div

map.updateSize();

}

function setHeight(size){

var mapDiv = document.getElementById('map');

if (size == "auto") {

// reset back to the default value

mapDiv.style.height = null;

}

else {

mapDiv.style.height = size + "px";

}

// notify OL that we changed the size of the map div

map.updateSize();

}

function updateFilter(){

if (!supportsFiltering) {

return;

}

var filterType = document.getElementById('filterType').value;

var filter = document.getElementById('filter').value;

// by default, reset all filters

var filterParams = {

'FILTER': null,

'CQL_FILTER': null,

'FEATUREID': null

};

if (filter.replace(/^\s\s*/, '').replace(/\s\s*$/, '') != "") {

if (filterType == "cql") {

filterParams["CQL_FILTER"] = filter;

}

if (filterType == "ogc") {

filterParams["FILTER"] = filter;

}

if (filterType == "fid")

filterParams["FEATUREID"] = filter;

}

// merge the new filter definitions

map.getLayers().forEach(function(lyr) {

lyr.getSource().updateParams(filterParams);

});

}

function resetFilter() {

if (!supportsFiltering) {

return;

}

document.getElementById('filter').value = "";

updateFilter();

}

// shows/hide the control panel

function toggleControlPanel(){

var toolbar = document.getElementById("toolbar");

if (toolbar.style.display == "none") {

toolbar.style.display = "block";

}

else {

toolbar.style.display = "none";

}

map.updateSize()

}

</script>

</body>

</html>

Answers (3)

creating a dynamic website

Can I download my Gmail emails to my local system?