WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 05.03.2017 19:40:32

berny
Member

OSM by Leaflet - droplet

This is a droplet to Display the Open Streetmap on WBCE.

Parameters:
lat = Latidude
lon = Longitude
zoom = Zoomlevel of map
height = height of displayed map

Use it with
[[osmkarte?lon=47.890&lat=13,456&zoom=15&height=400]]

have fun.

// usage: [[osmkarte?lon=&lat=&zoom=&height=]]
// parameters:
	
$lon = isset($lon)? $lon : 0;
$lat = isset($lat)? $lat : 0;
$zoom = isset($zoom) ? intval($zoom) : 19;
$height = isset($height) ? intval($height) : 400;

$content ="";
$content .=' <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<style>
   #map { height: '.$height.'px; }
   </style>    
   
   <script language="javascript">
      function init() {
      	 var map = L.map(\'map\');
      	 
         L.tileLayer(\'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\', {
            attribution: \'&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors\',
            maxZoom: 18
         }).addTo(map);
         map.attributionControl.setPrefix(\'\'); // Don\'t show the \'Powered by Leaflet\' text.

         var ort = new L.LatLng('.$lat.', '.$lon.'); // geographical point (longitude and latitude)
         map.setView(ort, '.$zoom.');
         var marker = L.marker(['.$lat.', '.$lon.']).addTo(map);

      }
   </script>
   
   
    <div id="map" onload="javascript:init();"></div>
    ';


return $content;

Online

Liked by:

thanks

#2 06.03.2017 09:27:50

florian
Administrator

Re: OSM by Leaflet - droplet

I don't get this working, sorry. Tested wth WBCE 1.1.11 and 1.2 alpha10, but I don't view a map and unfortunately not even JS errors.
The generated code looks like this:

<div> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<style>
   #map { height: 400px; }
   </style>    
   
   <script language="javascript">
      function init() {
      	 var map = L.map('map');
      	 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
            maxZoom: 18
         }).addTo(map);
         map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.

         var ort = new L.LatLng(13,456, 47.890); // geographical point (longitude and latitude)
         map.setView(ort, 15);
         var marker = L.marker([13,456, 47.890]).addTo(map);

      }
   </script>
   
   
    <div id="map" onload="javascript:init();"></div>
    
</div>	

Do you have an idea what could cause the problem?

Offline

#3 06.03.2017 11:19:29

bernd
Developer

Re: OSM by Leaflet - droplet

Der Fehler dürfte da liegen:

[[osmkarte?lon=47.890&lat=13,456&zoom=15&height=400]]


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#4 06.03.2017 11:34:29

florian
Administrator

Re: OSM by Leaflet - droplet

Dachte ich auch, aber das wars nicht

Offline

#5 06.03.2017 12:20:34

bernd
Developer

Re: OSM by Leaflet - droplet

Wenn man jetzt noch lat / long vertauscht und das "onload" in den body verfrachtet, scheints zu klappen...


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#6 06.03.2017 12:23:03

florian
Administrator

Re: OSM by Leaflet - droplet

Kann ich soweit bestätigen.
<body onload=""> aus einem Droplet heraus setzen geht aber nicht so ohne weiteres. Hm.

Edit: Ergebnis von "Hm" (Denkvorgang)

Man müsste dann noch

$wb_page_data = str_replace('<body','<body onload="javascript:init();"', $wb_page_data);

ins Droplet einfügen.

Last edited by florian (06.03.2017 12:29:56)

Offline

#7 06.03.2017 12:26:49

berny
Member

Re: OSM by Leaflet - droplet

var ort = new L.LatLng(13,456, 47.890);

das Komma stört, muss ein Punkt sein....

<p> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<style>
   #map { height: 400px; }
   </style>    
   
   <script language="javascript">
      function init() {
      	 var map = L.map('map');
      	 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
            maxZoom: 18
         }).addTo(map);
         map.attributionControl.setPrefix('Setup by <a href="http://www.best-data.at">best-data</a> | Powered by Leaflet'); // Don't show the 'Powered by Leaflet' text.

         var ort = new L.LatLng(47.90050, 13.78756); // geographical point (longitude and latitude)
         map.setView(ort, 16);
         var marker = L.marker([47.90050, 13.78756]).addTo(map);

      }
   </script>
   
   
    <div id="map" onload="javascript:init();"></div>
    </p>

Der funktioniert bei mir...
Ev blockiert etwas anderes? Immerhin werden die scripte dirty nicht im header Tag ausgegeben sondern direkt beim droplet.....

ich wollte vorher die GPS-Koordinaten auch mittesl intval absichern, aber da schmeißt es alles nach der Kommastelle weg.
Ev hat da jemand eine einfache Lösung dafür....

