maps mit Streckendarstellung

padman

@liv-in-sky Mit Begeisterung lese ich grad diesen Beitrag. Könnte ich auch das Password bekommen?

liv-in-sky

da sind viele daten drin - habe ein paar geändert - das kennwort ist im chat

Kanumouse

Hi,
ich habe heute endlich den Bosch-ebike-Adapter zum Laufen bekommen.
Danach wollte ich auf deine Erfahrungen zurückgreifen und habe dein Script und die View importiert.
Das bekomme ich leider nicht zum Laufen, ich denke, da fehlt irgend etwas.
Wie werden die Objekte/Variablen unter javascript.0 gefüllt?
Ich denke, irgend etwas fehlt mir auch in der View?

bahnuhr

@kanumouse
Da fehlt gar nix.
Läuft einwandfrei.

Bitte alles genau anschauen und versuchen zu verstehen..

Kanumouse

@bahnuhr
Ich habe mir schon den Kopf zerbrochen, komme aber leider nicht weiter.
Du hast sicherlich recht, dass ich irgend etwas nicht verstehe.

Kanumouse

@bahnuhr
Hast du vielleicht einen Tipp für mich?
Wenn ich das richtig verstehe, ist mir nicht klar wie die javascript.0.Geräte.Fahrrad.Touren-Variable als JSON gefüllt wird???
Ich weiß nicht, wie die Daten der Trips aus der ebike-Instanz als Ausgangsdaten für den Script verwendet werden, sehe ich offensichtlich nicht durch.

bahnuhr

@kanumouse sagte in maps mit Streckendarstellung:

ist mir nicht klar wie die javascript.0.Geräte.Fahrrad.Touren-Variable als JSON gefüllt wird???

Das ist nicht wichtig, bzw. bei jedem ja anders.
Du musst selber wissen wo deine lat und lon liegen.
Und diese musst du dann per script poly zuweisen.
Um danach eine html zu erzeugen.

       // GPS einlesen und der Variablen poly zuweisen
            if (trip < 10) trip = "0" + trip;       // DP bei den Objekten der eingelesen werden soll: bosch-ebike.0.trips.xx.details
            var obj = JSON.parse(getState("bosch-ebike.0.trips." + trip + ".details").val); 
            var end = obj.activityData.length - 1;
            for (var x=0; x<=end; x++) {
                if (obj.activityData[x].lat > 1 && obj.activityData[x].lon > 1) {
                    poly = poly + "["+obj.activityData[x].lat+", "+obj.activityData[x].lon+"]"
                    if (x < end) poly = poly + ","
                }
            }
            if (logging) log (poly);
        // html erzeugen und speichern in /vis.0/xxx.html
            var string = '<!DOCTYPE html>\n<html>\n<head>\n<title>Simple Leaflet Map</title>\n<meta charset="utf-8" />\n'
            string = string + '<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="crossorigin=""/></head>\n'
            string = string + '<body>\n<div id="map" style="width: 980px; height: 530px"></div>\n<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="crossorigin=""></script>\n<script>\n'
            string = string + "var map = L.map('map').setView([" + center_gps + "], " + zoom + ");\n"
            string = string + "mapLink = '<a href=" + '"http://openstreetmap.org"' + ">OpenStreetMap</a>';\n"
            string = string + "L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map);\n"
            string = string + 'var polyline = L.polyline([ \n' + poly + '\n], { color: "blue", weight: 3, opacity: .7, lineJoin: "round" } ).addTo(map);\n'
            string = string + '</script>\n</body>\n</html>'
            writeFile("vis.0", "/Routen/" + pfad + trip +".html", string, (error) => {
                if (logging) log('Datei "route.html" gespeichert!');
            });
            setState("javascript.0.Geräte.Fahrrad.Routen.Datei","/vis.0/Routen/" + pfad + trip + ".html");

Kanumouse

@bahnuhr
Danke für den Hinweis.
Aber jetzt bin ich richtig verwirrt und ich glaube zu blöd dazu.
Meine lat und lon habe ich in deinem Script an meinem Standort angepasst. Aber mit dem Rest bin ich überfordert, da sich meine AKenntnisse in der Programmierung im Anfangstadium befinden.

Kanumouse

@bahnuhr
Zur ERgänzung, so sieht meine importierte View aus.

bahnuhr

@kanumouse
Ok, ich bin jetzt raus.
Ich glaube ohne intensive Einarbeitung deinerseits wird das nix.

Kanumouse

@bahnuhr
Kann ich verstehen, trotzdem schade!
Ich weiß nicht so richtig, wo ich im Moment anfangen soll.
Ich glaube mein Problem ist, wie ich aus der Instanz die Touren auslese und abspeichere???

OliverIO

@kanumouse

Ich habe hier mal ein versuch gestartet das etwas einfacher zu machen.
Du musst halt JSON können, ist aber auch nicht so schwer
https://forum.iobroker.net/topic/82214/test-iobroker-mapwidgets

