NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum

Wie xml-Datei (Liste von verschiedenen Örtlichkeiten) per JavaScript in einer OSM-Webkarte anzeigen?

0

Moin,

wie muss man vorgehen,um eine xml-Datei(Liste von verschiedenen Örtlichkeiten) in einer Openstreetmap-Karte angezeigt zu bekommen?

Beispiel für eine Gestaltung einer Grundkarte in einer Html mittels CSS und Javascript ist hier: http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden

Aber wie muss ich dann weiter gehen?

Gruß

Thal

asked 22 Aug '12, 21:20

thal1982's gravatar image

thal1982
11●1●1●2
accept rate: 0%

edited 26 Jul '13, 00:00

aseerel4c26's gravatar image

aseerel4c26 ♦
32.6k●18●248●554

1

As far as I understand, the question is about displaying data stored in xml on OSM map.

Do you know if a parser still exist for your XML format? What is the structure of your format.

The example given use Openlayers, but Leaflet can also be used if it is easier for your data.

(22 Aug '12, 21:38) NicolasDumoulin

Moin,

bislang bin ich kein Schritt weiter gekommen.

in welcher Zeile muss ich den Code einfügen?

Folgende Dateien sind vorhanden:

function jumpTo(lon, lat, zoom) {
    var x = Lon2Merc(lon);
    var y = Lat2Merc(lat);
    map.setCenter(new OpenLayers.LonLat(x, y), zoom);
    return false;
}

function Lon2Merc(lon) {
    return 20037508.34 * lon / 180;
}

function Lat2Merc(lat) {
    var PI = 3.14159265358979323846;
    lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
    return 20037508.34 * lat / 180;
}

function addMarker(layer, lon, lat, popupContentHTML) {

    var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
    var feature = new OpenLayers.Feature(layer, ll); 
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(300, 180) } );
    feature.data.popupContentHTML = popupContentHTML;
    feature.data.overflow = "hidden";

    var marker = new OpenLayers.Marker(ll);
    marker.feature = feature;

    var markerClick = function(evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);

    layer.addMarker(marker);
    map.addPopup(feature.createPopup(feature.closeBox));
}

function getCycleTileURL(bounds) {
   var res = this.map.getResolution();
   var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
   var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
   var z = this.map.getZoom();
   var limit = Math.pow(2, z);

   if (y < 0 || y >= limit)
   {
     return null;
   }
   else
   {
     x = ((x % limit) + limit) % limit;

     return this.url + z + "/" + x + "/" + y + "." + this.type;
   }
}

Dies ist die tom.js(-Datei).

Und dies ist die Index.html(-Datei):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de-de">
<head>
<title>Map | Testanwendung</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="de" />
<meta name="author" content="Thomas Heiles" />
<link rel="stylesheet" type="text/css" href="map.css"></link>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_map.css"></link>
<![endif]-->
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript" src="tom.js"></script>

<script type="text/javascript">
//<![CDATA[

var map;
var layer_mapnik;
var layer_tah;
var layer_markers;

function drawmap() {
    // Popup und Popuptext mit evtl. Grafik
    var popuptext="<font color=\"black\"><b>Thomas Heiles<br>Stra&szlig;e 123<br>54290 Trier</b><p><img src=\"test.jpg\" width=\"180\" height=\"113\"></p></font>";

    OpenLayers.Lang.setCode('de');

    // Position und Zoomstufe der Karte
    var lon = 6.641389;
    var lat = 49.756667;
    var zoom = 7;

    map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.PanZoomBar()],
        maxExtent:
            new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                    20037508.34, 20037508.34),
        numZoomLevels: 18,
        maxResolution: 156543,
        units: 'meters'
    });

    layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    layer_markers = new OpenLayers.Layer.Markers("adress", { projection: new OpenLayers.Projection("EPSG:4326"), 
                                                  visibility: true, displayInLayerSwitcher: false });

    map.addLayers([layer_mapnik, layer_markers]);
    jumpTo(lon, lat, zoom);

    // Position des Markers
    addMarker(layer_markers, 6.641389, 49.756667, popuptext);

}

//]]>
    </script>

  </head>
  <body onload="drawmap();">

  <div id="header">
   <div id="content">Karte (Testversion)</div>
   <div id="osm">© <a href="http://www.openstreetmap.org">OpenStreetMap</a>
     und <a href="http://www.openstreetmap.org/copyright">Mitwirkende</a>,
     <a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de">CC-BY-SA</a>
   </div>
  </div>
  <div id="map">
  </div>

</body>
</html>

In welcher Datei muss man dann den xml-Link zur Datei hinzufügen. Natürlich sollen mittels der XML-Datei die Marker aus dem Code heraus ausgelagert werden.

Dieser oben genannte Code stammt von hier: http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden

Ich hoffe ich habe dabei nichts übersehen,wie man zu einer Lösung kommt.

Gruß

Thal

(25 Aug '12, 07:14) thal1982

Hey thal, dein Openlayers-Ploblem scheint alles andere als eine FAQ zu sein.

Ich halte es daher für besser und aussichtsreicher, wenn du die Fragestellung im deutschen Unterforum auf http://forum.osm.org nochmal stellst. Da lesen wohl mehr OL-Experten mit.

(25 Aug '12, 08:56) stephan75
One Answer:
active answersoldest answersnewest answerspopular answers
1

Some hints are listed at the website of OpenLayers.org ... they have a collection of examples there.

About the Leaflet framework, have a look at their website.

permanent link

answered 23 Aug '12, 09:39

stephan75's gravatar image

stephan75
12.6k●5●56●210
accept rate: 6%

edited 23 Aug '12, 09:39

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

learn more about Markdown

Question tags:

×286
×122
×1
×1

question asked: 22 Aug '12, 21:20

question was seen: 10,494 times

last updated: 26 Jul '13, 00:00

Related questions

Popup-Größe von openlayers verändern

Is it easy to extract the shape of country across API?

[closed] Garmin AIO german-daily nicht mehr aktualisiert bzw kleiner und lückenhaft

How do I change language of a map?

Meer blau färben (Garmin)

Karte mit zum Beispiel eingeblendetem Wanderweg drucken?

Pending, approved status and OSM data in an openLayer?

other Projection in OpenLayers

Wie bekomme ich OpenStreetMap auf mein Garmin Dakota 20?

how to combine marker and popup?

NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum