write code for maps portal of the city. I have problem with my code. I thing that problem is in my js file. I didn´t find answer here and in youtube, but code still not function. When I click on polygon in map, don´t show popup window with data from geoserver. and I’m just a student 🙂 Can you help me please?
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Géoportail-Taza</title>
<link rel="stylesheet" href="ressource/ol/ol.css">
<link rel="stylesheet" href="ressource/layerswitcher/ol-layerswitcher.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="grid-container">
<div class="header">
<img src="ressource/images/logo.jpg" alt="" style="width: inherit; height: inherit; vertical-align: middle;">
<span style="vertical-align: middle;">Géoportail de Géotourisme</span>
</div>
<div class="left">
<div class="toc">
<h3>Cartes</h3>
<input type="checkbox" id="osm" name="osm" value="Open street Map" checked onchange="toggleLayer(event);">
<label for="osm">OpenstreetMap</label>
<br>
<input type="checkbox" id="esri" name="esri" value="ESRI Satellite Imagery" checked onchange="toggleLayer(event);">
<label for="esri">ESRI Satellite Imagery</label>
<br>
<h3>Couches</h3>
<input type="checkbox" id="province" name="province" value="province_taza_pg" checked onchange="toggleLayer(event);">
<label for="province">Taza</label>
<br>
<input type="checkbox" id="communes" name="communes" value="communes_taza_pg" checked onchange="toggleLayer(event);">
<label for="communes">Communes de Taza</label>
<br>
<h4>Ressource Naturelles</h4>
<input type="checkbox" id="Puits" name="Puits" value="PuitsTAZA" checked onchange="toggleLayer(event);">
<label for="Puits">Source d'eaux</label>
<br>
<input type="checkbox" id="Jbel" name="Jbel" value="Jbels_Haut_Inaouene" checked onchange="toggleLayer(event);">
<label for="Jbel">Sommet de Montagne</label>
<br>
</div>
</div>
<div class="right">
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer"> </a>
<div id="popup-content"> </div>
<div class="attQueryDiv" id="attQueryDiv">
<div class="headerDiv" id="headerDiv">
<label for="">Attribute Query</label>
</div>
<br>
<label for="selectLayer">Select Layer:</label>
<select name="selectLayer" id="selectLayer">
<!-- Populate this select box with layer options -->
</select><br><br>
<label for="selectAttribute">Select Attribute:</label>
<select name="selectAttribute" id="selectAttribute">
<!-- Populate this select box with attribute options -->
</select><br><br>
<label for="selectOperator">Select Operator:</label>
<select name="selectOperator" id="selectOperator">
<!-- Populate this select box with operator options -->
</select><br><br>
<label for="enterValue">Enter Value:</label>
<input type="text" name="enterValue" id="enterValue"><br><br>
<button type="button" id="attQryRun" class="attQryRun" onclick="attributeQuery()">Run</button>
</div>
</div>
</div>
<div id="scale-line"></div>
<div id="mouse-position"></div>
</div>
</div>
</div>
<script src="ressource/ol/ol.js"></script>
<script src="ressource/layerswitcher/ol-layerswitcher.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
</body>
</html>`
and for javascript code
var mapView = new ol.View({
center: ol.proj.fromLonLat([-3.9980485, 34.2105603]),
zoom: 8
});
var map = new ol.Map({
target: 'map',
view: mapView,
controls: []
});
var osmTile = new ol.layer.Tile({
title: 'Open Street Map',
type: 'base',
visible: true,
source: new ol.source.OSM()
});
map.addLayer(osmTile);
var esriSatellite = new ol.layer.Tile({
title: 'ESRI Satellite Imagery',
visible: true,
source: new ol.source.XYZ({
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
attributions: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
})
});
map.addLayer(esriSatellite);
var tazacommunesTile = new ol.layer.Tile({
title: "communes_taza_pg",
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/Prov_taza/wms',
attributions:'geoserver',
params: {'LAYERS':'Province_Taza:communes_taza_pg','TILED':true},
serverType: 'geoserver',
visible: true,
})
});
tazacommunesTile.setOpacity(1);
map.addLayer(tazacommunesTile);
var tazaprovinceTile = new ol.layer.Tile({
title: "province_taza_pg",
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/Prov_taza/wms',
params: {'LAYERS':'Province_Taza:province_taza_pg','TILED':true},
serverType: 'geoserver',
visible: true,
})
});
tazaprovinceTile.setOpacity(0.2);
map.addLayer(tazaprovinceTile);
var jbelsHautInaoueneTile = new ol.layer.Tile({
title: "Jbels_Haut_Inaouene",
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/Prov_taza/wms',
params: {'LAYERS':'Province_Taza:Jbels_Haut_Inaouene','TILED':true},
serverType: 'geoserver',
visible: true,
})
});
jbelsHautInaoueneTile.setOpacity(0.4);
map.addLayer(jbelsHautInaoueneTile);
var puitsTile = new ol.layer.Tile({
title: "PuitsTAZA",
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/Prov_taza/wms',
params: {'LAYERS':'Province_Taza:PuitsTAZA','TILED':true},
serverType: 'geoserver',
visible: true,
})
});
puitsTile.setOpacity(0.4);
map.addLayer(puitsTile);
var layerswitcher = new ol.control.LayerSwitcher({
activationMode: 'click',
startActive: false,
groupSelectstyle: 'children'
});
map.addControl(layerswitcher);
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat:ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',
className: 'mouse-position'
});
map.addControl(mousePositionControl);
var scaleLineControl = new ol.control.ScaleLine({
units: 'metric',
target: document.getElementById('scale-line'),
className: 'ol-scale-line',
bar: true,
text: true
});
map.addControl(scaleLineControl);
function toggleLayer(e) {
var lyrname = e.target.value;
var checkedstatus = e.target.checked;
var lyrList = map.getLayers();
lyrList.forEach(function(element){
if (lyrname === element.get('title')){
element.setVisible(checkedstatus);
}
});
}
//GetFeature info
// Créer une couche de popup
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');
const overlay = new ol.Overlay({
element: container,
autoPan: {
animation: {
duration: 250,
},
},
});
map.addOverlay(overlay);
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
map.on('singleclick', function(evt) {
content.innerHTML = ''; // Effacer le contenu précédent
var resolution = mapView.getResolution();
var url = tazacommunesTile.getSource().getFeatureInfoUrl(evt.coordinate, resolution, 'EPSG:4326', {
'INFO_FORMAT': 'application/json',
'propertyName': 'nom_commun,nom_comm_1'
});
if (url) {
$.getJSON(url, function(data) {
var feature = data.features[0];
var props = feature.properties;
content.innerHTML = "<h3> Commune : </h3> <p>" + props.nom_commun.toUpperCase() + "</p> <br> <h3> Communes 1: </h3> <p>" + props.nom_comm_1.toUpperCase() + "</p>";
overlay.setPosition(evt.coordinate);
});
} else {
overlay.setPosition(undefined);
}
});
// Create the home button
const homeButton = document.createElement('button');
homeButton.innerHTML = '<img src="/files/home.svg" alt="" style="width: 20px; height:20px; filter: brightness(0) invert(1); vertical-align: middle;">';
homeButton.className = 'myButton';
// Create the home button container
const homeElement = document.createElement('div');
homeElement.className = 'homeButtonDiv';
homeElement.appendChild(homeButton);
// Create the home control
const homeControl= new ol.control.Control({
element: homeElement
});
// Add the home control to the map
map.addControl(homeControl);
// Add click event listener to the home button
homeButton.addEventListener("click", () => {
location.href = "index.html";
});
// Create full screen control
const fsButton = document.createElement('button');
fsButton.innerHTML = '<img src="/files/fullscreen.svg" alt="" style="width: 20px; height: 20px; filter: brightness(0) invert(1);">';
fsButton.className = 'myButton';
const fsElement = document.createElement('div');
fsElement.className = 'fsButtonDiv';
fsElement.appendChild(fsButton);
const fsControl = new ol.control.Control({ element: fsElement });
fsButton.addEventListener("click", () => {
const mapEle = document.getElementById("map");
if (mapEle.requestFullscreen) {
mapEle.requestFullscreen();
} else if (mapEle.msRequestFullscreen) {
mapEle.msRequestFullscreen();
} else if (mapEle.mozRequestFullscreen) {
mapEle.mozRequestFullscreen();
} else if (mapEle.webkitRequestFullscreen) {
mapEle.webkitRequestFullscreen();
}
});
map.addControl(fsControl);
//test
// start: ZoomIn Control
var ZoomInInteraction = new ol.interaction.DragBox();
ZoomInInteraction.on('boxend', function () {
var ZoomInExtent = ZoomInInteraction.getGeometry().getExtent();
var zoomInFactor = 2; // Adjust this value to change the zoom level increase amount
var newZoomLevel = map.getView().getZoom() + zoomInFactor;
map.getView().fit(ZoomInExtent, {size: map.getSize(), duration: 250, maxZoom: newZoomLevel});
});
var ziButton = document.createElement('button');
ziButton.innerHTML = '<img src="files/zoomin.svg" alt="" salt="" style="width: 20px; height: 20px; filter: brightness(0) invert(1)">';
ziButton.className = 'myButton';
ziButton.id = 'ziButton';
var ziElement = document.createElement('div');
ziElement.className = 'ziButtonDiv';
ziElement.appendChild(ziButton);
var ZoomInFlag = false;
ziButton.addEventListener("click", () => {
ziButton.classList.toggle('clicked');
ZoomInFlag = !ZoomInFlag;
if (ZoomInFlag) {
document.getElementById("map").style.cursor = 'zoom-in';
map.addInteraction(ZoomInInteraction);
} else {
document.getElementById("map").style.cursor = 'auto';
map.removeInteraction(ZoomInInteraction);
}
});
var ziControl = new ol.control.Control({
element: ziElement
});
map.addControl(ziControl);
// end: ZoomIn Control
// start: ZoomOut Control
var ZoomOutInteraction = new ol.interaction.DragBox();
ZoomOutInteraction.on('boxend', function () {
var ZoomOutExtent = ZoomOutInteraction.getGeometry().getExtent();
var zoomOutFactor = 2; // Adjust this value to change the zoom level decrease amount
var newZoomLevel = map.getView().getZoom() - zoomOutFactor;
map.getView().setZoom(newZoomLevel);
});
var zoButton = document.createElement('button');
zoButton.innerHTML = '<img src="/files/zoomOut.svg" alt="" salt="" style="width: 20px; height: 20px; filter: brightness(0) invert(1)">';
zoButton.className = 'myButton';
zoButton.id = 'zoButton';
var zoElement = document.createElement('div');
zoElement.className = 'zoButtonDiv';
zoElement.appendChild(zoButton);
var ZoomOutFlag = false;
zoButton.addEventListener("click", () => {
zoButton.classList.toggle('clicked');
ZoomOutFlag = !ZoomOutFlag;
if (ZoomOutFlag) {
document.getElementById("map").style.cursor = 'zoom-out';
map.addInteraction(ZoomOutInteraction);
} else {
document.getElementById("map").style.cursor = 'auto';
map.removeInteraction(ZoomOutInteraction);
}
});
var zoControl = new ol.control.Control({
element: zoElement
});
map.addControl(zoControl);
// end: ZoomOut Control
// Create a button element for length measurement
var lengthButton = document.createElement('button');
lengthButton.innerHTML = '<img src="/files/Length.svg" alt="" salt="" style="width: 20px; height: 20px; filter: brightness(0) invert(1)">';
lengthButton.className = 'myButton';
lengthButton.id = 'lengthButton';
// Create a div element to hold the button
var lengthElement = document.createElement('div');
lengthElement.className = 'lengthButtonDiv';
lengthElement.appendChild(lengthButton);
// Create a new OpenLayers control for the length measurement button
var lengthControl = new ol.control.Control({
element: lengthElement
})
// Initialize a flag to track the state of the length measurement tool
var lengthFlag = false;
// Add an event listener to the length button
lengthButton.addEventListener("click", () => {
// Toggle the 'clicked' class on the button
lengthButton.classList.toggle('clicked');
// Toggle the lengthFlag
lengthFlag =!lengthFlag;
// Update the cursor style on the map
document.getElementById("map").style.cursor = "default";
if (lengthFlag) {
// Remove any existing draw interaction
map.removeInteraction(draw);
// Add a new draw interaction for LineString
draw = new ol.interaction.Draw({
source: source,
type: 'LineString',
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)',
}),
stroke: new ol.style.Stroke({
color:'#ffcc33',
width: 2,
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33',
}),
}),
})
});
map.addInteraction(draw);
createMesureTooltip();
createHelpTooltip();
var sketch;
var pointerMoveHandler = function (evt) {
if (evt.dragging) {
return;
}
var helpMsg = 'Click to start drawing';
if (sketch) {
var geom = sketch.getGeometry();
if (geom instanceof ol.geom.LineString) {
helpMsg = continueLineMsg;
}
}
helpTooltipElement.innerHTML = helpMsg;
helpTooltip.setPosition(evt.coordinate);
helpTooltipElement.classList.remove('hidden');
};
map.on('pointermove', pointerMoveHandler);
draw.on('drawstart', function (evt) {
sketch = evt.feature;
var tooltipCoord = evt.coordinate;
sketch.getGeometry().on('change', function (evt) {
var geom = evt.target;
var output;
if (geom instanceof ol.geom.LineString) {
output = formatLength(geom);
tooltipCoord = geom.getLastCoordinate();
}
measureTooltipElement.innerHTML = output;
measureTooltip.setPosition(tooltipCoord);
});
});
draw.on('drawend', function () {
measureTooltipElement.ClassName='ol-tooltip ol-tooltip-static';
measureTooltip.setOffset([0,-7]);
sketch = null;
measureTooltipElement = null;
createMesureTooltip();
});
} else {
map.removeInteraction(draw);
source.clear();
const elements = document.getElementsByClassName("ol-tooltip ol-tooltip-static");
while (elements.length > 0) elements[0].remove();
}
});
// Add the length control to the map
map.addControl(lengthControl);
// Create a button element for area measurement
var areaButton = document.createElement('button');
areaButton.innerHTML = '<img src="/files/area.svg" alt="" style="width: 20px; height: 20px; filter: brightness(0) invert(1)">';
areaButton.className = 'myButton';
areaButton.id = 'removeButton';
var areaElement = document.createElement('div');
areaElement.className = 'areaButtonDiv';
areaElement.appendChild(areaButton);
var areaControl = new ol.control.Control({
element: areaElement
})
var areaFlag = false;
areaButton.addEventListener("click", () => {
areaButton.classList.toggle('clicked');
areaFlag = !areaFlag;
document.getElementById("map").style.cursor = "default";
if (areaFlag) {
map.removeInteraction(draw);
draw = new ol.interaction.Draw({
source: source,
type: 'Polygon',
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)',
}),
stroke: new ol.style.Stroke({
color:'#ffcc33',
width: 2,
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33',
}),
}),
})
});
map.addInteraction(draw);
createMesureTooltip();
createHelpTooltip();
var sketch;
var pointerMoveHandler =function (evt) {
if (evt.dragging) {
return;
}
var helpMsg = 'Click to start drawing';
if (sketch) {
var geom = sketch.getGeometry();
if (geom instanceof ol.geom.Polygon) {
helpMsg = continuePolygonMsg;
}
}
helpTooltipElement.innerHTML = helpMsg;
helpTooltip.setPosition(evt.coordinate);
helpTooltipElement.classList.remove('hidden');
};
map.on('pointermove', pointerMoveHandler);
draw.on('drawstart', function (evt) {
sketch = evt.feature;
var tooltipCoord = evt.coordinate;
sketch.getGeometry().on('change', function (evt) {
var geom = evt.target;
var output;
if (geom instanceof ol.geom.Polygon) {
output = formatArea(geom);
tooltipCoord = geom.getInteriorPoint().getCoordinates();
}
measureTooltipElement.innerHTML = output;
measureTooltip.setPosition(tooltipCoord);
});
});
draw.on('drawend', function () {
measureTooltipElement.ClassName='ol-tooltip ol-tooltip-static';
measureTooltip.setOffset([0,-7]);
sketch = null;
measureTooltipElement = null;
createMesureTooltip();
});
} else {
map.removeInteraction(draw);
source.clear();
const elements = document.getElementsByClassName("ol-tooltip ol-tooltip-static");
while (elements.length > 0) elements[0].remove();
}
});
map.addControl(areaControl);
function createMesureTooltip() {
if (measureTooltipElement) {
measureTooltipElement.parentNode.removeChild(measureTooltipElement);
}
measureTooltipElement = document.createElement('div');
measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
measureTooltip = new ol.Overlay({
element: measureTooltipElement,
offset: [0, -15],
positioning: 'bottom-center'
});
map.addOverlay(measureTooltip);
}
function createHelpTooltip() {
if (helpTooltipElement) {
helpTooltipElement.parentNode.removeChild(helpTooltipElement);
}
helpTooltipElement = document.createElement('div');
helpTooltipElement.className = 'ol-tooltip hidden';
helpTooltip = new ol.Overlay({
element: helpTooltipElement,
offset: [15, 0],
positioning: 'center-left',
});
map.addOverlay(helpTooltip);
}
var continuePolygonMsg = 'Click to continue polygon, Double click to complete';
var continueLineMsg = 'Click to continue line, Double click to complete';
var draw;
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)',
}),
stroke: new ol.style.Stroke({
color:'#ffcc33',
width: 2,
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33',
}),
}),
}),
});
map.addLayer(vector);
//test
var removeButton = document.createElement('button');
removeButton.innerHTML = '<img src="/files/remove.svg" alt="" style="width: 20px; height: 20px; filter: brightness(0) invert(1)">';
removeButton.className = 'myButton';
removeButton.id = 'removeButton';
var removeElement = document.createElement('div');
removeElement.className = 'removeButtonDiv';
removeElement.appendChild(removeButton);
var removeControl = new ol.control.Control({
element: removeElement
});
map.addControl(removeControl);
removeButton.addEventListener("click", () => {
map.removeLayer(vector);
source.clear();
const elements = document.getElementsByClassName("ol-tooltip ol-tooltip-static");
while (elements.length > 0) elements[0].remove();
});
//add button
var geojson;
var featureOverlay;
var qryButton = document.createElement('button');
qryButton.innerHTML = '<img src="/files/query.svg" alt="" style="width: 20px; height: 20px; filter: brightness(0) invert(1)">';
qryButton.className = 'myButton';
qryButton.id = 'qryButton';
var qryElement = document.createElement('div');
qryElement.className = 'myButtonDiv';
qryElement.appendChild(qryButton);
var qryControl = new ol.control.Control({
element: qryElement
});
var qryFlag = false;
qryButton.addEventListener("click", () => {
// disableOtherInteraction('lengthButton');
qryButton.classList.toggle('clicked');
qryFlag = !qryFlag;
document.getElementById("map").style.cursor = "default";
if (qryFlag) {
if (geojson) {
geojson.getSource().clear();
map.removeLayer(geojson);
}
if (featureOverlay) {
featureOverlay.getSource().clear();
map.removeLayer(featureOverlay);
document.getElementById("map").style.cursor = "default";
document.getElementById("attQueryDiv").style.display = "block";
bolIdentify = false;
addMapLayerList();
}
} else {
document.getElementById("map").style.cursor = "default";
document.getElementById("attQueryDiv").style.display = "none";
document.getElementById("attListDiv").style.display = "none";
if (geojson) {
geojson.getSource().clear();
map.removeLayer(geojson);
if (featureOverlay) {
featureOverlay.getSource().clear();
map.removeLayer(featureOverlay);
}
}
}
})
map.addControl(qryControl);
I will be so thankfull if anyone can help for real <3
I try to show the attribute of the layer that I added from geoserver and It does’nt function and the samething for length and area mesuring and qrybutton
