maps mit Streckendarstellung

bahnuhr

tausche diesen Scriptteil aus:

            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 latlngs = [" + poly + "];\nvar polyline = L.polyline(latlngs, {color: 'blue', weight: 3, opacity: .7, lineJoin: 'round'}).addTo(map);\n"
            string = string + "map.fitBounds(polyline.getBounds());\n"
            string = string + '</script>\n</body>\n</html>'

Dann wird durch
fitbounds
die Karte automatisch gezoomt. Die Strecke ist dann komplett im Bildschirm.

mfg
Dieter

liv-in-sky

@bahnuhr danke dir - schaue mir das morgen an - weißt du zufällig, wie man text postionieren kann ? ansonsten schaue ich in die doku

bahnuhr

@liv-in-sky
ja, müsste so gehen:

var marker = L.marker([-41.29042, 174.78219])
            .addTo(map)
            .bindPopup("<b>Te Papa</b><br>Museum of New Zealand.")
            .openPopup();

Anbei eine gute Anleitung:
https://leanpub.com/leaflet-tips-and-tricks/read

liv-in-sky

@bahnuhr

die marker mag ich nicht :-(

dachte eher an sowas - falls du es brauchen kannst (123)

Image 077.png

https://gis.stackexchange.com/questions/360293/add-something-into-l-circlemarker

einen style-tag einfügen

          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
          crossorigin=""/></head>
<body>

<style>
  .circle-with-txt {
    position: relative;
    color: red;
    font-size: 12px;
    font-weight: bold;
    width: 40px;
    height: 40px;
  }
  .txt {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
</style>

das script im script-tag:

    <script>

function circleWithText(latLng, txt, circleOptions) {
  var icon = L.divIcon({
    html: '<div class="txt">' + txt + '</div>',
    className: 'circle-with-txt',
    iconSize: [40, 40]
  });
  var circle = L.circleMarker(latLng, circleOptions);
  var marker = L.marker(latLng, {
    icon: icon
  });
  var group = L.layerGroup([circle, marker]);
  return(group);
}

der aufruf:

circleWithText([48.495144, 11.7066], '123', {radius: 30}).addTo(map);

bahnuhr

@liv-in-sky
hab das ganze nun mal mit google maps probiert.

Was ich noch nicht hinbekomme ist das Thema: fitbounds.

Vielleicht hast du mal ein Bespiel (oder jemand anders).

mfg

liv-in-sky

@bahnuhr
du bist mir meilen voraus - ich kann immer nur eine halbe stunde etwas machen und das ist nicht sehr effektiv - fitbounds sagt mir noch nicht mal was :-(

bisher habe ich mal das erzeugt - route wurde heute gefahren

Image 080.png

liv-in-sky

@bahnuhr sagte in maps mit Streckendarstellung:

fitbounds.

weiß nicht, ob du das mal testen willst

habe mal in chatgpt eingegeben (aber nicht getestet):

was ist fitbounds in der leaflet bibliothek

und anschliessend :

geht das auch mit polyline

Image 082.png

vielleicht findest du da was brauchbares

ich brauche es ja mit circles, da mir die punkte als route besser gefallen - mal sehen, wann ich zum testen komme

bahnuhr

@liv-in-sky sagte in maps mit Streckendarstellung:

leaflet

leaflet hatte ich hinbekommen.
Was nicht geklappt hatte war das ganze bei google maps.

Hab ich aber jetzt auch hinbekommen.

Danke dir trotzdem.

Stelle code mit google maps dann mal ein.

liv-in-sky

@bahnuhr sagte in maps mit Streckendarstellung:

Stelle code mit google maps dann mal ein

das wäre super - braucht man da ein google login ?

bahnuhr

@liv-in-sky sagte in maps mit Streckendarstellung:

google login ?

ja, google key brauchst du.
Ohne klappt es nicht.

liv-in-sky

@bahnuhr

ich hasse das bei google - macht alles so mega komplex

liv-in-sky

@bahnuhr

langsam nimmt es form an - paar kleinigkeiten sind noch zu machen - danke für das animieren und einstellen deiner scripte- hätte sonst wohl nicht damit begonnen

rot: blitzer
grün : wo bin ich gerade
schwarz: die tour
plus die temperatur für winter(glatteis)

alles online verfolgbar (traccar) - lasse mir das u.a. im auto anzeigen

Image 084.png

bahnuhr

@liv-in-sky
auch gut.
Stell doch dein Script mal ein.

Was ist traccar ?

liv-in-sky

@bahnuhr traccar ist ein client auf dem handy und ein server im netzwerk (free) für geolocation

das script enthält alle meine coordinaten - und ist schnell zusammengebastelt und war nicht zur verbreitung gedacht

falls du es gerne hättest - gerne über email (dann im chat angeben)

bahnuhr

@liv-in-sky

alles klar
mich würde insbesondere die Punkte:
Kreis, Blitzer, Temp
interssieren.

Hast PN. Danke vorab.

liv-in-sky

@bahnuhr

ok - die blitzer sind hier gemacht: https://forum.iobroker.net/post/512330

temperatur ist einmal ein sonoff mit messung daheim - und netatmo-crawler - adapter

das blockly ist in einem ganzen system integriert - ich schreibe alle routen in jsons um die zur abrechnung (fahrkosten) zu haben - daher nur als bild - darin wird auf eine distance von 500 meter die koordinaten in ein json gspeichert, welches dann die html datei mit den circles erzeugt

Image 085.png

die funktion leaflet-writing schreibt ein fortlaufendes json für all dir koordinaten

let jarry=JSON.parse(getState("0_userdata.0.CONTROL-OWN.TRACCAR.LeafletJSON").val);

jarry.push({
          "pos":pos,
          "stamp":stamp,
          "geozaun":geozaun


})

setState("0_userdata.0.CONTROL-OWN.TRACCAR.LeafletJSON",JSON.stringify(jarry));

die funktion leaflet-draw macht das eigentliche html file und speichert das

hier zum download - kenntwort schicke ich dir
am besten du öffnest es mit notepad++ , damit alle zeichen richtig übersetzt werden

leaflet-draw.7z

liv-in-sky

@bahnuhr

traccar adapter sieht so aus:

Image 086.png

netatmo-crawler:

Image 087.png

liv-in-sky

@bahnuhr

das beste, was ich bis jetzt gefunden habe, um text darzustellen - mit transparenten hintergrund

Image 088.png

im style tag:

  .my-label {
  @charset "utf-8";
    position: absolute;
    width:150px;
    font-size:35px;
	background:transparent;
}

einbinden im script tag:

var marker = new L.marker([50.539, 11.99], { opacity: 0.01 }); //opacity may be set to zero
marker.bindTooltip('17 &deg;C', {permanent: true, className: "my-label", offset: [0, 50] });
marker.addTo(map);

padman

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

liv-in-sky

@padman

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

leaflet-draw-changed.7z

Community Forum

NEWS

maps mit Streckendarstellung

Support us

619

32.5k

81.8k

1.3m