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

#1 23. April 2014 09:50

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.422

[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

cyberman
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 6.940

Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet

Kannst du Gedanken lesen wink?

So etwas kann ich gerade gut gebrauchen big_smile.

Danke !

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 sad
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.422

Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet

Oje... von 2014... ich weiß nicht mal mehr was ich gestern im Fernsehen gesehen hab  smile

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.422

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.183
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 mit KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP

Offline

#8 02. Mai 2020 22:13

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.183
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 &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);

	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 mit KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP

Offline