New answers tagged openlayers
0
I answer this myself, maybe one day it helps somebody else:
OpenLayers event listeners are setup in Vue's "mounted" lifecycle hook. The function such an event listener calls is then defined regularly in "methods".
Example (Vue 2):
export default {
data(() => {
olMap: null,
geolocation: null,
[....]
},
mounted() {
...
2
Your code is not correctly setting the info_format so you get the default format (text/html). This is because you are setting too many arguments in:
var url = UnTiled.getSource().getFeatureInfoUrl(
evt['coordinate'],
viewResolution,
'EPSG:3857', 'EPSG:4326',
{'INFO_FORMAT': 'application/json'}
);
which should be
var url = UnTiled....
0
Add this to your css file.
.map {
height: 550px;
width: 100%;
}
You have to include the styling in openlayers. This will display the map and obviously, change the style to your liking.
0
Finally, I tried to solve the issue on server side. I believed that my WMS server was CORS enabled because it serves other GIS applications / machines but I was wrong.
I enabled it adding in /var/lib/tomcat8/webapps/geoserver/WEB-INF/web.xml file the following (source: https://docs.geoserver.org/latest/en/user/production/container.html#enable-cors):
<!-- ...
2
Really simple. Your map is using EPSG:3857 for projections. It seems you want longitude, latitude. You should do
let xy = ol.proj.toLonLat(clickedCoordinate);
console.log(xy);
Above solution is for standalone Openlayers library, otherwise, when using JavaScript bundlers like Webpack or Parcel, you should do
import {toLonLat} from 'ol/proj';
let xy = ...
2
You can use scale:
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
scale: 10,
offset: [-20, -20],
//anchor: [0.5, 1],
src: "/images/historymarker.png",
opacity: 1,
id: num + &...
0
For "3. Zoom[center] at a certain location" have a look at this code:
import Map from 'ol/Map';
import { fromLonLat } from 'ol/proj';
// This will zoom to your provided location.
// Note: I am assuming you have a Map instance as *map*
function zoomToLocation(map, longlat, zoomLevel, duration = 1000) {
const projectionCode = map.getView()....
2
Try using OpenLayer's map event listener functions instead of window.onresize(). Each time you resize the window, map will have to re-render the map. Have a look at these two map functions and try to experiment, see what happens:
change:view (module:ol/Object.ObjectEvent)
postrender (module:ol/MapEvent~MapEvent) - Triggered after a map frame
is rendered.
...
1
If you are programming in VS Code, you can Shift click on map or on new Map() and see the actual TypeScript code which has all those event listener functions. For example, for v5.3.0 OpenLayers it opens PluggableMap.d.ts Typescript source code and I can see these types of event listeners for map object:
map.on('change', listener)
map.on('change:layerGroup', ...
3
The behavior you are seeing is a consequence of using view extent option. When setting view extent, your essentially saying: nothing outside this extent, top or bottom, left or right, will ever be shown on map.
Why then because of this your colleague's displayed region is cut off on top and bottom? Simply because his view height is lower then yours.
To show ...
0
I don't know if in OpenLayer 3 this works, but in actual version (OL6) I use a simple
layer.setStyle(layer.getStyle())
4
Assigning an id to a feature in OpenLayers is not done through id option, but with the setId method.
Your code could then look something like this:
var myFeature = new ol.Feature({
geometry: new ol.geom.LineString(points),
name: myid
});
myFeature.setId(myid);
var lineString = new ol.layer.Vector({
id: 'MarkersTrail' + myid,
source: new ol.source....
1
As Mike stated in the comments
Even when you have a cluster of one you will need to extract the real feature from the cluster
this means the return feature; will need to instead be return feature.get('features')[0];
so the code became
Omap.on('click', function (evt){
var feature = Omap.forEachFeatureAtPixel(evt.pixel,
function (feature,layer) {
...
0
Ensure that under Layout Properties (if yuo don't see a tab in the Map Layout window, go to Layout > Layout Properties), that 'Print to raster' is unchecked.
Sometimes it also helps to make sure 'Always export as vectors' is checked.
If you have certain layer effects enabled (transparency, blending modes) it may come up with a warning message saying ...
2
One possible solution would be to use drag box interaction boxstart event to record drag start position and map pointerdrag event to check if pointer is dragged out of it's limits and in such case then prevent event propagation and default action.
Code could then look something like this (ES5):
var dragBoxActive = false;
var dragBoxStartX;
var dragBoxStartY;
...
0
Clustering function now complete issue being that the KML coordinate data within the file is listed as
<MultiGeometry><Point><coordinates>-3.08246357229187,53.2285595916199</coordinates></Point></MultiGeometry>
With Multigeometry data not being picked up by leaflet as this must be a single point
//clustering 2 ...
1
If your KML source is not working with a cluster source it may contain features which are not Point geometry. You can add a geometryFunction to the cluster source options to ensure only point features are used when clustering:
var clusterSource = new ol.source.Cluster({
distance: parseInt(distance.value,10),
geometryFunction: function (...
1
I haven't extensively used different tileservers, but I have had a great experience using TileServer GL, and I would characterize it as "lightweight." I regularly use it to serve raster and vector maps offline via QGIS or Mapbox GL JS using the mbtiles format.
This tutorial shows how you can use Docker to launch TileServer GL in basically one ...
2
OpenLayers geolocationn will return coordinates in view projection, but for your test data you will need to transform the Lon/Lat yourself:
const coordinates = fromLonLat([16.3807232, 48.1918976]);
You also need tracking: true in the Geolocation options to enable geolocation at startup (or you could enable it later using this.geolocation.setTracking(true);)...
2
This openlayers example is a bit confusing.
Most webmaps display in "Web Mercator" ie. 'Google Maps-style' projections - EPSG / SRID: 3857
OpenStreetMap data is collected, stored, and distributed in 'unprojected lat/lon' aka WGS84 - EPSG / SRID: 4326.
However, local data for administrative organizations are projected to State Plane zones or UTM ...
9
You've got a good grasp of it. EPSG 4326 (i.e. WGS 84) is not a projection. But if you don't associate a projection to this geographic coordinate system, and naively render the coordinates as x/y coordinates on a grid, you do get something that is sort of a projection: the pseudo plate carée (equirectangular) projection. (This is not the same as an actual ...
0
XMLHttpRequest cannot load http://localhost/Web%20Mapping/fond.geojson. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Answer
Goto IIS Manager and
Try to add below value in HTTP Response for virtual folder (enter inetmgr in run command)
Name: Access-Control-Allow-Origin
Value: *
0
For anyone else who may run into the same issue, I've found this works:
.ol-popup-content {
background-color: rgba(230, 230, 230,0.7);
color: black;
border: 1;
}
I had originally been calling it popup in html but it had to be the above in order to change the displaying properties
2
minZoom/MaxZoom was a recent addition to the layer options in OpenLayers so the LayerSwitcher currently only works as you expected if you specify minResolution/maxResolution. You can use view.getResolutionForZoom() to get the resolutions to specify,
1
Searching for the same reasons, I found this to be a good solution: https://stackoverflow.com/questions/24459826/how-to-get-a-label-bold-in-open-layers-3
Basically Mike's solution in the comments on your question.
I've verified that this works for OpenLayers 6.5 as well. So apparently, the syntax is very sensitive. Bold must be lowercase (bold) and must be ...
0
That was really silly of me. Response is a ReadableStream so you have to do a further response.text() to get the string value (or response.json() if you know it's JSON and you wish to parse it). The below works (I've get the original TypeScript annotations but they don't come into play):
return fetch('https://geoserver.anon.com/geoserver/coredb/ows', {
...
Top 50 recent answers are included
