Develop Reference

FeatureLoader not loading features in OpenLayers

Trying to use a featureLoader in OpenLayers 6 so that I can gain access to the featuresloadend event but when I try to load the features nothing shows up. Further examination of the pointLayer shows that no features had been added to the Layer.
const pointSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection, success, failure) {
var proj = projection.getCode();
var url = '/awdndb/monitor/geoawdndata?product=scqc1440&begin=2022-09-20&end=2022-09-20&sensor=AirTempMax2m&units=si';
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
var onError = function() {
vectorSource.removeLoadedExtent(extent);
failure();
}
xhr.onerror = onError;
xhr.onload = function() {
if (xhr.status == 200) {
var features = pointSource.getFormat().readFeatures(JSON.parse(xhr.responseText));
pointSource.addFeatures(features);
success(features);
}
else {
onError();
}
}
xhr.send();
}
})
const pointLayer = new ol.layer.Vector({
source: pointSource,
title: 'pointLayer',
style: pointFunction
});
//Setup Overlay
const overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
//Setup Map Object
const map = new ol.Map({
target: 'map',
overlays: [overlay],
view: new ol.View({
center: [-10997148, 4569099],
zoom: 5
})
});
map.addLayer(baseLayer);
map.addLayer(pointLayer);
the json far to big to include entire code):
{"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"EPSG:4326"}},"features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-94.98,48.86]},"properties":{"name":"Williams 6N","state":"MN","county":"Lake of the Woods","sensors":["TIMESTAMP","AirTempMax2m","AirTempMax2m_SCQC_Flag"],"units":["TS","C","Flag"],"data":[["2022-09-20",20.58," "]]}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-100.61,38.51]},"properties":{"name":"Lane","state":"KS","county":"Lane","sensors":["TIMESTAMP","AirTempMax2m","AirTempMax2m_SCQC_Flag"],"units":["TS","C","Flag"],"data":[["2022-09-20",37.86," "]]}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-96.59,39.21]},"properties":{"name":"Manhattan","state":"KS","county":"Riley","sensors":["TIMESTAMP","AirTempMax2m","AirTempMax2m_SCQC_Flag"],"units":["TS","C","Flag"],"data":[["2022-09-20",37.46," "]]}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-108.72,37.53]},"properties":{"name":"Yellow Jacket","state":"CO","county":"Montezuma","sensors":["TIMESTAMP","AirTempMax2m","AirTempMax2m_SCQC_Flag"],"units":["TS","C","Flag"],"data":[["2022-09-20",24.62," "]]}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-102.57,48.49]},"properties":{"name":"Powers Lake 6SE","state":"ND","county":"Mountrail","sensors":
...

Using local GEOJson with OpenLayers

I am a relative beginner to using OpenLayers so I was playing around with some of the examples given on the OpenLayers website. When trying the image-vector-layer example, I had a problem where it would work fine with a json online, but when using a local geojson file the response under the networks section for the geojson file would be an html instead, giving the error "Unexpected token < in JSON at position 0". Attached is my javascript below, the error is occurring at the "url: data/countries.geojson". Is there any way I can use a local file instead of an online link? Thank you!
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorImageLayer from 'ol/layer/VectorImage';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {Fill, Stroke, Style} from 'ol/style';
const style = new Style({
fill: new Fill({
color: '#eeeeee',
}),
});
const vectorLayer = new VectorImageLayer({
background: 'lightblue',
imageRatio: 2,
source: new VectorSource({
url: 'data/countries.geojson',
format: new GeoJSON(),
}),
style: function (feature) {
const color = feature.get('COLOR') || '#eeeeee';
style.getFill().setColor(color);
return style;
},
});
const map = new Map({
layers: [vectorLayer],
target: 'map',
view: new View({
center: [0, 0],
zoom: 1,
}),
});
const featureOverlay = new VectorLayer({
source: new VectorSource(),
map: map,
style: new Style({
stroke: new Stroke({
color: 'rgba(255, 255, 255, 0.7)',
width: 2,
}),
}),
});
let highlight;
const displayFeatureInfo = function (pixel) {
const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
const info = document.getElementById('info');
if (feature) {
info.innerHTML = feature.get('ECO_NAME') || ' ';
} else {
info.innerHTML = ' ';
}
if (feature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (feature) {
featureOverlay.getSource().addFeature(feature);
}
highlight = feature;
}
};
map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
const pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on('click', function (evt) {
displayFeatureInfo(evt.pixel);
});

Make Icon change position to mouse click spot in Open Layers 6

How do you make it so wherever you click on the map, the Icon added on the map just instantly teleports to those coordinates? Currently in the official Open Layers 6 'Examples' page, it shows the drag and drop example with the following example:
import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import Point from 'ol/geom/Point';
import TileJSON from 'ol/source/TileJSON';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {Icon, Style} from 'ol/style';
import {Modify} from 'ol/interaction';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
const iconFeature = new Feature({
geometry: new Point([0, 0]),
name: 'Null Island',
population: 4000,
rainfall: 500,
});
const iconStyle = new Style({
image: new Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'data/icon.png',
}),
});
iconFeature.setStyle(iconStyle);
const vectorSource = new VectorSource({
features: [iconFeature],
});
const vectorLayer = new VectorLayer({
source: vectorSource,
});
const rasterLayer = new TileLayer({
source: new TileJSON({
url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
crossOrigin: '',
}),
});
const target = document.getElementById('map');
const map = new Map({
layers: [rasterLayer, vectorLayer],
target: target,
view: new View({
center: [0, 0],
zoom: 3,
}),
});
const modify = new Modify({
hitDetection: vectorLayer,
source: vectorSource,
});
modify.on(['modifystart', 'modifyend'], function (evt) {
target.style.cursor = evt.type === 'modifystart' ? 'grabbing' : 'pointer';
});
const overlaySource = modify.getOverlay().getSource();
overlaySource.on(['addfeature', 'removefeature'], function (evt) {
target.style.cursor = evt.type === 'addfeature' ? 'pointer' : '';
});
map.addInteraction(modify);
Their wiki does not mention about any convenient property like Icon.setPosition. Thank you.

