Buenas estoy trabajando en javascript mas especificamente con la Api de OpenLayers en busca de hacer un mapa con paradas de colectivos (bus) las cuales tomo de una base de datos mysql. Hasta el momento hago que me traiga las paradas segun la empresa y al darle clic sobre el circulo me muestra el nombre de la parada (eso lo hago con otro metodo select), pero en esos lugares me aparecen círculos de color verde, pero lo que quiero es que en esos lugares me aparezcan iconos.
El recorrido de la base de datos lo hago con un for. A continuacion les muestro mi codigo para ver si me pueden ayudar a cambiar los circulos verdes por iconos ya que soy bastante nuevo en javascript y mas aun con openlayers. Desde ya muchas gracias
var latitud = <?php echo $lati;?>; // lo uso para traer la latitud desde el telefono movil
var longitud = <?php echo $longi;?>; // lo uso para traer la longitud desde el telefono movil
var coord= "<?php echo $coord;?>";
var coord_arr=coord.split('*');
var iconoParada = new Array(coord_arr.legth); ///tomo la cantidada de paradas que tiene esa empresa en la base de datos
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
wrapX: false
})
})
],
controls: ol.control.defaults({
zoom: false,
attributionOptions: {
collapsible: false
}
}),
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[longitud, latitud], 'EPSG:4326', 'EPSG:3857'),
zoom: 16,
minZoom: 6,
maxZoom: 18,
atribution: false
})
});
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(0, 0, 0, 1)'
}),
stroke: new ol.style.Stroke({
color: '#FD0202',
width: 14
}),
image: new ol.style.Circle({
radius: 20, //tamaño del circulo
fill: new ol.style.Fill({
color: '#24FD02' //color del circulo parada
})
})
})
});
map.addLayer(vector);
for (var i=0;i<coord_arr.length;i++){
var data=coord_arr[i].split(',');
var nombre_parada= data[0]; //toma el nombre de la parada
var longi_parada= parseFloat(data[1]); //toma la longitud de la parada **** viene en este formato '-33.1333' *****
var lati_parada= parseFloat(data[2]); //toma la latitud
var iconoParada = new ol.Feature({
'geometry': new ol.geom.Point(ol.proj.transform(
[longi_parada,lati_parada], 'EPSG:4326', 'EPSG:3857')),
'name': nombre_parada
});
source.addFeature(iconoParada);
var seleccionarParada = new ol.interaction.Select(); /// selecciono la parada la cual quiero conocer su nombre
map.addInteraction(seleccionarParada);
seleccionarParada.on('select', function(e){
var div = document.getElementById('seleccionarParada');
var seleccionados = e.target.getFeatures();
var html ='';
seleccionados.forEach(function(t){
html += '<b><font color="red">Parada:</font> </b>'+ t.get('name'); //imprimo el nombre de la parada en una caja de texto
html +='<hr/>';
//alert(t.get('name'));
});
div.innerHTML = html;
});
}
html, body, #map {height:100%;width:100%;margin:0;padding:0;position: relative;}
#estilo1{color:#FFF;background:#FFF;margin-top:10px}
</style>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>