Share My Creation Web App: Leaflet Map example

eurojam · Feb 7, 2016

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

aminoacid · Feb 24, 2022

drgottjr said:
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 · Feb 24, 2022

I GOT IT! hold on a minute

drgottjr · Feb 24, 2022

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 "©" term for
copyright.

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

aminoacid · Feb 24, 2022

drgottjr said:
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: ' ©<a href="https://www.mapbox.com/about/maps/">Mapbox</a> ©<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 "©" 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.

Share My Creation Web App: Leaflet Map example

Attachments

aminoacid

Active Member

drgottjr

Expert

drgottjr

Expert

Attachments

aminoacid

Active Member

Similar Threads

Share My Creation Web App: Leaflet Map example

Attachments

aminoacid

Active Member

drgottjr

Expert

drgottjr

Expert

Attachments

aminoacid

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency