OpenLayers.js lokal ablegen?

SCINET · 2022-04-28 11:47:21

Ihr Lieben,
erst einmal ein herzliches Hallo in die Runde - ich bin neu hier und versuche mich gerade an einer ersten Map, die schon ganz gut funktioniert.

Nun habe ich jedoch die Frage, ob ich die eingebundene OpenLayers.js auch lokal ablegen kann?

Ich habe das gerade getestet, mir die OpenLayers.js heruntergeladen und eingebunden und damit funktioniert die Karte zwar noch, macht aber die gewünschten Marker ohne Bild (vermutlich CSS), jedoch auch die richtige Positionierung etc. nicht mehr.

Ich habe also konkret die Frage:

Ist es möglich, die .js lokal abzulegen und wenn ja, welche Elemente braucht es dann zusätzlich zu der ObenLayers.js dafür?

Hier ist mein derzeitiger Code (PHP)

<?php
// Lat und Lon für die erste Geolocation setzen, später werden die geliefert
$geocode_lat="51.395909979619404";
$geocode_lon="9.754527694103915";

// Testweise hinterlegte Lat und Lon für die zweite Geolocation setzen, später werden die geliefert
$kd_geocode_lat="41.8933203";
$kd_geocode_lon="12.4829321";

// Wir berechnen das Zentrum der Karte
$center_lat=($geocode_lat + $kd_geocode_lat)/2;
$center_lon=($geocode_lon + $kd_geocode_lon)/2;
?>
<html>
  <head>
  <style>
  .olmap { height:100%; width:100%;}
  </style>
  </head>	
  <body>
  <div id="mapdiv"></div>
  <script type="text/javascript" src="https://www.openlayers.org/api/OpenLayers.js"></script>

  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLatCenter = new OpenLayers.LonLat( <?php Echo $center_lon; ?> ,<?php Echo $center_lat; ?> )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // Transformation aus dem Koordinatensystem WGS 1984
            map.getProjectionObject() // in das Koordinatensystem 'Spherical Mercator Projection'
          );
    var lonLatBase = new OpenLayers.LonLat( <?php Echo $geocode_lon; ?> ,<?php Echo $geocode_lat; ?> )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // Transformation aus dem Koordinatensystem WGS 1984
            map.getProjectionObject() // in das Koordinatensystem 'Spherical Mercator Projection'
          );    
    var lonLatKd = new OpenLayers.LonLat( <?php Echo $kd_geocode_lon; ?> ,<?php Echo $kd_geocode_lat; ?> )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // Transformation aus dem Koordinatensystem WGS 1984
            map.getProjectionObject() // in das Koordinatensystem 'Spherical Mercator Projection'
          );  
	
    var zoom=8;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(lonLatBase));
	
	markers.addMarker(new OpenLayers.Marker(lonLatKd));
	var newBound = markers.getDataExtent();
	map.zoomToExtent(newBound);


  </script>
</body></html>

Vielen herzlichen Dank für jeden Hinweis

mit besten Grüßen
Rainer Strebel

dieterdreist · 2022-04-28 12:24:58

ob lokal oder remote ist egal, wahrscheinlich gibt es noch eine ol.css und die hast du vergessen einzubinden

maxbe · 2022-04-28 12:51:28

Zu OpenLayers gehört nicht nur die openlayers.js und das css, sondern auch ein Verzeichnis mit den Icons: https://openlayers.org/api/2.13.1/img/marker.png z.B. ist der rote Marker.

Da gefühlt seit 5 Jahren hier keiner mehr Fragen zu OL kamen, wäre für einen Neueinstieg ein Blick auf https://leafletjs.com/ empfehlenswert. Leaflet scheint beliebter zu sein und hat inzwischen eine breitere Basis an Leuten, die man fragen kann, glaube ich.

Grüße und willkommen hier,
Max

SCINET · 2022-04-28 12:51:43

Vielen Dank für deine Antwort. Nee - eigentlich nicht, es ist wie im Quelltext gezeigt. Du kannst es ggf. selbst probieren,
den Code in eine PHP Datei mit der einen Einbindung ergibt eine andere Ansicht als die mit der unteren Einbindung.