You add a click listener to the map and change the geometry of the feature:
map.on('click', function (event) {
iconFeature.getGeometry().setCoordinates(event.coordinate);
});

how to change the default marker OPENLAYERS 5

I am trying to display some markers on the OSM. This works so far, but i just wanted to change the default marker against another one from a local path, but i didnt know how to add this to my code, i have tried the setStyle but i didnt know how to apply it correctly. It would be also nice if am able to style the icon too.
I also want markers to be dynamically displayed, because i am doing this manually each time through
var layer = new ol.layer.Vector({source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673]))
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 52.84673]))
}),
]
});
Here is a snippet of the full code that i use
/* open street map newest version */
var map = new ol.Map({
target: 'map', // the div id
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([4.35247, 52.520008]),
zoom: 4
})
});
// add a marker to the map
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 50.84673]))
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([4.35247, 52.84673]))
})
]
})
});
map.addLayer(layer);
//initialize the popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(overlay);
//display the pop with on mouse over
map.on('pointermove', function (event) {
if (map.hasFeatureAtPixel(event.pixel) === true) {
var coordinate = event.coordinate;
content.innerHTML = '<b>Hello world!</b><br />I am a popup.';
overlay.setPosition(coordinate);
}
else {
overlay.setPosition(undefined);
closer.blur();
}
});

Fixed this, the issue was from the local path. If this may help anyone i added this to my code
layer.setStyle(new ol.style.Style({
image: new ol.style.Icon({
src: 'https://wiki.openstreetmap.org/w/images/0/0c/Hgv.png'
})
}));

I want to have some coordinates on my openlayer map

i am trying to get some Dots on my Map with Openlayer. The Maps works fine. I got a JSON file with longitude and latitude and i want them to appear on my map. But it is not working. the parsing wont work somehow.
Error 1:
Error 2:
JSON file: https://github.com/CodeforChemnitz/Haltestellen/blob/gh-pages/haltestellen.json
My Code:
<div class="main-container-cvag">
<div id="map" class="map"></div>
<script src="https://openlayersbook.github.io/openlayers_book_samples/assets/ol3/js/ol.js"></script>
<script>
// Declare a Tile layer with an openstreetmap
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
// latitude and longitude to Chemnitz projection
var chemnitz = ol.proj.transform([12.9213697, 50.827845], 'EPSG:4326', 'EPSG:3857');
// Create a View, set it center and zoom level
var view = new ol.View({
center: chemnitz,
zoom: 13
});
//source
var chemnitzStationSource = new ol.source.Vector();
//dot style
function dotstyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
})
})
});
return [style];
}
//new layer
var chemnitzStations = new ol.layer.Vector({
source: chemnitzStationSource,
style: dotstyle
})
//new Map
var map = new ol.Map({
target: 'map',
layers: [osmLayer, chemnitzStations],
view: view
});
$.ajax({
url: "haltestellen.json",
dataType: "jsonp",
crossDomain: true,
success: function(data) {
var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
data.items.forEach(function (item) {
var feature = new ol.Feature(item);
feature.set('url', item.stations);
var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);
var geometry = new ol.geom.Point(coordinate);
feature.setGeometry(geometry);
chemnitzStationSource.addFeature(feature);
console.log(parseFloat(item.longitude));
});
}
});
map.addLayer(osmLayer);
// Set the view for the map
map.setView(view);
</script>
</div>
Can someone help me what to do? :)

You are loading JSON, but have dataType: "jsonp".
Change it to dataType: "json",.