Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.
Seiten: 1
#1 23. April 2014 09:50
- Klenkes
- Server-Pate
- Ort: 89428 Syrgenstein
- Registriert: 17. Dezember 2010
- Beiträge: 1.423
[Neues Plugin] Map mit OpenStreetMap und Leaflet
Hintergrund:
Genervt von der Schwere der Googlemaps und inflationären Requests hab' ich mich etwas mit Openstreetmap und verschiedenen JS Libraries beschäftigt.
Besonders gefiel mir dabei Leaflet.
Klein, einfach und überschaubar. Man kann es auf dem eigenen Server haben oder verlinken. Minified und gzipt kann es bis zu 40kb klein sein.
Nun könnte man das Ganze auch in einen GCB einsperren. Ich brauchte bei einem Projekt aber mehrere Maps mit verschiedenen Koordinaten. Deshalb dieses Plugin.
Hinweis:
Es ist kein vollautomatisches Mapplugin, das heißt, es nimmt keine Adressangaben entgegen, sondern lat und lng als Koordinaten. Damit spart man sich die zusätzliche Anfrage an Geoserver. Koordinaten bekommt man kinderleicht hier. (MyGeoPosition)
Für einfache Lagepläne reichte mir das.
Ich habe in die Plugin-Hilfe alle möglichen Quellen, Parameter und Beispiele aufgeführt. Der Einsatz sollte also kein Problem sein.
Download:
simple_osmmap
Beitrag geändert von Klenkes (01. Mai 2020 10:28)
Offline
#2 15. Mai 2014 19:30
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 6.991
- Webseite
Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet
Kannst du Gedanken lesen ?
So etwas kann ich gerade gut gebrauchen .
Danke !
Cyberman => Andynium
1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMS/ms
Offline
#3 30. April 2020 19:34
- bd0
- Server-Pate
- Ort: Köln
- Registriert: 22. Juni 2011
- Beiträge: 205
Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet
Hallo Klenkes,
klingt super und ich hab das Plugin gerade mal ausprobiert, leider funktioniert es bei mir nicht
Gibt es dazu vielleicht ein Update? Es ist ja schon einige Jahre alt.
Wäre prima, könnte gerade ein paar OSM-Karten gut gebrauchen.
1000 dank im vorraus.
Offline
#4 01. Mai 2020 10:35
- Klenkes
- Server-Pate
- Ort: 89428 Syrgenstein
- Registriert: 17. Dezember 2010
- Beiträge: 1.423
Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet
Oje... von 2014... ich weiß nicht mal mehr was ich gestern im Fernsehen gesehen hab
Da im Plugin die Links zu den Skripts festkodiert sind, und dazu noch nur mit http, könnte ich mir vorstellen, dass die Skripte vom Browser als unsicher blockiert werden.
Entferne doch einfach alle http:
...
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
...
var osmUrl=\'//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\';
...
Aus meiner lokalen Umgebung raus funktioniert es schon.
Eine Live Website mit CMSms hab ich grad nicht zur Hand...
Offline
#5 01. Mai 2020 10:45
- bd0
- Server-Pate
- Ort: Köln
- Registriert: 22. Juni 2011
- Beiträge: 205
Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet
Danke für das Feedback. Hab ich gestern dann auch bemerkt. Hab die extern eingebundenen leaflet.css und leaflet.js "lokal" eingebunden und nun funktionierts.
Zumindest auf "normalen" Inhaltseiten.
Ich wollte es eigentlich in einer LISE-Ausgabe integrieren, dann funktioniert es aber nicht.
Im Quelltext sieht die LISE-Ausgabe identisch aus wie wenn ich es auf einer normalen Seite integriere, es erfolgt aber keine Anzeige der Karte. In der Netzwerkanalyse sehe ich auch daß keine maptiles übertragen werden.
Hat jemand ne Idee dazu?
Beitrag geändert von bd0 (01. Mai 2020 11:15)
Offline
#6 01. Mai 2020 15:09
- Klenkes
- Server-Pate
- Ort: 89428 Syrgenstein
- Registriert: 17. Dezember 2010
- Beiträge: 1.423
Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet
Wenn ich den Aufruf in ein Feld mit Tiny setze klappt es auch in LISE problemlos.
Was sagt denn die Javascript Fehlerkonsole? Meist sind es JS Errors.
Offline
#7 01. Mai 2020 21:43
- Janl
- Server-Pate
- Ort: Freistadt, Österreich
- Registriert: 13. Dezember 2010
- Beiträge: 1.203
- Webseite
Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet
Seit DSGVO habe ich kein Googlemaps mehr.
Morgen gebe ich hier ein gbc.
[edit] Doch heute.
MfG
Jan
Beitrag geändert von Janl (02. Mai 2020 22:15)
Ubuntu 16.04 KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP
Raspi 4b mit Ubuntu 20.04 (64bit) und Mate.
Offline
#8 02. Mai 2020 22:13
- Janl
- Server-Pate
- Ort: Freistadt, Österreich
- Registriert: 13. Dezember 2010
- Beiträge: 1.203
- Webseite
Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet
Das hier funktioniert in 1.12.2 Venedig als Beispiel genommen.
So ist es responsive.
In dem Template "<head>"
[== html ==]
{* untere ist fuer osm ********************************************}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
{*---------- *}
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
{* ende der osmkode ************************}
und in dem Template
[== html ==]
<body id='boxed' onload="drawmap();">
Das GCB
[== html ==]
<div id='mapid' style='width:95%;height:400px;'></div>
{literal}
<script type="text/javascript">// <![CDATA[
var mymap = L.map('mapid').setView([45.436, 12.3363], 15);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <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);
L.marker([45.436, 12.3363]).addTo(mymap)
.bindPopup("<b>Venedig<br />Italien<br />mit html<br />Bilder möglich</b>").openPopup();
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
// ]]></script>
{/literal}
Beitrag geändert von Janl (02. Mai 2020 22:16)
Ubuntu 16.04 KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP
Raspi 4b mit Ubuntu 20.04 (64bit) und Mate.
Offline
Seiten: 1