Kanumouse

Ich habe jetzt im ersten Schritt alles hinbekommen und es funktioniert soweit. Einige kleinere Verbesserungen stehen noch an.
Nun habe ich eine dynamische Zuweisung des Kartenmittelpunktes eingefügt, die aber leider in der Anzeige nicht funktioniert.
In der html-Datei ist immer die richtige Mittelpunktzuweisung enthalten, nur angezeigt wird immer nur eine Karte mit dem erstmalig angezeigten Mittelpunkt.
Die Touren werden aber je nach Auswahl immer richtig in der Karte angezeigt. Nur man muss die Karte dann immer verschieben, da die Touren an unterschiedlichen Orten stattfanden.
Ich habe schon den Cache des Browers (Firefox) gelöscht und auch Chrome benutzt - immer dasselbe Ergebnis.
Jetzt weiß ich erst einmal nicht mehr weiter.
Hat Jemand einen Tipp für mich?

OliverIO

@kanumouse

Also, wenn es um den neuen Adapter geht, wäre es mir recht, wenn wir die Diskussion im anderen thread weiterführen.
Hier geht es ja, um individuellem Java Skript und hat mit dem Adapter nichts zu tun.

Eventuell hilft dir die seit gestern verfügbare Option fitBounds.
Ansonsten musst du mit etwas mehr Details schreiben. Am besten Widget Export plus Inhalt des Datenpunkts. Dann kann man sich besser vorstellen, was du machst.

bahnuhr

@kanumouse sagte in maps mit Streckendarstellung:

In der html-Datei ist immer die richtige Mittelpunktzuweisung enthalten, nur angezeigt wird immer nur eine Karte mit dem erstmalig angezeigten Mittelpunkt.

Das Widget in VIS wird aktualisiert in der Anzeige, wenn sich der DP Eintrag ändert (oder du F5 drückst). Es reicht hier nicht die html zu ändern.
Folglich:
Ändere nicht nur die html sondern auch den html Namen. Und dieser musst du neu eintragen im DP.

Kanumouse

@bahnuhr
Danke für den Tipp, das war mir schon klar .Das ist aber nicht die Ursache.
Der Datenpunkt auf den der Link im widget verweist ändert sich, aber die map im widget ändert sich leider hinsichtlich des map-Mittelpunktes nicht. Die Routen werden in der map aber richtig angezeigt, nur ddie map muss man dann immer erst verschieben. Angezeigt wird die map immer mit Mittelpunkt (ca. 52.25, 14.41), obwohl bspw. in der html-Datei der richtige map-Mittelpunkt steht ( im Beispiel 53.21, 14.41).

