Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 15. März 2021 11:27

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

[GELÖST] OpenStreetMap in eigene Website einbinden

Hallo,

ich möchte einen Ausschnitt aus einer OSM-Karte in einen Content-Block auf meiner Website einbinden. Dazu habe ich brav die Installationsanleitung des OpenStreetMap-Wiki durchgelesen und, wie im Folgenden beschrieben, umgesetzt.
Im Template habe ich stehen:

[== html ==]
<link rel="stylesheet" type="text/css" href="<link rel="stylesheet" type="text/css" href="{uploads_url}/OpenStreetMap/map.css"></link>
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="{uploads_url}/OpenStreetMap/ie_map.css"></link>
<![endif]-->


<script type="text/javascript" src="https://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="https://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript" src="{uploads_url}/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>Friseursalon Schnitt-Raum<br />G&ouml;kerstra&szlig;e 107<br />26384 Wilhelmshaven</b></font>";

        OpenLayers.Lang.setCode('de');

        // Position und Zoomstufe der Karte
        var lon = 8.126152;
        var lat = 53.533447;
        var zoom = 13;

        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("Address", { 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, 8.126152, 53.533447, popuptext);
    }
    //]]>
</script>
</head>

<body id='boxed' class='container page-wrapper page-{$page_alias} page-{$content_id}' onload="drawmap();">

Habe die Dateien "map.css"

[== css ==]
#header {
   font-family: Verdana, Arial;
   font-size: 1em;
   overflow: hidden;
   color: #ffffff;
}

#map {
   height: 86%;
   width: 96%;
   padding: 0;
   margin: 0;
}

#content {
   font-size: 1em;
}

#osm {
   font-size: 0.7em;
   font-style: italic;
   margin-bottom: 20px;
}

bzw. "ie_map.css"

[== css ==]
#header {
   font-family: Verdana, Arial;
   font-size: 1em;
   overflow: hidden;
   color: #ffffff;
}

p {
   margin-bottom: 20px;
}

#map {
   height: 81%;
   width: 96%;
   padding: 0;
   margin: 0;
}

#content {
   font-size: 1em;
}

#osm {
   font-size: 0.7em;
   font-style: italic;
   margin-bottom: 20px;
}

sowie die Datei "tom.js" in das entsprechende Verzeichnis hochgeladen.

Im Template habe ich dann wiederum an der Stelle, an der ich den Content-Block habe, folgenden Code eingefügt (oder muss ich ihn in den Content-Block einfügen ?):

[== html ==]
<div id="header">
    <div id="content">Karte</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>
<div id="map">
</div>

Aber irgendetwas stimmt da noch nicht. Bei mir wird keine Karte angezeigt. Muss bei CMS/ms noch etwas anderes berücksichtigt werden ?

Beitrag geändert von Dancer62 (15. März 2021 17:34)


Man ist so alt, wie man sich fühlt...

Offline

#2 17. März 2021 15:56

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 414

Re: [GELÖST] OpenStreetMap in eigene Website einbinden

Ok, nach tatkräftiger Unterstützung durch Janl (an dieser Stelle noch einmal meinen herzlichsten Dank dafür) hier jetzt zusammengefasst noch einmal die (deutlich einfachere) Lösung.

Falls noch nicht geschehen, das Modul "Snippet" (Schnipsel) herunterladen und installieren. Einen "Neuen Schnipsel hinzufügen", benennen (z.B. osm) und folgenden Code einfügen:

[== html ==]
<div id='mymap' style='width:95%;height:600px;'></div>
    <script>
       // initialize Leaflet
       var mymap = L.map('mymap').setView({lon: 14.481291, lat: 48.5573662}, 15);

       // add the OpenStreetMap tiles
       L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 19,

                attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, ' +
 			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
 			'Imagery © <a href="https://mapbox.com">Mapbox</a>',
 		id: 'mapbox.streets'
          }).addTo(mymap);

        // show the scale bar on the lower left corner
        L.control.scale().addTo(mymap);

        // show a marker on the map
        L.marker({lon: 14.481291, lat: 48.5573662}).bindPopup('<b>Dein Standort<br />Beispiel Straße 99<br />00000 Musterstadt</b>').addTo(mymap).openPopup();

    </script>

Der einzufügende Standort kann am besten auf der Webseite "Koordinaten-Umrechner.de" ermittelt werden. Dazu auf der Karte den gewünschten Standort heraussuchen (oder die entsprechende Adresse eingeben) und die Werte für Lat bzw. Lon im Feld "Dezimalgrad (WGS84)" aufschreiben und in obigen Code an den Stellen

var mymap = L.map('mymap').setView({lon: 14.481291, lat: 48.5573662}, 15);

bzw.

L.marker({lon: 14.481291, lat: 48.5573662}).bindPopup('<b>Dein Standort<br />Beispiel Straße 99<br />00000 Musterstadt</b>').addTo(mymap).openPopup();

einfügen. Der Wert "15" stellt den Zoomfaktor dar, mit der die Karte beim Aufruf dargestellt wird und kann nach eigenem Belieben geändert werden.

Auf der Download-Seite von Leaflet.js die aktuellste "stable version" herunterladen, entpacken und in ein Verzeichnis Deiner Wahl auf Deinem Server hochladen.

Dann im Template im <head>-Bereich Folgendes eintragen:

[== html ==]
   <!-- nachfolgender Code ist fuer OpenStreetMap ************** -->
      <link rel="stylesheet" href="Verzeichnis/zu/leaflet.css"/>
   <!-- Sicherstellen, dass dieser Aufruf erst NACH Leaflet's CSS erfolgt -->
      <script src="Verzeichnis/zu/leaflet.js"></script>
   <!-- Ende des Code fuer OSM  ************************ -->

</head>

<body onload="drawmap();">
...

Dabei die Verzeichnisse zu leaflet.css bzw. leaflet.js entsprechend der oben gemachten Auswahl ändern.

Als Letztes im gewünschten Content-Block durch Aufruf von

die OpenStreetMap auf wundersame Weise erscheinen lassen.

Beitrag geändert von Dancer62 (17. März 2021 16:01)


Man ist so alt, wie man sich fühlt...

Offline