GeoJSON en OpenLayers
GeoJSON en OpenLayers

Sigo jugando con OpenLayers, y tenia varios marcadores en una base de datos (MySQL). La idea es mostrar todos los marcadores de la base de datos, y la manera sencilla de hacer es mediante GEOJSON. En el lado del servidor creamos un GEOJSON y en el cliente lo consumimos.

La parte importante del PHP:
foreach($v_marcadores as $p_marcador) {
    $v_marcador = array(
        'type' => 'Feature',
        'geometry' => array(
            'type' => 'Point',
            'coordinates' => array($p_marcador->marcador_longitud, $p_marcador->marcador_latitud)
        ),
        'properties' => array(
            'name' => $p_marcador->marcador_nombre
        )
);
array_push($v_geojson['features'], $v_marcador);

};
header("Content-Type:application/json", true);
echo json_encode($v_geojson);

OBS:

  • $marcadores: es el array de todos los marcadores que se saco de la base de datos (MySQL).

En el lado del cliente (JavaScipt):
var v_geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
    styleMap: new OpenLayers.StyleMap({
        "default": new OpenLayers.Style({
            pointRadius: 5,
            fillColor: "#ffcc66",
            fillOpacity: 0.8,
            strokeColor: "#cc6633",
            strokeWidth: 2,
            strokeOpacity: 0.8
        }),
        "select": {
            fillColor: "#8aeeef",
            strokeColor: "#32a8a9",
            labelYOffset: 13,
            label: "${name}"
        } //Text entspricht feature.attributes.name
    }),
    projection: new OpenLayers.Projection("EPSG:4326"),
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: "http://eventosinformaticos/mapas/index",
        format: new OpenLayers.Format.GeoJSON()
    })
});


// Agregar el layer OSM al mapa y el layer de los marcadores.
v_mapa.addLayers([v_layer_osm, v_geojson_layer]);

Con lo anterior ya podemos mostrar todos los marcadores que sacamos de la base de datos (MySQL) con el formato GeoJSON y lo mostramos en el mapa.

Comments

comments


Comments

  1. No me muestra los valores de cada punto cuando le doy un clic en el visor…
    indicame en que parte de tu codigo se puede hacer
    muchas gracias

Responder a Bruno Rodriguez Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *