Replaced the overlay (marker) with a feature.

This commit is contained in:
George Kaklamanos 2016-02-20 13:50:34 +02:00
parent fcbbd99b47
commit 6c4b29c37f

View file

@ -4,14 +4,39 @@
<?php
function ShowMap($lat,$lon){
?>
<div style="display:none;"><div id="marker" style="width:10px;height:10px;border-radius:50%;background-color:#ff0000;opacity:0.6;"></div></div>
<div id="mymap" style="width:300px;height:300px;overflow:hidden;"></div>
<script>
var pos = new ol.proj.fromLonLat(['<?=$lon?>', '<?=$lat?>']);
var map = new ol.Map({target:"mymap"});
map.setView(new ol.View({center: pos, zoom: 13}));
map.addLayer(new ol.layer.Tile({source: new ol.source.OSM()}));
map.addOverlay(new ol.Overlay({position: pos, element: document.getElementById("marker")}));
var pos = new ol.proj.fromLonLat([<?=$lon?>, <?=$lat?>]);
var style = 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
})
});
var feat = new ol.Feature({
geometry: new ol.geom.Point(pos)
});
feat.setStyle(style);
var vectorSource = new ol.source.Vector({features:[feat]});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
opacity: 0.5
});
var map = new ol.Map({
target: document.getElementById("mymap"),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: pos,
zoom:13
})
});
</script>
<?php
}