OpenLayers Demo - 2.12 @mgifford

I forked this to be able to experiment with OpenLayers & jsFiddle. Needed to put ejecutar() into the js rather than just in the body. I'm not sure if the Zona's work or what they should do. Not working - With our OpenLayers.js

by Mike Gifford

HTML

<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="http://openconcept.ca/sites/openconcept.ca/files/OpenLayers.js"></script>
<h1 id="title">Accessible Example- 2.12 @mgifford</h1>
<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>
<div id="basicMap" ></div>

CSS

body, #basicMap {
      width: 100%;
      height: 400px;
 }
 html {
      font-size: 12px;
      bottom: 10px;
      right: 10px;
 }

JavaScript

(function($) {

    var map;
    var markers;

    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 ejecutar() {
        init();
        //loadMarkers();
    }

    function loadMarkers() {
        //vectorLayer = new OpenLayers.Layer.Vector('Overlay');
        markers.clearMarkers();

        var selectBox = document.getElementById('zona');
        if (selectBox.value == "0") {
            return;
        }

        var jsonData;
        jsonData = GDownloadUrl("jsonZona.php?zona=".selectBox.value); //pass zone to use in select on database
        jsonData = eval('(' + doc + ')');
        alert(jsonData.markers[i].lat);
        var size = new...