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>
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.
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:
<! – →
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
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.
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)
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 einbinden, wie es hier auf openlayers.org beschrieben ist.
