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: 881
Click to expand...
Beja

Beja

Expert
Licensed User
Longtime User
Hi eurojam and thanks for sharing the source code..
tried to run it but couldn't.. below is the log..
thanks for any explanation.

2016-02-15 21:53:14.228:INFO::main: Logging initialized @432ms
2016-02-15 21:53:14.668:INFO: oejs.Server:main: jetty-9.1.z-SNAPSHOT
2016-02-15 21:53:14.763:WARN: oejh.MimeTypes:main: java.util.MissingResourceException: Can't find bundle for base name org/eclipse/jetty/http/encoding, locale en_US
2016-02-15 21:53:15.052:INFO: oejsh.ContextHandler:main: Started o.e.j.s.ServletContextHandler@51016012{/,file:/C:/WebAppEorujam/leaflet/Objects/www/,AVAILABLE}
2016-02-15 21:53:15.074:INFO: oejs.AbstractNCSARequestLog:main: Opened C:\Users\Xia\Desktop\WyLess\WebAppEorujam\leaflet\Objects\logs\b4j-2016_02_16.request.log
2016-02-15 21:53:15.850:INFO: oejs.ServerConnector:main: Started ServerConnector@5ba23b66{HTTP/1.1}{0.0.0.0:51042}
2016-02-15 21:53:15.851:INFO: oejs.Server:main: Started @2349ms
 
Beja

Beja

Expert
Licensed User
Longtime User
the log was in red color.. and line 3 states a missing resource exception..
So what's the procedure? to run the app and then open the browser and type that URL?
 
F

francisco duran

Member
Licensed User
Longtime User
Hi, i am use your Examples, is exactly that i need. But need can marker click and return info to B4J code, is posible?

thanks
 
TILogistic

TILogistic

Expert
Licensed User
Longtime User
you can add more plugins if you want and use a newer version of leaftet


1627947503496.png
 

Attachments

  • 1.gif
    1.gif
    420.3 KB · Views: 315
aminoacid

aminoacid

Active Member
Licensed User
Longtime User
Hello All. I realize that this is an old thread and I'm breaking the rules here, but it does not make sense to me to start a new thread when my question is directly related to the original post. Sorry about that but here goes for all it's worth ....

I tried the leaflet application posted by @eurojam and of course made sure I used my own mapbox token. However I get a blank map (see below) but the button controls are functional.
Does anybody know if anything has changed with mapbox and/or leaflet since this was posted. I have just started investigating it and found this post, so I though it would be a good start. But I seem to be at a dead-end.

I read somewhere that SSL is required. So I changed the server code to use SSL, but using SSL I don't even get the bank map - just the button controls. I verified that the SSL is setup correctly with the certificates, etc., since it does bring up the web page.

1645649985731.png
 
drgottjr

drgottjr

Expert
Licensed User
Longtime User
you need to go here and read it very carefully. there have been a number of changes.
 
aminoacid

aminoacid

Active Member
Licensed User
Longtime User
drgottjr said:
you need to go here and read it very carefully. there have been a number of changes.
Click to expand...
Thanks for the tip. It was very helpful. I made the recommended changes in "index.html" (see below). But now I don't even get the blank map grey box. Just the button controls.


index.html: 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web App: Leaflet Map</title>
<link rel="stylesheet" href    ="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <script src="/b4j_ws.js"></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>

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script>
        var map = L.map('map');
 
        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: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
            }).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();
            }       

    </script>
    <script>
    //connect to the web socket when the page is ready.
    $( document ).ready(function() {
        b4j_connect("/ws");
    });
    </script>
 </body>
 
drgottjr

drgottjr

Expert
Licensed User
Longtime User
i've used mapbox for years with leaflet. when they introduced some changes,
i adopted them. i use the url shown on the link i posted. i have no problem.

i don't use the app you use, so it's difficult to comment on any possible coding errors.
sorry. everything does seem in order, however (quick glance).

i would have these suggestions:
1) make sure your key wasn't changed as part of mapbox's other changes. i don't remember if i had to get a new key.
2) create a literal url and try it on your desktop browser. do you follow what i mean? if you get a tile, then the error is somewhere in your code.
if you still don't get a tile, then the error is in the url (possibly the key...).

when i key this in my desktop browser, i get a tile
https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/7/74/43?access_token=YOUR_KEY_GOES_HERE
 
Last edited:
aminoacid

aminoacid

Active Member
Licensed User
Longtime User
drgottjr said:
i've used mapbox for years with leaflet. when they introduced some changes,
i adopted them. i use the url shown on the link i posted. i have no problem.

i don't use the app you use, so it's difficult to comment on any possible coding errors.
sorry. everything does seem in order, however (quick glance).

i would have these suggestions:
1) make sure your key wasn't changed as part of mapbox's other changes. i don't remember if i had to get a new key.
2) create a literal url and try it on your desktop browser. do you follow what i mean? if you get a tile, then the error is somewhere in your code.
if you still don't get a tile, then the error is in the url (possibly the key...).
Click to expand...

Thanks for your help. Yes, I did create a literal URL and got a tile. I'll check the code again and see if there is an issue. The only thing I changed in the code from the original code posted here is this part:

changed code: 
        var map = L.map('map');
 
        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: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
            }).addTo(map);

Does not look like anything else needs to be changed. But again, I'm still in learning mode concerning mapbox and leaflet.
 
drgottjr

drgottjr

Expert
Licensed User
Longtime User
did you forget to set the view

var map = L.map('map').setView([40, 5], 3);

when i looked at the code last night, it was there. after your edits, i don't see it (at least in what you posted) ...
 
aminoacid

aminoacid

Active Member
Licensed User
Longtime User
I did remove it to conform to the recommended code changes in the document. Then I added it back in and tried it but there was still no success getting the map to appear. Also, the fact that the gray blank box does not appear (like it did with the classic code) puzzles me.

1645724914308.png
 
drgottjr

drgottjr

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

isn't there some websocket server involved? is it running?

not to make things more confusing, but most of index.html can function BY ITSELF as a little maps app. i don't really see what the web socket server adds.
the whole purpose of leaflet is to run as javascript in a web page. it reaches out to mapbox and loads all the tiles.
 
Last edited:
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
B4J Tutorial [Web] SithasoIONIC7 Mobile WebApp Examples for your Inspiration
Replies
3
Views
751
Mashiane
Mashiane
L
  • Question
B4J Question Append a map to a google sheet
Replies
2
Views
923
le_toubib
L
NGUYEN TUAN ANH
  • Question
B4J Question How to add overlay image to map in Leaflet ?
Replies
0
Views
665
NGUYEN TUAN ANH
NGUYEN TUAN ANH
NGUYEN TUAN ANH
  • Question
B4J Question [SOLVED],How to add overlay image to map in Leaflet ?
Replies
16
Views
4K
NGUYEN TUAN ANH
NGUYEN TUAN ANH
Beja
  • Question
B4J Question [Solved] Goolgle maps APIKey
Replies
13
Views
2K
Informatix
Informatix
Top