[GIS] Markers on openlayers openstreetmap

javascriptopenlayers-2openstreetmapPHP

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?

Best Answer

You make mistake in loadMarkers function:

 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);

After that icon variable is undefined. You should explode this variable before if statement

var icon;
if(jsonData.markers[i].limpio == 0)
     icon = new OpenLayers.Icon('redMarker.png',size,offset);   
else
     icon = new OpenLayers.Icon('greenMarker.png',size,offset);

Probably this is why you can't display your markers. For refreshing markers better is setInterval function than setTimeout. This is sample: setInterval

edit:

In jQuery library you can call:

$.ajax({
  url: "jsonZona.php?zona=".selectBox.value
}).done(function() { 
  // Function to create markers, same as before
});
Related Question