Reading latitude/longitude from DB and putting markers on the map

Question

Below is given my sample code. In index.php I define jquery tabs. One of the tabs should open a map (openlayers) and put markers on this map. Latitude and longitude of each marker is taken from MySQL DB. The problem is that I don't know how and where to execute the function put_marker reading data from DB. I know it should be a basic question.

index.php

    <script type="text/javascript">
              $(document).ready(function() {
                    $("#tabs").tabs({
                    ajaxOptions: {
                        success: function( html ) {
                            $("#content").html(html);
                            page_init();
                        }
                    }
                });
              });
</script>
    <div id="tabs">
        <ul>
            <li><a href="administration.php"><span>Administration</span></a></li>
            <li><a href="map.php"><span>Map</span></a></li>
        </ul>
    </div>

map.php

    <?php
        include_once 'include/DatabaseConnector.php';
        $query4="SELECT r.resLatitude, r.resLongitude FROM resources r;";
        $result4=DatabaseConnector::ExecuteQueryArray($query4);

        foreach ($result4 as $row):
// HERE I HAVE A PROBLEM
            //putMarker($row['resLatitude'],$row['resLongitude']);      
        endforeach;
    ?>
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script type="text/javascript">
            var map, layer;

            function page_init(){
                map = new OpenLayers.Map("basicMap");
                var mapnik         = new OpenLayers.Layer.OSM();
                var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
                var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
                var position       = new OpenLayers.LonLat(2.07833,41.2969).transform( fromProjection, toProjection);
                var zoom           = 15; 
                map.addLayer(mapnik);
                map.setCenter(position, zoom );
            }

            function putMarker(latMarca, lonMarca)
            {
                var lonLat = new OpenLayers.LonLat(lonMarca ,latMarca ).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
                var zoom=16;
                var markers = new OpenLayers.Layer.Markers( "Markers" );
                map.addLayer(markers);
                markers.addMarker(new OpenLayers.Marker(lonLat));
                map.setCenter (lonLat, zoom);
            }
        </script>
        <div id="basicMap" style="width: 100%; height: 100%;">

        </div>

U should put array from DB to a JSON and pass it as parameter to putMarker function and loop thru it inside function, and call putMarker with onload event — kskaradzinski
– kskaradzinski, Commented May 22, 2012 at 12:09

BasTaller · Accepted Answer · 2012-05-22 12:46:52Z

1

Well, you're getting your markers in PHP on the server side. And you're passing them to Javascript on the client side. Two different places.

Actually, there's no need even in JSON manipulations in the simplest case. In your map.php you can do:

    ..
    echo '<script type="text/javascript">';
    echo '$(document).ready(function() {';
    foreach ($result4 as $row){
        echo 'putMarker('.$row['resLatitude'].','.$row['resLongitude'].');';      
    }
    echo '});';
    echo '</script>';
    ...

These code would be interpreted on the client side as pure JS, but with values being taken from the PHP.

By the way, it's not a good approach to write your code the same way. Look toward MVC frameworks, where the code and look are separated from each other.

edited May 22, 2012 at 12:46

answered May 22, 2012 at 12:22

BasTaller

80610 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reading latitude/longitude from DB and putting markers on the map

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related