Share My Creation Web App: Leaflet Map example

This is my first web app which uses leaflet as a mapping component. Source is attached.
Bild1.png
 

Attachments

  • leaflet.zip
    3.8 KB · Views: 769

aminoacid

Active Member
Licensed User
Longtime User
yep. when i plug your changes into last night's index.html, i no longer see the gray box.

I just tried this version from a post by @Omar_Para_A. and it works. However, it uses OSM and not mapbox.


index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Web App: Leaflet Map</title>
        <script src="https://unpkg.com/leaflet@latest/dist/leaflet-src.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

        <link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
        <link rel="stylesheet" type="text/css" href="index.css" />
        <script src="/b4j_ws.js"></script>
        <script>
            $( document ).ready(function() {
                b4j_connect("/ws");
            });
        </script>
     </head>
    
     <body>
        <h1>Web App: Leaflet Map example</h1>
        <p>
        <input type="radio" name="goto" value="0" checked>Anywhere Software<br/>
        <input type="radio" name="goto" value="1">eurojams last exit<br/>
        <button id="btngoto">GoTo</button>
        </p>
        <div id="map" style="width: 600px; height: 400px"></div>
     </body>
    
     <script>
        var map = L.map("map").setView([46.947, 7.4448], 12);
        
        L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        
        function gtlatlon(lat, lon, zoom, txt) {
            map.setView([lat, lon], zoom);              // The function goto latlon
            L.marker([lat, lon]).addTo(map).bindPopup(txt).openPopup();
        }

        var marker = new L.Marker([46.947, 7.4448]).on('click', markerOnClick).addTo(map);

        function markerOnClick(e)
        {
            alert("hi. you clicked the marker at " + e.latlng);
        b4j_raiseEvent("markerOnClick_Click", {"latlng" : e.latlng });
        }       

    </script>
 </html>
 

drgottjr

Expert
Licensed User
Longtime User
I GOT IT! hold on a minute
 

drgottjr

Expert
Licensed User
Longtime User
this is the part you need to change:
B4X:
        var map = L.map('map').setView([40, 5], 3);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: ' &copy;<a href="https://www.mapbox.com/about/maps/">Mapbox</a> &copy;<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong> <a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
            tileSize: 512,
            maxZoom: 18,
            zoomOffset: -1,
            id: 'mapbox/streets-v11',
            accessToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
            }).addTo(map);

do you see how the attribution value appears to be multi-line? it isn't. it's 1 line, all the way from to "strong". everything following the
comma after accessToken to the comma following "strong" is 1 line. if you try to copy/paste the code above, it will cause an error (no gray map box). after you copy it, you need to go to the end of each "line" and carefully hit the delete butto to turn the multi-line string back into 1 line. (if you know how to split a string in javascript, you can turn a long line into multiple lines). make sure you use the "&copy;" term for
copyright.

it's very difficult to see in the 2nd image attached, but that long line, is what you're looking for.
 

Attachments

  • 1.png
    1.png
    67.1 KB · Views: 118
  • 2.png
    2.png
    29 KB · Views: 114

aminoacid

Active Member
Licensed User
Longtime User
this is the part you need to change:
B4X:
        var map = L.map('map').setView([40, 5], 3);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: ' &copy;<a href="https://www.mapbox.com/about/maps/">Mapbox</a> &copy;<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong> <a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
            tileSize: 512,
            maxZoom: 18,
            zoomOffset: -1,
            id: 'mapbox/streets-v11',
            accessToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
            }).addTo(map);

do you see how the attribution value appears to be multi-line? it isn't. it's 1 line, all the way from to "strong". everything following the
comma after accessToken to the comma following "strong" is 1 line. if you try to copy/paste the code above, it will cause an error (no gray map box). after you copy it, you need to go to the end of each "line" and carefully hit the delete butto to turn the multi-line string back into 1 line. (if you know how to split a string in javascript, you can turn a long line into multiple lines). make sure you use the "&copy;" term for
copyright.

it's very difficult to see in the 2nd image attached, but that long line, is what you're looking for.

Wow!! I would have never seen that! Thank you so much. It works fine now.

BTW, the reason why I'm using websockets and am interested in @eurojam 's example is because my intent is to use it to display real-time sensor data on the map.

Thanks again for your help getting this sorted out.
 
Top