ZeusAFK · April 5, 2019 21:16
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Document</title>
 	<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 	<script type="text/javascript" src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
 	<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 	<style type="text/css">
 		body {
 			margin: 0;
 			padding: 0;
 			overflow: hidden;
 		}
 		#map:focus {
 			outline: #4A74A8 solid 0.15em;
 		}
 		.overlay-label {
 			text-decoration: none;
 			color: white;
 			font-size: 11pt;
 			font-weight: bold;
 			text-shadow: black 0.1em 0.1em 0.2em;
 		}
 		.popover-content {
 			min-width: 250px;
 		}
 	</style>
 </head>
 <body>
 	<div id="map" class="map">
 		<div id="popup"></div>
 	</div>
 	<script type="text/javascript">
 		var locations = [
 			{ 'id': 1, 'color': 'amarillo', 'x': -63.1997168, 'y': -17.7677971, 'name': 'Sucursal 1', 'address': 'Avenida Noel Kempff Mercado 715, Santa Cruz de la Sierra' },
 			{ 'id': 2, 'color': 'negro', 'x': -63.1991416, 'y': -17.7695694, 'name': 'Sucursal 2', 'address': 'Av. Ovidio Barbery Justiniano (radial 26), Santa Cruz de la Sierra' }
 		];

 		var features = [];

 		$.each(locations, function(){
 			var that = this;

 			$('body').append($("<div id='overlay-"+that.id+"' />").addClass('overlay-label').html(that.name));

 			var coordinates = new ol.geom.Point(ol.proj.transform([that.x, that.y], 'EPSG:4326', 'EPSG:3857'));
 			var feature = new ol.Feature({
 				id: 'addressfeature',
 				geometry: coordinates,
 				address: that.address,
 				patito_color : that.color
 			});

 			feature.setStyle(
 				new ol.style.Style({
 					image: new ol.style.Icon({
 						opacity: 1,
 						scale: 1,
 						src: 'marker.png'
 					}),
 					text: new ol.style.Text({
 						font: '11px helvatica, sans-serif',
 						fill: new ol.style.Fill({
 							color: '#FAFAFA'
 						})
 					})
 				})
 			);
 			
 			features.push(feature);
 		});

 		var vectorSource = new ol.source.Vector({
 			features: features
 		});

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

 		var view = new ol.View({
 			center: [0, 0],
 			zoom: 2
 		});

 		var map = new ol.Map({
 			layers: [
 				new ol.layer.Tile({
 					source: new ol.source.OSM()
 				}),
 				vectorLayer
 			],
 			target: 'map',
 			view: view
 		});

 		map.getView().fit(vectorSource.getExtent(), map.getSize());

 		var popup = new ol.Overlay({
 			element: document.getElementById('popup')
 		});
 		map.addOverlay(popup);

 		$.each(locations, function(){
 			var that = this;
 			var overlay = new ol.Overlay({
 				position: ol.proj.fromLonLat([that.x, that.y]),
 				element: document.getElementById('overlay-' + that.id)
 			});
 			map.addOverlay(overlay);
 		});

 		map.on('click', function(evt){
 			var feature = map.forEachFeatureAtPixel(evt.pixel,function(feature) {
 				return feature;
 			});

 			var element = popup.getElement();
 			$(element).popover('destroy');

 			if (feature) {
 				var coordinates = feature.getGeometry().getCoordinates();
 				popup.setPosition(coordinates);

 				$(element).popover({
 					'placement': 'top',
 					'animation': false,
 					'html': true,
 					'content': '<p>'+feature.get('address')+ ' patito color ' + feature.get('patito_color') + '</p>'
 				});
 				$(element).popover('show');
 			}
 		});

 		var geolocation = new ol.Geolocation({
 			projection: view.getProjection()
 		});

 		geolocation.setTracking(true);

 		var accuracyFeature = new ol.Feature();
 		geolocation.on('change:accuracyGeometry', function(){
 			accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
 		});

 		var positionFeature = new ol.Feature();
 		positionFeature.setStyle(new ol.style.Style({
 			image: new ol.style.Circle({
 				radius: 6,
 				fill: new ol.style.Fill({
 					color: '#3399CC'
 				}),
 				stroke: new ol.style.Stroke({
 					color: '#fff',
 					width: 2
 				})
 			})
 		}));

 		geolocation.on('change:position', function() {
 			var coordinates = geolocation.getPosition();
 			positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
 		});

 		new ol.layer.Vector({
 			map: map,
 			source: new ol.source.Vector({ features: [accuracyFeature, positionFeature] })
 		});
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script type="text/javascript" src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
	<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	}
	#map:focus {
	outline: #4A74A8 solid 0.15em;
	}
	.overlay-label {
	text-decoration: none;
	color: white;
	font-size: 11pt;
	font-weight: bold;
	text-shadow: black 0.1em 0.1em 0.2em;
	}
	.popover-content {
	min-width: 250px;
	}
	</style>
	</head>
	<body>
	<div id="map" class="map">
	<div id="popup"></div>
	</div>
	<script type="text/javascript">
	var locations = [
	{ 'id': 1, 'color': 'amarillo', 'x': -63.1997168, 'y': -17.7677971, 'name': 'Sucursal 1', 'address': 'Avenida Noel Kempff Mercado 715, Santa Cruz de la Sierra' },
	{ 'id': 2, 'color': 'negro', 'x': -63.1991416, 'y': -17.7695694, 'name': 'Sucursal 2', 'address': 'Av. Ovidio Barbery Justiniano (radial 26), Santa Cruz de la Sierra' }
	];

	var features = [];

	$.each(locations, function(){
	var that = this;

	$('body').append($("<div id='overlay-"+that.id+"' />").addClass('overlay-label').html(that.name));

	var coordinates = new ol.geom.Point(ol.proj.transform([that.x, that.y], 'EPSG:4326', 'EPSG:3857'));
	var feature = new ol.Feature({
	id: 'addressfeature',
	geometry: coordinates,
	address: that.address,
	patito_color : that.color
	});

	feature.setStyle(
	new ol.style.Style({
	image: new ol.style.Icon({
	opacity: 1,
	scale: 1,
	src: 'marker.png'
	}),
	text: new ol.style.Text({
	font: '11px helvatica, sans-serif',
	fill: new ol.style.Fill({
	color: '#FAFAFA'
	})
	})
	})
	);

	features.push(feature);
	});

	var vectorSource = new ol.source.Vector({
	features: features
	});

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

	var view = new ol.View({
	center: [0, 0],
	zoom: 2
	});

	var map = new ol.Map({
	layers: [
	new ol.layer.Tile({
	source: new ol.source.OSM()
	}),
	vectorLayer
	],
	target: 'map',
	view: view
	});

	map.getView().fit(vectorSource.getExtent(), map.getSize());

	var popup = new ol.Overlay({
	element: document.getElementById('popup')
	});
	map.addOverlay(popup);

	$.each(locations, function(){
	var that = this;
	var overlay = new ol.Overlay({
	position: ol.proj.fromLonLat([that.x, that.y]),
	element: document.getElementById('overlay-' + that.id)
	});
	map.addOverlay(overlay);
	});

	map.on('click', function(evt){
	var feature = map.forEachFeatureAtPixel(evt.pixel,function(feature) {
	return feature;
	});

	var element = popup.getElement();
	$(element).popover('destroy');

	if (feature) {
	var coordinates = feature.getGeometry().getCoordinates();
	popup.setPosition(coordinates);

	$(element).popover({
	'placement': 'top',
	'animation': false,
	'html': true,
	'content': '<p>'+feature.get('address')+ ' patito color ' + feature.get('patito_color') + '</p>'
	});
	$(element).popover('show');
	}
	});

	var geolocation = new ol.Geolocation({
	projection: view.getProjection()
	});

	geolocation.setTracking(true);

	var accuracyFeature = new ol.Feature();
	geolocation.on('change:accuracyGeometry', function(){
	accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
	});

	var positionFeature = new ol.Feature();
	positionFeature.setStyle(new ol.style.Style({
	image: new ol.style.Circle({
	radius: 6,
	fill: new ol.style.Fill({
	color: '#3399CC'
	}),
	stroke: new ol.style.Stroke({
	color: '#fff',
	width: 2
	})
	})
	}));

	geolocation.on('change:position', function() {
	var coordinates = geolocation.getPosition();
	positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
	});

	new ol.layer.Vector({
	map: map,
	source: new ol.source.Vector({ features: [accuracyFeature, positionFeature] })
	});
	</script>
	</body>
	</html>