Support two colors of points rendered on the map.

This commit is contained in:
George Kaklamanos 2016-02-20 22:02:18 +02:00
parent e3eb7b30f0
commit 2bb92abf4b
6 changed files with 56 additions and 26 deletions

View file

@ -2,36 +2,64 @@
<script src="openlayers/ol.js"></script>
<?php
function ShowMap($coords){
if(count($coords)>0){
function ShowMap($coordsRed,$coordsGreen){
if(count($coordsRed)>0 || count($coordsGreen)>0){
?>
<div id="mymap" style="width:300px;height:300px;overflow:hidden;"></div>
<script>
var style = new ol.style.Style({
var pos = new ol.proj.fromLonLat([25.1329,35.3342]);
var features = [];
<?php
if(count($coordsRed)>0){
echo "var coordinatesRed = [";
for ($i=0; $i<count($coordsRed)-1;$i++){
$loc = $coordsRed[$i];
echo '['. $loc[1] . ',' . $loc[0] . '],';
}
echo '['. $coordsRed[$i][1] . ',' . $coordsRed[$i][0] . ']];';
?>
var styleRed = new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({color: '#FF0000'}),
stroke: new ol.style.Stroke({color: '#000000'}),
radius: 5
})
});
<?php
echo "var coordinates = [";
for ($i=0; $i<count($coords)-1;$i++){
$loc = $coords[$i];
echo '['. $loc[1] . ',' . $loc[0] . '],';
}
echo '['. $coords[$i][1] . ',' . $coords[$i][0] . ']];';
?>
var pos = new ol.proj.fromLonLat([coordinates[0][0],coordinates[0][1]]);
var features = [];
for(var i=0; i<coordinates.length; i++){
for(var i=0; i<coordinatesRed.length; i++){
var feat = new ol.Feature({
geometry: new ol.geom.Point(new ol.proj.fromLonLat([coordinates[i][0],coordinates[i][1]]))
geometry: new ol.geom.Point(new ol.proj.fromLonLat([coordinatesRed[i][0],coordinatesRed[i][1]]))
});
feat.setStyle(style);
feat.setStyle(styleRed);
features.push(feat);
}
<?php
}
if(count($coordsGreen)>0){
echo "var coordinatesGreen = [";
for ($i=0; $i<count($coordsGreen)-1;$i++){
$loc = $coordsGreen[$i];
echo '['. $loc[1] . ',' . $loc[0] . '],';
}
echo '['. $coordsGreen[$i][1] . ',' . $coordsGreen[$i][0] . ']];';
?>
var styleGreen = new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({color: '#00FF00'}),
stroke: new ol.style.Stroke({color: '#000000'}),
radius: 5
})
});
for(var i=0; i<coordinatesGreen.length; i++){
var feat = new ol.Feature({
geometry: new ol.geom.Point(new ol.proj.fromLonLat([coordinatesGreen[i][0],coordinatesGreen[i][1]]))
});
feat.setStyle(styleGreen);
features.push(feat);
}
<?php
}
?>
var vectorSource = new ol.source.Vector({features:features});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
@ -54,7 +82,7 @@ echo '['. $coords[$i][1] . ',' . $coords[$i][0] . ']];';
<?php
}else{
?>
<span style="display:inline-block" class="alert alert-danger" role="alert">No bus on its way yet. <a href="javascript:history.back()">Go back?</a></span>
<span style="display:inline-block" class="alert alert-danger" role="alert">No information to display on the map yet (probably no bus is on its way). <a href="javascript:history.back()">Go back?</a></span>
<?php
}