Leaflet: Marker mit title **und** icon möglich? – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Leaflet: Marker mit title **und** icon möglich? Thu, 01 Oct 20 16:33:05 Z https://forum.selfhtml.org/self/2020/oct/01/leaflet-marker-mit-title-und-icon-moglich/1776063#m1776063 https://forum.selfhtml.org/self/2020/oct/01/leaflet-marker-mit-title-und-icon-moglich/1776063#m1776063 <p>Moin,</p> <p>eine Landkarte hat die Marker vonOpenStreetMap (blau) und drei selbst kreierte Marker <a href="/images/cd66025e-0402-11eb-b8ac-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/cd66025e-0402-11eb-b8ac-b42e9947ef30.png?size=medium" alt="audio" loading="lazy"></a> <a href="/images/eb1d1b34-0402-11eb-aa38-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/eb1d1b34-0402-11eb-aa38-b42e9947ef30.png?size=medium" alt="mitglied" loading="lazy"></a> <a href="/images/fa9c5142-0402-11eb-b67c-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/fa9c5142-0402-11eb-b67c-b42e9947ef30.png?size=medium" alt="mitglied audio" loading="lazy"></a></p> <p>Den Standard-Markern konnte ich einen <code>title</code> zuweisen fürs Übermausen (mouseover), das ist für meine individuellen Marker nicht gelungen</p> <pre><code class="block language-js"><span class="token comment">// Audio-Marker fuer remso-Mitglieder (rot) oder Webseiten mit Hoerproben</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'VIP'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">&&</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'audio_kz'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> marker <span class="token operator">=</span> <span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">marker</span><span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">L<span class="token punctuation">.</span>LatLng</span><span class="token punctuation">(</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'geo_breite'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'geo_laenge'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> marker_rot_audio<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'firma1'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">+</span><span class="token string">', '</span> <span class="token operator">+</span>row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'ort_name'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'VIP'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">></span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> marker <span class="token operator">=</span> <span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">marker</span><span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">L<span class="token punctuation">.</span>LatLng</span><span class="token punctuation">(</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'geo_breite'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'geo_laenge'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> marker_rot<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'firma1'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">+</span><span class="token string">', '</span> <span class="token operator">+</span>row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'ort_name'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'audio_kz'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> marker <span class="token operator">=</span> <span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">marker</span><span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">L<span class="token punctuation">.</span>LatLng</span><span class="token punctuation">(</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'geo_breite'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'geo_laenge'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> marker_blau_audio<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'firma1'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">+</span><span class="token string">', '</span> <span class="token operator">+</span>row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'ort_name'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> marker <span class="token operator">=</span> <span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">marker</span><span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">L<span class="token punctuation">.</span>LatLng</span><span class="token punctuation">(</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'geo_breite'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'geo_laenge'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'firma1'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">+</span><span class="token string">', '</span> <span class="token operator">+</span>row<span class="token punctuation">[</span>k<span class="token punctuation">[</span><span class="token string">'ort_name'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Die Syntax für gleichzeitig title und icon habe ich nirgends gefunden, meine Versuche brachten keinen Erfolg.</p> <p>Wer weiß, wie's geht?</p> <p>Gruß, Linuchs</p> Leaflet: Marker mit title **und** icon möglich? Thu, 01 Oct 20 17:02:17 Z https://forum.selfhtml.org/self/2020/oct/01/leaflet-marker-mit-title-und-icon-moglich/1776064#m1776064 https://forum.selfhtml.org/self/2020/oct/01/leaflet-marker-mit-title-und-icon-moglich/1776064#m1776064 <p>Hallo Linuchs</p> <pre><code class="block language-javascript"><span class="token comment">// Marker mit eigenem Icon, Title und Klickevent</span> <span class="token keyword">var</span> logo <span class="token operator">=</span> <span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">iconUrl</span><span class="token operator">:</span> <span class="token string">'S-Logo-vektor.svg'</span><span class="token punctuation">,</span> <span class="token literal-property property">iconSize</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">41</span><span class="token punctuation">,</span> <span class="token number">41</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">iconAnchor</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token constant">L</span><span class="token punctuation">.</span><span class="token function">marker</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">52.5</span><span class="token punctuation">,</span> <span class="token number">13.4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">icon</span><span class="token operator">:</span> logo<span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Marker mit eigenem Icon"</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addTo</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>console<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Gruß<br> Jürgen</p> danke und Zusatzfrage Fri, 02 Oct 20 10:05:18 Z https://forum.selfhtml.org/self/2020/oct/01/leaflet-marker-mit-title-und-icon-moglich/1776071#m1776071 https://forum.selfhtml.org/self/2020/oct/01/leaflet-marker-mit-title-und-icon-moglich/1776071#m1776071 <p>Hallo Jürgen,</p> <p>danke, so funktioniert das.</p> <p>Für die Datenpflege kann ich (wenn ich als Admin angemeldet bin) einen Link in der Sprechblase anklicken, der zum Pflegeprogramm führt. Etwa, um das Vorhandensein von Audios oder Videos anzukreuzen.</p> <p>Nach korrigiertem Stammsatz möchte ich die Sprechblase überprüfen.</p> <p>Beim Neuladen der Karte zeigt sie ihren Anfangs-Stand. Ich muss schieben und zoomen, bevor ich den Marker für diesen Chor anklicken kann.</p> <p>Gibt es einen einfachen Trick, bei Taste [F5] (Neuladen) die bisherige Position und Zoom der Karte beizubehalten?</p> <p>Auf Text-Webseiten bleibt ja auch die gescrollte Position erhalten.</p> <p>Sonst könnte ich einen Link in die Sprechblase einbauen, der zur gezielten Anzeige einer geo-Koordinate führt.</p> <p>Gruß, Linuchs</p> danke und Zusatzfrage Fri, 02 Oct 20 10:31:18 Z https://forum.selfhtml.org/self/2020/oct/01/leaflet-marker-mit-title-und-icon-moglich/1776072#m1776072 https://forum.selfhtml.org/self/2020/oct/01/leaflet-marker-mit-title-und-icon-moglich/1776072#m1776072 <p>Hallo Linuchs,</p> <blockquote> <p>Gibt es einen einfachen Trick, bei Taste [F5] (Neuladen) die bisherige Position und Zoom der Karte beizubehalten?</p> </blockquote> <p>mit [F5] wird die Seite neu geladen und das Javascript baut die Karte neu auf. Wenn du da etwas von der vorherigen Ansicht übertragen willst, fält mir nur der Weg über den localStorage ein. Evtl. könntest du auch die aktuelle Position und Zommstufe als Parameter an den URL anhängen.</p> <p>Gruß<br> Jürgen</p> danke und Zusatzfrage Mon, 05 Oct 20 11:04:03 Z https://forum.selfhtml.org/self/2020/oct/01/leaflet-marker-mit-title-und-icon-moglich/1776214#m1776214 https://forum.selfhtml.org/self/2020/oct/01/leaflet-marker-mit-title-und-icon-moglich/1776214#m1776214 <blockquote> <p>Evtl. könntest du auch die aktuelle Position und Zommstufe als Parameter an den URL anhängen.</p> </blockquote> <p>Ja, habe ich gemacht, nun muss man gezielt auf eine kleine Schaltfläche klicken, [F5] wäre bequemer.</p>