Ajouter des marqueurs d'un db SQL à OSM

Question

Je suis nouveau sur OpenStreetMap et j'ai navigué sur le wiki et le net et je n'arrive pas à trouver un tutoriel mais j'ai vu des exemples sur le net.

Fondamentalement, je veux générer mon propre OpenStreetmap et tracer des marqueurs prenant la latitude et la longitude à partir d'une base de données MySQL et les complotant sur ma carte. Lorsque l'utilisateur clique sur une marque, j'aimerais avoir une fenêtre contextuelle. Fondamentalement, je veux ce http://code.google.com/apis/maps/articles/phpsqlajax.html mais pour OpenStreetMap et non Google-cartes.

Answer 1

On dirait qu'ils utilisent openLayer pour le rendu de la carte. Voici quelques exemples et api docs.

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

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

Answer 2

Pour ce faire, vous devez déterminer le javascript pour la présentation des marqueurs sur une interface "carte slippy". OpenLayers est le nom d'une librairie javascript populaire.

C'est gratuit et open source. Il est utilisé pour afficher une carte glissante sur la page d'accueil OpenStreetMap.org, et divers autres sites sur le Web. Il est souvent confondu avec OpenStreetMap lui-même, ou les gens ont l'impression erronée que vous devez utiliser OpenLayers si vous voulez intégrer des cartes OpenStreetMap sur votre site. Pas vrai. Il y a lots of alternative javascript libraries for displaying a slippy map

... y compris l'API google maps! Vous pouvez configurer un affichage google maps, mais afficher des images "carreaux" OpenStreetMap au lieu de google tiles. Voir Google Maps Example. Cela a l'avantage de la compatibilité du code, ce qui signifie que vous pouvez suivre le didacticiel de Google Maps que vous avez lié ici, mais ensuite déposer un peu de code effronté pour spécifier OpenStreetMap comme couche de tuiles. Ceci a l'inconvénient de montrer un gros logo google maléfique, et d'exiger une clé google maps API encore plus mauvaise, donc tous les enfants cool utilisent OpenLayers.

Il y a various examples of using OpenLayers on the OpenStreetMap wiki. L'exemple "OpenLayers Dynamic POI" montre l'utilisation de la base de données pour les marqueurs (bien que cet exemple soit un peu compliqué). Another popups example on my site

espoir qui aide

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 

meilleures salutations! J'espère que cela aidera quelqu'un qui a besoin de cela pour travailler ...