<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="crossorigin=""/></head>
<body>
<div id="map" style="width: 980px; height: 530px"></div>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="crossorigin=""></script>
<script>
var map = L.map('map').setView([53.25550348348861, 14.412522912025452], 13);
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map);
var polyline = L.polyline([ 
[53.94125, 14.19013],[53.94141, 14.19022],[53.94181, 14.19009],[53.94218, 14.18984],[53.94255, 14.18912],[53.94293, 14.18838],[53.94331, 14.18791],[53.94372, 14.18726],[53.94412, 14.18656],[53.94452, 14.18584],[53.94488, 14.18524],[53.94525, 14.1846],[53.94565, 14.18386],[53.94602, 14.18325],[53.94641, 14.18254],[53.94689, 14.18186],[53.94725, 14.18125],[53.94768, 14.18051],[53.94806, 14.17989],[53.94845, 14.17928],[53.94884, 14.17865],[53.94925, 14.17797],[53.94961, 14.1774],[53.95004, 14.17673],[53.95048, 14.1761],[53.9509, 14.17547],[53.95133, 14.17486],[53.95169, 14.17438],[53.95213, 14.17378],[53.95251, 14.17319],[53.95297, 14.17251],[53.95341, 14.172],[53.95391, 14.17158],[53.9544, 14.17137],[53.95489, 14.17189],[53.95535, 14.1715],[53.95578, 14.17097],[53.95609, 14.17026],[53.95653, 14.16975],[53.95705, 14.1693],[53.95723, 14.16861],[53.95767, 14.16802],[53.95818, 14.16737],[53.95854, 14.16685],[53.95887, 14.16607],[53.95923, 14.16542],[53.95957, 14.16471],[53.95996, 14.1641],[53.96037, 14.16347],[53.96078, 14.16283],[53.96118, 14.16219],[53.96159, 14.16152],[53.9619, 14.16082],[53.96219, 14.16006],[53.9626, 14.15945],[53.96299, 14.15881],[53.96341, 14.1582],[53.96386, 14.15751],[53.96428, 14.15688],[53.96467, 14.1563],[53.96513, 14.1556],[53.96551, 14.15503],[53.96589, 14.15446],[53.96632, 14.15383],[53.96669, 14.15312],[53.96707, 14.15244],[53.96749, 14.15172],[53.96791, 14.15116],[53.96835, 14.15065],[53.96881, 14.15013],[53.96926, 14.14955],[53.96964, 14.14905],[53.97014, 14.14843],[53.97055, 14.14791],[53.97101, 14.14728],[53.9714, 14.14676],[53.97184, 14.14619],[53.97227, 14.14559],[53.97276, 14.14509],[53.97316, 14.14456],[53.97364, 14.14397],[53.97406, 14.14347],[53.97452, 14.14293],[53.97496, 14.14233],[53.97539, 14.14182],[53.97519, 14.14116],[53.97554, 14.14057],[53.97601, 14.13997],[53.97635, 14.13947],[53.97669, 14.13876],[53.97718, 14.13846],[53.97757, 14.13793],[53.97803, 14.13745],[53.97853, 14.13671],[53.97894, 14.13625],[53.97933, 14.13555],[53.97964, 14.1349],[53.97979, 14.13404],[53.9799, 14.13295],[53.98003, 14.13225],[53.98028, 14.13133],[53.98048, 14.13038],[53.98072, 14.12971],[53.98093, 14.12877],[53.98104, 14.12798],[53.9811, 14.12704],[53.98119, 14.12609],[53.98083, 14.12554],[53.9808, 14.12479],[53.98119, 14.12414],[53.98164, 14.12338],[53.98171, 14.12263],[53.98154, 14.12173],[53.98135, 14.12075],[53.98183, 14.1204],[53.98232, 14.12012],[53.98283, 14.11985],[53.98336, 14.11961],[53.9839, 14.11939],[53.98413, 14.11868],[53.98431, 14.11774],[53.9846, 14.11687],[53.98498, 14.11628],[53.98553, 14.11636],[53.98601, 14.11684],[53.98648, 14.11739],[53.98692, 14.11711],[53.98738, 14.1167],[53.98794, 14.11641],[53.98842, 14.11592],[53.98887, 14.11553],[53.9892, 14.11489],[53.9894, 14.11399],[53.98968, 14.11335],[53.99037, 14.11337],[53.9908, 14.11362],[53.99133, 14.11368],[53.99176, 14.11309],[53.99204, 14.11226],[53.99238, 14.11168],[53.99286, 14.11124],[53.99331, 14.11077],[53.9938, 14.11025],[53.99421, 14.1097],[53.99469, 14.10904],[53.99508, 14.10851],[53.99548, 14.10781],[53.99571, 14.10706],[53.99575, 14.10608],[53.99588, 14.10523],[53.9963, 14.10453],[53.99676, 14.1041],[53.99724, 14.10367],[53.99778, 14.10318],[53.99818, 14.1027],[53.99858, 14.10214],[53.9991, 14.1016],[53.9995, 14.10104],[53.99984, 14.10035],[54.00013, 14.09949],[54.00042, 14.09875],[54.00075, 14.09809],[54.00127, 14.09739],[54.00163, 14.09696],[54.00196, 14.09612],[54.00235, 14.09547],[54.00273, 14.09487],[54.00308, 14.09401],[54.00336, 14.0935],[54.00377, 14.09294],[54.00409, 14.09205],[54.00448, 14.09156],[54.00486, 14.09084],[54.00517, 14.0901],[54.0056, 14.08947],[54.00595, 14.08879],[54.00626, 14.0879],[54.0065, 14.08718],[54.00682, 14.08636],[54.00732, 14.08582],[54.00769, 14.08526],[54.00811, 14.08452],[54.00843, 14.08393],[54.00887, 14.08331],[54.00927, 14.08254],[54.00958, 14.08187],[54.00997, 14.08109],[54.0103, 14.08045],[54.01069, 14.07968],[54.01107, 14.07897],[54.01142, 14.07832],[54.01181, 14.07762],[54.01215, 14.07701],[54.01257, 14.07629],[54.01282, 14.07562],[54.01314, 14.07475],[54.0134, 14.07381],[54.01356, 14.07298],[54.01365, 14.07199],[54.01396, 14.07138],[54.0145, 14.07111],[54.01501, 14.07091],[54.01535, 14.07018],[54.0169, 14.0673],[54.01678, 14.06685],[54.01642, 14.06614],[54.01608, 14.06547],[54.01572, 14.06466],[54.01551, 14.06385],[54.01525, 14.06308],[54.01488, 14.06226],[54.01456, 14.06153],[54.01427, 14.06085],[54.01397, 14.06005],[54.01376, 14.05918],[54.0137, 14.05822],[54.0137, 14.05717],[54.01369, 14.05624],[54.01365, 14.05536],[54.01356, 14.05441],[54.01344, 14.05352],[54.01329, 14.05269],[54.01315, 14.0518],[54.01347, 14.05122],[54.01386, 14.05055],[54.01425, 14.04971],[54.01451, 14.04906],[54.01505, 14.04859],[54.01535, 14.048],[54.01518, 14.0474],[54.01491, 14.04676],[54.01486, 14.04597],[54.01453, 14.04513],[54.01413, 14.04517],[54.01381, 14.04436],[54.01366, 14.04356],[54.01368, 14.04278],[54.01326, 14.04276],[54.01274, 14.04317],[54.01239, 14.04334],[54.01194, 14.04272],[54.01154, 14.04196],[54.01126, 14.04117],[54.01116, 14.04027],[54.01107, 14.03944],[54.01108, 14.03966],[54.01114, 14.04053],[54.0113, 14.04139],[54.01165, 14.04222],[54.01197, 14.04292],[54.01241, 14.04326],[54.01292, 14.04303],[54.01342, 14.04265],[54.0138, 14.04317],[54.01412, 14.044],[54.01439, 14.0447],[54.01469, 14.04555],[54.01495, 14.04633],[54.0151, 14.04702],[54.01532, 14.04744],[54.01515, 14.04832],[54.01478, 14.04881],[54.01432, 14.04936],[54.01402, 14.0502],[54.01363, 14.05084],[54.01328, 14.05147],[54.01325, 14.05232],[54.0134, 14.05325],[54.01351, 14.05413],[54.01362, 14.05499],[54.01368, 14.05603],[54.01371, 14.05695],[54.01376, 14.05776],[54.0138, 14.05869],[54.01398, 14.05964],[54.0142, 14.0603],[54.01447, 14.06113],[54.01482, 14.06191],[54.01511, 14.0626],[54.01548, 14.06348],[54.01565, 14.0643],[54.01599, 14.06516],[54.01633, 14.06583],[54.0167, 14.06646],[54.01718, 14.06698],[54.01757, 14.06769],[54.01766, 14.06837],[54.01754, 14.06756],[54.01716, 14.06702],[54.01683, 14.06697],[54.01682, 14.06779],[54.01648, 14.06865],[54.01609, 14.06913],[54.01566, 14.06957],[54.01535, 14.0703],[54.01495, 14.07089],[54.0144, 14.07115],[54.01387, 14.07148],[54.01361, 14.07216],[54.0135, 14.07309],[54.01333, 14.07401],[54.01307, 14.07487],[54.01283, 14.07555],[54.0125, 14.07643],[54.01215, 14.07706],[54.01171, 14.07781],[54.01132, 14.07849],[54.01099, 14.07911],[54.01059, 14.07981],[54.01025, 14.08048],[54.00983, 14.08131],[54.00949, 14.08203],[54.00917, 14.08276],[54.00877, 14.08346],[54.00843, 14.08395],[54.00807, 14.08463],[54.00764, 14.08533],[54.00718, 14.08595],[54.00673, 14.08652],[54.00648, 14.08721],[54.00618, 14.08809],[54.00586, 14.08892],[54.00553, 14.08953],[54.00513, 14.09011],[54.00486, 14.09082],[54.0044, 14.09161],[54.00401, 14.09207],[54.00377, 14.09286],[54.0034, 14.09346],[54.00304, 14.09414],[54.00273, 14.0948],[54.00228, 14.09547],[54.00195, 14.09617],[54.00158, 14.09701],[54.00112, 14.09757],[54.00072, 14.0981],[54.00041, 14.09882],[54.00013, 14.09953],[53.99981, 14.1004],[53.99947, 14.10107],[53.99901, 14.10167],[53.99852, 14.10224],[53.99807, 14.10286],[53.99767, 14.10333],[53.99719, 14.10377],[53.99663, 14.1042],[53.99622, 14.10458],[53.99583, 14.10522],[53.99573, 14.10614],[53.99567, 14.10716],[53.99538, 14.10798],[53.99501, 14.10865],[53.99456, 14.10925],[53.99411, 14.10986],[53.99367, 14.11036],[53.99327, 14.11082],[53.99281, 14.11132],[53.99243, 14.11176],[53.99208, 14.11242],[53.99174, 14.11336],[53.99124, 14.11362],[53.99076, 14.11354],[53.99028, 14.11332],[53.98967, 14.11344],[53.98946, 14.11411],[53.9892, 14.11501],[53.98887, 14.11559],[53.98829, 14.11608],[53.98787, 14.11648],[53.98732, 14.11683],[53.98692, 14.11727],[53.9864, 14.11731],[53.98603, 14.11686],[53.98555, 14.1163],[53.98499, 14.11629],[53.98463, 14.11687],[53.98438, 14.11767],[53.98422, 14.11843],[53.98395, 14.11919],[53.98343, 14.11952],[53.98287, 14.11985],[53.98232, 14.1202],[53.98184, 14.1204],[53.98147, 14.12077],[53.98165, 14.12156],[53.98171, 14.12245],[53.9816, 14.12334],[53.98122, 14.12402],[53.98092, 14.12461],[53.98094, 14.12538],[53.98122, 14.12623],[53.98109, 14.12714],[53.98105, 14.12813],[53.98091, 14.12888],[53.98072, 14.12981],[53.98042, 14.13055],[53.98024, 14.13147],[53.98001, 14.1323],[53.97987, 14.13308],[53.97978, 14.13402],[53.97961, 14.13492],[53.97927, 14.13573],[53.97885, 14.13629],[53.97847, 14.13679],[53.97802, 14.13742],[53.97757, 14.13797],[53.97704, 14.13847],[53.97667, 14.13891],[53.97624, 14.13952],[53.97588, 14.14008],[53.97543, 14.14064],[53.97527, 14.14131],[53.97525, 14.14188],[53.9748, 14.14246],[53.97435, 14.14306],[53.97394, 14.14353],[53.97347, 14.14415],[53.97301, 14.14474],[53.97255, 14.14524],[53.97211, 14.14571],[53.97165, 14.14637],[53.97123, 14.14694],[53.97078, 14.14754],[53.97039, 14.14802],[53.96992, 14.14864],[53.96946, 14.14927],[53.96906, 14.14976],[53.96859, 14.15033],[53.96817, 14.15082],[53.9677, 14.15134],[53.96731, 14.15191],[53.96688, 14.1527],[53.96656, 14.15334],[53.96616, 14.15406],[53.96574, 14.15462],[53.96538, 14.15518],[53.96494, 14.15583],[53.96453, 14.15648],[53.96416, 14.15701],[53.96372, 14.15767],[53.96327, 14.15834],[53.96291, 14.1589],[53.96247, 14.15959],[53.96207, 14.16021],[53.96185, 14.16103],[53.96145, 14.1617],[53.96108, 14.16233],[53.96064, 14.16304],[53.96029, 14.1636],[53.95984, 14.16429],[53.95945, 14.16487],[53.95911, 14.16567],[53.95874, 14.1662],[53.95846, 14.16692],[53.95798, 14.16761],[53.95757, 14.1681],[53.95717, 14.16875],[53.95684, 14.16944],[53.95638, 14.16987],[53.95593, 14.17046],[53.95561, 14.17115],[53.95515, 14.17168],[53.95462, 14.17173],[53.95421, 14.1712],[53.95376, 14.17169],[53.95329, 14.17212],[53.95285, 14.17272],[53.95244, 14.17329],[53.95197, 14.17394],[53.95161, 14.17443],[53.95119, 14.17502],[53.95068, 14.17573],[53.95026, 14.17636],[53.94986, 14.17695],[53.94945, 14.17756],[53.94907, 14.17821],[53.9487, 14.17882],[53.94827, 14.17951],[53.94792, 14.18008],[53.94752, 14.18075],[53.94711, 14.18144],[53.94674, 14.18207],[53.94626, 14.18274],[53.94591, 14.18334],[53.94551, 14.18407],[53.94517, 14.18469],[53.94478, 14.18536],[53.9444, 14.18602],[53.944, 14.18672],[53.94367, 14.18729],[53.94326, 14.18799],[53.94283, 14.18858],[53.94247, 14.18922],[53.94213, 14.18995],[53.94169, 14.18996],[53.94131, 14.19035]
], { color: "blue", weight: 3, opacity: .7, lineJoin: "round" } ).addTo(map);
</script>
</body>
</html>

