[Neues Plugin] Map mit OpenStreetMap und Leaflet

Klenkes · 23. April 2014 09:50

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)

Andynium · 15. Mai 2014 19:30

Kannst du Gedanken lesen wink ?

So etwas kann ich gerade gut gebrauchen big_smile .

Danke !

bd0 · 30. April 2020 19:34

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.

Klenkes · 01. Mai 2020 10:35

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:

Hier klicken, um den Code zum Kopieren zu markieren

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

bd0 · 01. Mai 2020 10:45

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)

Klenkes · 01. Mai 2020 15:09

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.

Janl · 01. Mai 2020 21:43

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)

Janl · 02. Mai 2020 22:13

Das hier funktioniert in 1.12.2 Venedig als Beispiel genommen.
So ist es responsive.

In dem Template "<head>"

Hier klicken, um den Code zum Kopieren zu markieren

[== 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

Hier klicken, um den Code zum Kopieren zu markieren

[== html ==]
<body id='boxed'  onload="drawmap();">

Das GCB

Hier klicken, um den Code zum Kopieren zu markieren

[== 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)

Forum für CMS/made simple

#1 23. April 2014 09:50

[Neues Plugin] Map mit OpenStreetMap und Leaflet

#2 15. Mai 2014 19:30

Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet

#3 30. April 2020 19:34

Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet

#4 01. Mai 2020 10:35

Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet

#5 01. Mai 2020 10:45

Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet

#6 01. Mai 2020 15:09

Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet

#7 01. Mai 2020 21:43

Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet

#8 02. Mai 2020 22:13

Re: [Neues Plugin] Map mit OpenStreetMap und Leaflet

Fußzeile des Forums