Online

#8 06.03.2017 12:28:57

bernd
Developer

Re: OSM by Leaflet - droplet

schon klar, mir gings erstmal drum den Fehler zu finden und das war u.a die vertauschten lat/long.
In der Reihenfolge wie sie ursprünglich im Script stehen sagt der Geoconverter meines Vertrauens: "Geocoder failed due to: ZERO_RESULTS" - sprich ungültige Koordinaten müßten auch noch irgendwie abgefangen werden.

Wenn man davon ausgeht, das jquery eh geladen ist, könnte man das onload durch ein jquery document ready ersetzen ...


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#9 06.03.2017 12:34:18

bernd
Developer

Re: OSM by Leaflet - droplet

Also alle Quellen, die ich kenne, sagen klipp und klar das ein "onload" in einem div nicht funktioniert.
Mit welchem Browser, bitte klappt das bei dir?


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#10 06.03.2017 12:44:15

bernd
Developer

Re: OSM by Leaflet - droplet

Sodele, ein

<div id="map"></div>
<script>
	window.onload = init();
</script>

sollte es richten ...


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

Liked by:

florian

#11 06.03.2017 12:52:07

florian
Administrator

Re: OSM by Leaflet - droplet

Cool, so klappt es!

Anbei das Droplet mit dem Loader.

Offline

Liked by:

berny

#12 06.03.2017 13:10:28

berny
Member

Re: OSM by Leaflet - droplet

Ich arbeite ansich mit dem FF
Da ging das mit dem laden des Div....

Wie gesagt, das Kommastellenformat sollte man noch irgendwie abfangen.
Wie das mit lon/lat gehen soll, ist mir noch nicht ganz klar....

Last edited by berny (06.03.2017 13:16:34)

Online

#13 06.03.2017 13:32:31

bernd
Developer

Re: OSM by Leaflet - droplet

Das mit dem Komma vielleicht so (nicht getestet!):

$lon = isset($lon)? str_replace(',', '.', $lon) : 0;
$lat = isset($lat)? str_replace(',', '.', $lat) : 0;

Und wegen ungültiger Koordinaten könnte man damit vielleicht was basteln:

Leaflet Doku wrote:

errorTileUrl     String     ''     URL to the tile image to show in place of the tile that failed to load.

oder damit:

locationerror     ErrorEvent     Fired when geolocation (using the locate method) failed.

Edit: kann man in dem Zusammenhang vergessen, der ErrorEvent feuert nur bei Verwendung der GeoLocationApi.

Nebenbe:, das ganze funktioniert auch ohne die init.Funktion und ohne onload, wenn man das map-div vor den Scripttteil setzt ...

Last edited by bernd (07.03.2017 01:03:38)


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#14 07.03.2017 15:23:55

berny
Member

Re: OSM by Leaflet - droplet

angel querdenker! Nicht gecheckt, sondern gleich angepasst...
Dass ich da nicht selber draufgekommen bin  wink

Online

#15 26.04.2017 15:27:07

masju
Member

Re: OSM by Leaflet - droplet

Sehr schönes Droplet.
Leider erhalte ich die Java-Fehlermeldung "Map container not found." Ich habe auch mal das doppelte "window.onload = init();" gelöscht, nun ist der Fehler weg, aber es gibt auch keine Karte  wink

Was tun?
Gruß ans Forum!
masju

PS (Nachtrag): Seltsam, auf einer anderen Seite von mir läuft das Droplet problemlos. Hatte also zuerst mein Template in Verdacht, aber auch bei einem "blank" kommt der Fehler. Ich forsche mal weiter...

Last edited by masju (26.04.2017 16:07:32)

Offline

#16 26.04.2017 15:54:53

florian
Administrator

Re: OSM by Leaflet - droplet

Hallo und willkommen masju,

ich vermute mal, Du setzt WebsiteBaker ein? Eventuell schießt da ein Outputfilter quer.
Wie sieht denn der generierte Code im Frontend (Browser-> Strg-U) aus?

Offline

#17 26.04.2017 16:13:34

masju
Member

Re: OSM by Leaflet - droplet

Hallo Florian,

genau: WB 2.8.3 SP7.

Ich schalte mal im Outputfilter alle Optionen aus (außer natürlich Droplets wink )  Vielleicht liegt es wieder mal daran. Danke für den Tipp.
Der ausgegebene Code sieht übrigens okay aus (bis auf das doppelte "window.onload = init();" )

Danke für Deine Antwort. Ich melde mich, wenn ich den Knoten gelöst habe.
Gruß, masju

Offline

#18 26.04.2017 16:19:56

masju
Member

