-
Welcome to B4X forum!
B4X is a set of simple and powerful cross platform RAD tools:
- B4A (free) - Android development
- B4J (free) - Desktop and Server development
- B4i - iOS development
- B4R (free) - Arduino, ESP8266 and ESP32 development
Share My Creation Web App: Leaflet Map example
- Thread starter eurojam
- Start date
- Similar Threads Similar Threads
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: '© <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>
this is the part you need to change:
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.
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.
Attachments
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.
Similar Threads
- Article
- Question
