Adding markers from a SQL db to OSM

Question

I'm new to OpenStreetMap and I've been browsing the wiki and the net and I can't seem to find a tutorial anywhere but I've seen examples on the net.

Basically I want to generate my own OpenStreetmap and plot markers taking the latitude and longitude from a MySQL database and plotting them on my map. When the user clicks on a mark I'd like to have a popup. Basically I want this http://code.google.com/apis/maps/articles/phpsqlajax.html but for OpenStreetMap and not Google-maps.

Answer 1

Looks like they are using openLayer for map rendering. Here are some examples and api docs.

http://openlayers.org/dev/examples/

http://trac.osgeo.org/openlayers/wiki/Documentation

Answer 2

To accomplish this, you need to figure out the javascript for presenting markers on a "slippy map" interface.

OpenLayers is the name of a popular javascript library. It's free and open source. It's used to display a slippy map on the OpenStreetMap.org homepage, and various other sites around the web. It's often confused with OpenStreetMap itself, or people mistakenly get the impression that you must use OpenLayers if you want to embed OpenStreetMap maps on your site. Not true. There's lots of alternative javascript libraries for displaying a slippy map

...including the google maps API! You can set up a google maps display, but show OpenStreetMap "tile" images instead of google tiles. See Google Maps Example. This has the advantage of code compatibility, meaning you could follow through google maps tutorial you've linked there, but then drop in a cheeky bit of code to specify OpenStreetMap as the tile layer.

This has the disadvantage of showing an big evil google logo, and requiring an even more evil google maps API key, so all the cool kids are using OpenLayers.

There's various examples of using OpenLayers on the OpenStreetMap wiki. The "OpenLayers Dynamic POI" example shows the use of database for markers (although that example is a bit convoluted). Another popups example on my site

Hope that helps

Answer 3

// Sample code by August Li
// Modified by Tom Moore to work with SQL
var zoom, center, currentPopup, map, lyrMarkers;
var popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
    "autoSize": true,
    "minSize": new OpenLayers.Size(300, 50),
    "maxSize": new OpenLayers.Size(500, 300),
    "keepInMap": true
});
var bounds = new OpenLayers.Bounds();
var lat=36.287179515680556;
var lon=-96.69170379638672;
var zoom=11;
var lonLat = new OpenLayers.LonLat(lon, lat).transform(
                 new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

// begin addMarker function
// info1 I was going to use to add a tooltip. Haven't figured out
// how to do that in OpenLayers yet :( Someone who knows share that with us
// iconurl is the url to the png file that you want to use for the icon.
// you MUST call addMarker at least once to initialize the map
function addMarker(lat, lng, info, info1, iconurl) {
    // First check to see if the map has been initialized. If not, do that now ...
    if (map == null) {
        var options = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326"),
            units: "m",
            numZoomLevels: 19,
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
        };
        map = new OpenLayers.Map("map", options);
        map.addControl(new OpenLayers.Control.PanZoomBar());
        var lyrOsm = new OpenLayers.Layer.OSM();
        map.addLayer(lyrOsm);
        lyrMarkers = new OpenLayers.Layer.Markers("Markers");
        map.addLayer(lyrMarkers);

        //add marker on given coordinates
        map.setCenter(lonLat, zoom);
        zoom = map.getZoom();
    }

    var iconSize = new OpenLayers.Size(36, 36);
    var iconOffset = new OpenLayers.Pixel(-(iconSize.w / 2), -iconSize.h);
    var icon = new OpenLayers.Icon(iconurl, iconSize, iconOffset);
    var pt = new OpenLayers.LonLat(lng, lat).transform(
                 new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    bounds.extend(pt);
    var feature = new OpenLayers.Feature(lyrMarkers, pt);
    feature.closeBox = true;
    feature.popupClass = popupClass;
    feature.data.popupContentHTML = info;
    feature.data.overflow = "auto";
    var marker = new OpenLayers.Marker(pt, icon.clone());
    var markerClick = function(evt) {
        if (currentPopup != null && currentPopup.visible()) {
            currentPopup.hide();
        }
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        currentPopup = this.popup;
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);
    lyrMarkers.addMarker(marker);
}
// end addMarker function

Best regards! I hope this helps someone who needs this to work...