Re: OSM by Leaflet - droplet

Hier noch der ausgegebene Code:
[[osmkarte?lat=47.890&lon=13.456&zoom=15&height=400]]
ergibt

[== HTML ==]
<p> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>


<script language="javascript">
function init() {
var map = L.map('map');

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(map);
map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.

var ort = new L.LatLng(47.890, 13.456); // geographical point (longitude and latitude)
map.setView(ort, 15);
var marker = L.marker([47.890, 13.456]).addTo(map);

}
window.onload = init();
</script>


<div id="map"></div>

<script>
window.onload = init();
</script>
</p>

Offline

#19 26.04.2017 16:24:56

florian
Administrator

Re: OSM by Leaflet - droplet

Ich vergleiche gerade den Output mit dem in WBCE.

Einziger Unterschied: bei Dir fehlt das

<style>
   #map { height: 400px; }
   </style>

Ist das irgendwo anders zu finden?

Offline

#20 26.04.2017 16:39:03

masju
Member

Re: OSM by Leaflet - droplet

florian wrote:

bei Dir fehlt das

<style>
   #map { height: 400px; }
   </style>

Ist das irgendwo anders zu finden?

Nein, fehlt tatsächlich.
Ich habe alle Output-Filteroptionen abgewählt. Trotzdem keine Karte.

Offline

#21 26.04.2017 16:46:21

masju
Member

Re: OSM by Leaflet - droplet

<style>
   #map { height: 400px; }
</style>

War tatsächlich die Lösung smile ! Irgendetwas filtert den Style heraus, trotz weitgehend abgeschalteter Optput-Filter. Nun habe ich ihn quasi mit der Brechstange in den <head>-Bereich geschrieben (Backend - Optionen - Kopfzeile), und alles läuft smile .
Vielen Dank noch mal an den Entwickler für das schöne Droplet. Ich hatte schon vor einiger Zeit mal mit leaflet experimentiert aber es nicht zum Laufen gebracht. (jetzt weiß ich auch, warum).

Offline

Liked by:

florian

#22 26.04.2017 16:47:45

florian
Administrator

Re: OSM by Leaflet - droplet

Du könntest sonst 

#map { height: 400px; }

im Template-CSS einfügen, dann brauchst Du die Kopfzeilen-Brechstange nicht.  cool

Offline

#23 26.04.2017 21:06:20

masju
Member

Re: OSM by Leaflet - droplet

Ich habe im WB-Forum mal nachgefragt, es liegt am eingebauten CSStoHead-Filter von WB, der versucht, style-Anweisungen W3C-konform in den head zu verschieben, was in diesem Fall bei droplets aber schiefgeht (WBCE scheint diese Funktion nicht zu haben?).

Der User jacobi22 hatte dann eine noch universellere Lösung:
Den <style>-Bereich ganz entfernen und die Zeile

<div id="map"></div>

austauschen mit

<div id="map" onload="javascript:init();" style="height:'.$height.'px"></div>

Die java-Fehlermeldung "Map container not found" wird in der Konsole zwar immer noch angezeigt, aber die Karte ist da smile !
Anscheinend braucht der map-Container nur eine irgendwie aber konkret angegebene Höhe, dann läuft die leaflet-Ausgabe.

Viele Grüße,
masju

Offline

#24 27.04.2017 01:37:30

florian
Administrator

Re: OSM by Leaflet - droplet

Zu jacobis "Tipp" hinsichtlich div-onload siehe
https://forum.wbce.org/viewtopic.php?pid=9815#p9815

Die Höhe dynamisch per Inline-Style zu übergeben, ist interessant; aber wenn eine JavaScript-Fehlermeldung (JavaScript ist was anderes als Java!) - auch wenn sie "nur" in der Konsole kommt - erscheint, ist das aber vermutlich leider auch keine Option, die unbedingt browserübergreifend verlässlich funktioniert.

WBCEs Css2Head reagiert nur auf <style type="text/css">, nicht  auf <style>. Ob das ein Bug ist oder so beabsichtigt, vermag ich nicht zu sagen. Generell sind wir hier etwas entspannter bezüglich Benutzerbevormundung strikter Regeleinhaltung.

Offline

#25 27.04.2017 03:33:44

bernd
Developer

Re: OSM by Leaflet - droplet

Nun ja,
das type-Attribut ist in HTML5 nicht mehr erforderlich, vieleicht könnte man das Css2Head bei Gelegenheit ja mal anpassen, das es auf beides reagiert.

Und was das init im map-div anbelangt (was wohl den Javascript-Fehler verursacht): da sind wir wieder bei meinem Posting #9 und folgende roll


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

Board footer

Powered by FluxBB

up