I am trying to show some markers from a database in openlayers. I tried it in google maps in past using GDownloadURL fuction to read a json php generated file from my database.
Now I tried the same with openlayers and I am not able to do that. I read about incompatibility between php and javascript but I think there have to be a way to do what I want.
My file jsonZona.php returns an array like this: {"markers":[{"lng":"-3.880102031707764","lat":"43.46711564169348","limpio":"1"}, {"lng":"-3.862788677215576","lat":"43.4669443349282","limpio":"1"}]}
limpio is an option to select one icon or other one. It can be 0 or 1.
My code is:
<!DOCTYPE HTML>
<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
body, #basicMap {
width: 828px;
height: 698px;
margin: 10px;
float: left;
}
html {
font-size: 10px;
bottom: 10px;
right: 10px;
}
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script>
var map;
var markers;
function ejecutar(){
init();
//loadMarkers();
}
function init()
{
map = new OpenLayers.Map ("basicMap", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
// Define the map layer
// Here we use a predefined layer that will be kept up to date with URL changes
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("MapaCiudad");
map.addLayer(layerMapnik);
var lonLat = new OpenLayers.LonLat(-3.8343143463134766,43.451610413300685).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
//map.setCenter(new OpenLayers.LonLat(-3.862788677215576, 43.4669443349282) // Center of the map
map.zoomTo(13);
map.setCenter(lonLat, 19);
//loadMarkers();
//Añadimos aqui la capa de los marcadores
markers = new OpenLayers.Layer.Markers("Marcadores");
map.addLayer(markers);
}
function loadMarkers(){
//vectorLayer = new OpenLayers.Layer.Vector("Overlay");
markers.clearMarkers();
var selectBox = document.getElementById('zona');
if (selectBox.value == "0") return;
jsonData = GDownloadUrl("jsonZona.php?zona=".selectBox.value); //pass zone to use in select on database
var jsonData = eval('(' + doc + ')');
alert(jsonData.markers[i].lat);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
for (var i=0; i<jsonData.markers.length; i++) {
var location = new OpenLayers.LonLat(jsonData.markers[i].lat, jsonData.markers[i].lng).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
if(jsonData.markers[i].limpio == 0)
var icon = new OpenLayers.Icon('redMarker.png',size,offset);
if(jsonData.markers[i].limpio == 1)
var icon = new OpenLayers.Icon('greenMarker.png',size,offset);
markers.addMarker(new OpenLayers.Marker(location,icon.clone()));
}
}
</script>
</head>
<body onload="ejecutar();">
<div id="basicMap" ></div>
<label>Zona: </label>
<select id="zona" onchange="loadMarkers();">
<option value="0">=== Selecciona una zona ===</option>
<option value="1">Zona 1</option>
<option value="2">Zona 2</option>
<option value="3">Zona 3</option>
<option value="4">Zona 4</option>
</select>
</body>
Do you have any idea about how I can do that?
Also, I want to refresh markers each X minutes. I think I can use setTimeOut function to do it but I don't know how I can apply it here.
I edit: I think I can't use GDownloadURL function because it is related to google maps. How can I execute php code in javascript to take data?