bahnuhr

@kanumouse
Na, dann zeig doch mal deine html Dateien.

Einmal die, die beim Start richtig ist.
Und dann die, die du änderst und dann falsch angezeigt wird.

Hast du fitbounds drin ?

bahnuhr

@kanumouse sagte in maps mit Streckendarstellung:

Der Datenpunkt auf den der Link im widget verweist ändert sich,

Da bist du sicher.

Der Eintrag im DP muss ! sich ändern; und nicht nur die dahinter liegende html Datei.

bahnuhr

@kanumouse

Nachtrag:
Wenn ich deine Daten von oben in eine html speichere, dann sehe ich gar keine Linie !

Kanumouse

@bahnuhr
Das ist das Bild und die html für die Route, wo der Mittelpunkt nicht mit dem in der Datei eingetragenem übereinstimmt.

<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="crossorigin=""/></head>
<body>
<div id="map" style="width: 980px; height: 530px"></div>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="crossorigin=""></script>
<script>
var map = L.map('map').setView([53.94125,14.19014], 13);
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map);
var polyline = L.polyline([ 
[53.94125, 14.19014],[53.9413, 14.19045],[53.94141, 14.18996],[53.94177, 14.1901],[53.94191, 14.19043],[53.94171, 14.1909],[53.94149, 14.19132],[53.94124, 14.19177],[53.94099, 14.19223],[53.94076, 14.19271],[53.94054, 14.19311],[53.94033, 14.19355],[53.9401, 14.194],[53.93983, 14.19445],[53.9396, 14.19491],[53.9394, 14.19538],[53.93914, 14.19582],[53.9389, 14.19627],[53.93869, 14.19669],[53.9385, 14.19715],[53.9383, 14.19767],[53.93809, 14.19818],[53.93792, 14.19858],[53.9377, 14.19911],[53.93754, 14.19949],[53.93731, 14.20002],[53.93706, 14.20057],[53.9369, 14.20097],[53.93671, 14.20141],[53.93648, 14.20196],[53.93629, 14.20239],[53.93604, 14.20295],[53.93586, 14.20335],[53.93567, 14.20376],[53.93541, 14.20428],[53.9352, 14.20478],[53.93502, 14.20518],[53.93483, 14.20557],[53.93459, 14.20611],[53.93435, 14.20663],[53.93417, 14.20704],[53.93397, 14.20744],[53.93377, 14.20797],[53.93356, 14.2084],[53.93332, 14.20893],[53.93315, 14.20936],[53.93293, 14.20983],[53.9327, 14.21035],[53.93254, 14.21078],[53.93232, 14.21134],[53.93218, 14.21171],[53.93196, 14.21228],[53.93182, 14.21267],[53.93155, 14.21329],[53.93134, 14.21377],[53.93115, 14.21422],[53.93092, 14.21479],[53.9307, 14.21526],[53.93052, 14.21578],[53.93035, 14.21625],[53.93018, 14.21669],[53.93, 14.21714],[53.92977, 14.2177],[53.92961, 14.2181],[53.92937, 14.21864],[53.9292, 14.2191],[53.929, 14.21962],[53.92881, 14.22015],[53.9286, 14.22066],[53.92841, 14.22118],[53.92825, 14.22151],[53.92807, 14.22202],[53.92788, 14.2225],[53.92764, 14.22317],[53.92752, 14.2235],[53.92736, 14.22401],[53.92709, 14.2246],[53.92688, 14.22515],[53.92669, 14.22553],[53.92648, 14.22598],[53.92638, 14.22651],[53.92621, 14.22715],[53.92605, 14.22765],[53.9259, 14.22814],[53.92573, 14.22869],[53.92556, 14.22915],[53.9253, 14.22952],[53.92517, 14.22997],[53.92505, 14.23042],[53.92492, 14.23088],[53.92472, 14.23155],[53.92456, 14.23205],[53.92439, 14.23251],[53.92427, 14.23296],[53.92408, 14.23352],[53.92394, 14.23399],[53.92376, 14.23451],[53.92358, 14.23514],[53.92341, 14.2356],[53.92321, 14.2362],[53.92312, 14.23661],[53.92295, 14.23724],[53.9228, 14.23769],[53.92266, 14.23818],[53.92248, 14.23873],[53.92232, 14.23921],[53.92216, 14.23975],[53.92198, 14.24034],[53.92183, 14.24087],[53.92168, 14.24136],[53.92154, 14.24191],[53.92136, 14.24247],[53.92121, 14.24301],[53.92107, 14.24356],[53.92098, 14.24407],[53.92088, 14.24465],[53.92078, 14.2452],[53.92068, 14.24579],[53.92059, 14.24635],[53.92049, 14.24689],[53.92036, 14.24754],[53.92026, 14.24808],[53.92017, 14.24857],[53.92023, 14.24903],[53.92027, 14.24954],[53.92018, 14.25011],[53.92011, 14.25066],[53.91999, 14.25118],[53.91993, 14.25182],[53.91981, 14.25242],[53.91973, 14.25302],[53.91964, 14.25319],[53.91961, 14.25343],[53.91972, 14.25293],[53.9198, 14.25227],[53.9199, 14.25167],[53.91998, 14.25109],[53.92012, 14.25052],[53.92023, 14.24992],[53.9203, 14.24936],[53.9204, 14.24878],[53.92051, 14.24819],[53.9206, 14.24758],[53.9207, 14.24705],[53.92073, 14.24649],[53.92059, 14.24612],[53.92071, 14.24548],[53.92081, 14.24498],[53.92091, 14.24444],[53.92101, 14.24381],[53.92112, 14.24332],[53.92126, 14.24274],[53.92142, 14.24224],[53.92157, 14.24169],[53.92174, 14.24113],[53.92188, 14.24065],[53.92205, 14.24007],[53.92217, 14.23963],[53.92234, 14.23905],[53.92249, 14.23857],[53.92265, 14.23799],[53.92278, 14.2375],[53.92294, 14.23696],[53.92313, 14.23641],[53.92329, 14.23587],[53.92339, 14.23548],[53.92358, 14.23489],[53.92378, 14.23433],[53.92392, 14.23389],[53.9241, 14.23333],[53.92427, 14.23277],[53.92441, 14.23236],[53.92459, 14.23181],[53.92477, 14.23126],[53.92492, 14.23073],[53.9251, 14.23017],[53.92518, 14.22961],[53.92544, 14.22941],[53.92561, 14.22892],[53.92575, 14.22843],[53.92591, 14.2279],[53.92603, 14.22753],[53.92626, 14.22684],[53.92637, 14.22635],[53.92651, 14.22589],[53.92677, 14.22538],[53.927, 14.22481],[53.92715, 14.22435],[53.9273, 14.22394],[53.92751, 14.22337],[53.92767, 14.22289],[53.92783, 14.22241],[53.928, 14.22202],[53.92817, 14.22151],[53.92839, 14.22093],[53.92862, 14.22037],[53.92876, 14.21998],[53.92896, 14.21947],[53.92912, 14.21907],[53.9293, 14.21854],[53.9295, 14.21799],[53.92971, 14.21753],[53.9299, 14.21704],[53.93011, 14.21652],[53.9303, 14.21604],[53.93052, 14.21552],[53.93071, 14.21505],[53.93092, 14.21453],[53.93108, 14.21412],[53.93132, 14.21359],[53.9315, 14.21321],[53.93169, 14.21267],[53.9319, 14.2122],[53.9321, 14.2117],[53.9323, 14.2112],[53.93251, 14.21068],[53.9327, 14.21025],[53.93291, 14.20976],[53.93313, 14.20925],[53.93332, 14.2088],[53.93354, 14.20828],[53.93376, 14.20783],[53.93396, 14.20735],[53.93418, 14.20688],[53.93439, 14.2064],[53.93457, 14.20598],[53.9348, 14.20549],[53.93503, 14.205],[53.93525, 14.20452],[53.93548, 14.20405],[53.93572, 14.20353],[53.93596, 14.20307],[53.93611, 14.20271],[53.93637, 14.20212],[53.93655, 14.20175],[53.93677, 14.20127],[53.93697, 14.20072],[53.93719, 14.20023],[53.93734, 14.19987],[53.93757, 14.19936],[53.9378, 14.19879],[53.93798, 14.19837],[53.93818, 14.19789],[53.93835, 14.19747],[53.93857, 14.19694],[53.93879, 14.19647],[53.93903, 14.19598],[53.93923, 14.19559],[53.93949, 14.1951],[53.93969, 14.19469],[53.9399, 14.19431],[53.94016, 14.1938],[53.94042, 14.19332],[53.94061, 14.19293],[53.94086, 14.19244],[53.94107, 14.19204],[53.94133, 14.19151],[53.94153, 14.19112],[53.94175, 14.19066],[53.942, 14.1902],[53.94221, 14.1898],[53.94244, 14.18937],[53.94269, 14.18889],[53.9429, 14.18847],[53.94315, 14.18811],[53.94341, 14.18779],[53.9437, 14.1873],[53.94393, 14.1869],[53.94417, 14.18647],[53.94442, 14.18604],[53.94461, 14.18571],[53.94485, 14.18527],[53.9451, 14.18484],[53.94534, 14.18443],[53.94558, 14.18402],[53.94583, 14.1836],[53.94613, 14.18307],[53.94635, 14.18264],[53.94662, 14.1823],[53.94687, 14.18187],[53.94707, 14.18154],[53.94733, 14.18109],[53.94758, 14.18066],[53.9478, 14.18032],[53.94806, 14.17987],[53.94833, 14.17943],[53.9486, 14.17898],[53.94881, 14.17864],[53.94909, 14.17818],[53.94933, 14.17782],[53.9496, 14.17736],[53.94981, 14.17702],[53.95008, 14.17661],[53.95036, 14.17626],[53.95065, 14.17584],[53.95092, 14.17542],[53.95113, 14.17513],[53.95142, 14.17474],[53.95169, 14.17437],[53.95195, 14.17399],[53.95224, 14.17356],[53.95243, 14.17328],[53.95271, 14.17286],[53.95296, 14.17249],[53.95328, 14.1721],[53.95358, 14.1719],[53.95394, 14.17151],[53.95426, 14.17127],[53.95448, 14.17158],[53.95475, 14.1719],[53.95512, 14.17175],[53.95538, 14.17145],[53.95565, 14.17115],[53.95585, 14.17067],[53.95612, 14.1702],[53.95637, 14.16991],[53.9567, 14.16956],[53.95697, 14.16937],[53.95716, 14.1689],[53.95731, 14.16849],[53.95766, 14.16808],[53.95794, 14.16774],[53.9582, 14.16736],[53.95846, 14.167],[53.95866, 14.16657],[53.95889, 14.16606],[53.95912, 14.16564],[53.9593, 14.16513],[53.9595, 14.1648],[53.95977, 14.16438],[53.96006, 14.16394],[53.96026, 14.16361],[53.96056, 14.16316],[53.96077, 14.16281],[53.96105, 14.16234],[53.96125, 14.16203],[53.96153, 14.1616],[53.96183, 14.16114],[53.96195, 14.1606],[53.96213, 14.16012],[53.96242, 14.1597],[53.96261, 14.15939],[53.96291, 14.15895],[53.96316, 14.15856],[53.96343, 14.15816],[53.9637, 14.15775],[53.96396, 14.15735],[53.96422, 14.15697],[53.96451, 14.15653],[53.96477, 14.15614],[53.96498, 14.15584],[53.96525, 14.15543],[53.96553, 14.15502],[53.96582, 14.15458],[53.96605, 14.15424],[53.96628, 14.15391],[53.96655, 14.15341],[53.96675, 14.15303],[53.96702, 14.15255],[53.96726, 14.15208],[53.96745, 14.15175],[53.96781, 14.15127],[53.96807, 14.15099],[53.9683, 14.15071],[53.96863, 14.15035],[53.96894, 14.15],[53.96915, 14.1497],[53.96946, 14.14931],[53.96977, 14.14892],[53.97, 14.14862],[53.9703, 14.14823],[53.9706, 14.14784],[53.97083, 14.14754],[53.97113, 14.14714],[53.97143, 14.14674],[53.97168, 14.14641],[53.97195, 14.14607],[53.97201, 14.14598],[53.97206, 14.14589],[53.97175, 14.14631],[53.97149, 14.14663],[53.97116, 14.14705],[53.97094, 14.14734],[53.97066, 14.14772],[53.97041, 14.14804],[53.97009, 14.14849],[53.96986, 14.14879],[53.9696, 14.14913],[53.96934, 14.14946],[53.969, 14.14989],[53.96874, 14.15021],[53.96839, 14.1506],[53.96819, 14.15082],[53.96788, 14.15117],[53.96759, 14.15154],[53.96729, 14.152],[53.96711, 14.15236],[53.96687, 14.15281],[53.96661, 14.1533],[53.96639, 14.15369],[53.96613, 14.15413],[53.96588, 14.15449],[53.96564, 14.15483],[53.96532, 14.15529],[53.9651, 14.15566],[53.96488, 14.15599],[53.96461, 14.1564],[53.96434, 14.15679],[53.96408, 14.15718],[53.96381, 14.15759],[53.96354, 14.158],[53.96327, 14.1584],[53.96301, 14.15882],[53.96275, 14.1592],[53.9625, 14.15958],[53.96224, 14.15996],[53.962, 14.16041],[53.96189, 14.16098],[53.96167, 14.16141],[53.96141, 14.16181],[53.96115, 14.16226],[53.96093, 14.1626],[53.96064, 14.16304],[53.96037, 14.16347],[53.96016, 14.1638],[53.95988, 14.16426],[53.95966, 14.1646],[53.95937, 14.16503],[53.95918, 14.16553],[53.95903, 14.16597],[53.95872, 14.16632],[53.95855, 14.16685],[53.9583, 14.16721],[53.958, 14.16761],[53.95771, 14.16799],[53.95748, 14.16827],[53.95721, 14.16867],[53.95709, 14.16921],[53.95679, 14.1695],[53.95649, 14.16979],[53.9564, 14.16985],[53.95595, 14.17047],[53.95581, 14.17098],[53.95552, 14.17135],[53.95523, 14.17172],[53.95491, 14.17191],[53.95459, 14.17173],[53.95435, 14.17128],[53.95411, 14.17137],[53.95374, 14.17177],[53.95352, 14.17196],[53.95319, 14.17232],[53.95297, 14.17257],[53.95267, 14.17298],[53.95238, 14.17341],[53.95215, 14.17373],[53.95185, 14.17418],[53.95163, 14.17451],[53.95131, 14.17492],[53.95108, 14.17522],[53.95076, 14.17567],[53.95052, 14.17605],[53.95027, 14.17641],[53.95002, 14.17676],[53.9497, 14.17724],[53.94943, 14.17768],[53.94919, 14.17806],[53.94898, 14.17839],[53.94872, 14.17884],[53.94848, 14.17922],[53.94823, 14.17964],[53.94797, 14.18006],[53.94771, 14.18046],[53.94748, 14.18083],[53.9472, 14.1813],[53.94695, 14.18173],[53.94672, 14.18214],[53.94645, 14.18252],[53.94621, 14.18287],[53.94599, 14.18328],[53.94576, 14.18367],[53.94503, 14.18489],[53.94479, 14.1853],[53.94453, 14.18574],[53.94429, 14.18621],[53.94405, 14.18661],[53.94381, 14.18708],[53.94357, 14.18748],[53.94331, 14.1879],[53.94308, 14.18829],[53.94286, 14.18872],[53.94256, 14.18924],[53.94234, 14.1896],[53.94212, 14.19007],[53.9418, 14.19007],[53.94149, 14.18993],[53.94129, 14.19042],[53.94125, 14.19021]
], { color: "blue", weight: 3, opacity: .7, lineJoin: "round" } ).addTo(map);
</script>
</body>
</html>

Und das ist das Bild und die html, wo der Mittelpunkt der map mit dem in der html übereinstimmt.

code_text

Community Forum

NEWS

maps mit Streckendarstellung

Support us

710

32.5k

81.7k

1.3m