Hier sind die beiden Varianten:

<! --<script type="text/javascript" src="../../js/OpenLayers.js"></script>-->
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>

Nehme ich die obere, dann fehlt die Positionierung und der richtige Zoomfaktor - nehme ich die untere, passt es. CSS gibt es nur
im Quelltext (siehe Code)

Wird ggf. wenn ich von openlayers.org komme, dort standardmäßig eine CSS geladen, die ich mir holen sollte?
Mit besten Grüßen
Rainer

dieterdreist · 2022-04-28 13:28:03

genau, das script lädt oder generiert den Stil, wohl auch abhängig vom Browser, einfach hier nach css suchen
https://openlayers.org/api/2.13.1/OpenLayers.js

was du da einbindest ist uralt, ol2, mittlerweile sind die bei 6.
Ich würde hier ein Tutorial suchen und es so machen wie sie aktuell vorschlagen:

https://openlayers.org/

SCINET · 2022-04-28 15:59:47

Lieber Dieter,
oh je, da habe ich mich wohl von einem ganz alten Beispiel leiten lassen. Ok - ich hole mir nun die aktuellen Dinge und wühle mich durch die aktuellen Beispiele. Darf ich dir noch eine Frage stellen? Auf dieser Seite hier wird eine simple Map erstellt.

https://openlayers.org/en/latest/examples/simple.html

Kopiere ich den Quelltext in meine Seite, funktioniert es nicht, weil vermutlich

import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';

je Zeile bedeutet, irgendetwas einzubinden, richtig? Die CSS hätte ich ja schon mal, was bedeuten die anderen Zeilen? (Vermutlich beisst du gerade in die Tischkante, aber ich kenne halt die Zusammenhänge noch nicht)

Herzliche Grüße
Rainer

dieterdreist · 2022-04-28 16:20:10

das ist ein Beispiel mit node.js Modulen, hier steht wie es damit geht: https://openlayers.org/en/latest/doc/tu … undle.html

ich würde als Anfänger das hier durchgehen, da muss man nichts weiter installieren und es ist weniger komplex es einzusetzen:
https://openlayers.org/en/latest/doc/quickstart.html

rainerU · 2022-04-29 06:02:40

SCINET wrote:

import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';

Die aktuelle Version von Openlayers ist für den Einsatz von modernen Javascript-Entwicklungsumgebungen und -werkzeugen wie Node.js, Npm, Parcel oder Vite ausgelegt. Dabei wird die eigene JS-Anwendung mit den benötigten Teilen von OL und anderen Bibliotheken zu einer kompakten JS-Datei zusammengepackt. Die meisten aktuellen Beispiele auf openlayers.org und anderswo sind für diese Technik ausgelegt. Man erkennt das an den Import-Anweisung mit "from ol/...".

Neben vielen anderen Vorteilen dieser Technik ist die erzeugte JS-Datei um einiges kleiner als die komplette ol.js und man spart sich so Bandbreite beim Aufruf der Seiten. Für einfache Anwendungen ist dieses Bundling aus meiner Sicht aber viel zu aufwändig und für weniger mit SW-Entwicklungstechnik vertraute Personen auch schwer beherrschbar.

Man kann aber nach wie vor mit der klassischen Methode arbeiten, d.h. zur Laufzeit die komplette ol.js, seine eigenen JS-Skripts und ggf. weitere Bibliotheken z.B. per <link> einbinden, wie es hier auf openlayers.org beschrieben ist.

Announcement

#1 2022-04-28 11:47:21

OpenLayers.js lokal ablegen?

#2 2022-04-28 12:24:58

Re: OpenLayers.js lokal ablegen?

#3 2022-04-28 12:51:28

Re: OpenLayers.js lokal ablegen?

#4 2022-04-28 12:51:43

Re: OpenLayers.js lokal ablegen?

#5 2022-04-28 13:28:03

Re: OpenLayers.js lokal ablegen?

#6 2022-04-28 15:59:47

Re: OpenLayers.js lokal ablegen?

#7 2022-04-28 16:20:10

Re: OpenLayers.js lokal ablegen?

#8 2022-04-29 06:02:40

Re: OpenLayers.js lokal ablegen?

Board footer