Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Ground Controller Lvl 1
Message 1 of 1

coords dynamic load in OpenLayers 5.3.0 fails. Please Help!

Hello there.

 

Pleace help me with this issue, if you can.

 

I'm using OpenStreetMap with OpenLayers 5.3.0 and jQuery 1.12.4 and everything works finde except this one "little" problem.

I don't know why but if I try to load coordinates dynamicly, it fails.

I tried almost everything yet for hours and hours but it still don't work in a dynamic way.

 

the following code works fine. But it's not dynamic.

 

If I try to separate the following code from "var a = ..." till "map.addLayer(vectorLayer);" and create an own function of it, which I then add to createMap(); function, it fails.

 

I also figured out that if I try to use the following code wth "createMap(someExampleCoordinates)" and call this function somewhere else, where I put the coordinates in it, it also wont work. (I'll name it someExampleCoordinates just for it self- explanatory. I think you'll understand, please ask me, if not.)

 

I also have to push the array data in an array in the way my code shows, because later I have to load data in this way from another source.

 

Please help! There must be a way to load coordinates dynamicly..

 

$(document).ready(function() {
	createMap();
});

var places = []

function createMap() {
	var berlinCenter = ol.proj.fromLonLat([ 13.400005, 52.518266 ]);
	var berlinView = new ol.View({
		center : berlinCenter,
		zoom : 10.1
	});

	var map = new ol.Map({
		target : 'mapId',
		view : berlinView,
		layers : [ new ol.layer.Tile({
			preload : 3,
			source : new ol.source.OSM()
		}),/* vectorLayer,*/ ],
		loadTilesWhileAnimating : true,
	});
	
	var a =  [ 13.372403, 52.544262 ];
	var b = [ 13.559422, 52.528900 ];
	places.push(a, b);
	
	var vectorSource = new ol.source.Vector({});

	for (var i = 0; i < places.length; i++) {
		var marker = new ol.Feature({
			geometry : new ol.geom.Point(ol.proj.transform([ places[i][0],
					places[i][1] ], 'EPSG:4326', 'EPSG:3857')),
		});

		var markerStyle = [ new ol.style.Style({
			image : new ol.style.Icon(({
				scale : 0.9,
				rotateWithView : false,
				anchor : [ 0.5, 1 ],
				anchorXUnits : 'fraction',
				anchorYUnits : 'fraction',
				opacity : 1,
				src : 'img/marker.png'
			})),
			zIndex : 5
		}), new ol.style.Style({
			image : new ol.style.Circle({
				radius : 3.3,
				fill : new ol.style.Fill({
					color : 'rgba(255, 255, 255,1)'
				}),
				stroke : new ol.style.Stroke({
					color : 'rgba(204,0,0,1)'
				})
			})
		}) ];
		vectorSource.addFeature(marker);
		marker.setStyle(markerStyle);
	}

	var vectorLayer = new ol.layer.Vector({
		source : vectorSource,
		updateWhileAnimating : true,
		updateWhileInteracting : true,
	});

	map.addLayer(vectorLayer);
}