Leaflet mapping display

[Netpower8]

anybody working on interfacing with leaflet mapping?

[Charles Wilt]

Works fine as an HTML or hybrid app.

[Netpower8]

i meant anybody working on leaflet mapping as a droidscript plugin.
i have started some basic interaction of leaflet html with ds js
commands. looking for collaboration to improve this more.

[Charles Wilt]

Sorry. Plugin wasn't mentioned in the original post. At this time I am not looking to make or collaborate on a plugin, but if you have questions I may be able to anwser them.

[Fatih Elitas]

in a web view.
then assign these codes to the buttons



btn3 = app.CreateButton( "3", 0.05 );
btn3.SetOnTouch( function (lat, lng, zoom)
{
web.Execute("map.locate({setView: true})");
});

/////////////////////////////////////////// taralı alan üçgen oluşturuyor.

btn4 = app.CreateButton( "4", 0.05 );
btn4.SetOnTouch( function ()
{
mf.AddPoly('[51.509, -0.08],[51.503, -0.06],[51.51, -0.047]', 'green', 'green', 0.5)
})

////////////////////////////////////////// konuma işaret koyuyor

btn5 = app.CreateButton( "5", 0.05 );
btn5.SetOnTouch( function (lat, lng)
{
// web.Execute("map.locate({setView: false})");

web.Execute("map.removeLayer(at)")

});

/////////////////////////////////////////////// Popup açıyo

btn6 = app.CreateButton( "6", 0.05 );
btn6.SetOnTouch( function ()
{
web.Execute( "L.marker([51.5, -0.09]).addTo(map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.').openPopup()");

});

////////////////////////////////////////////////// Konumları çiziyo

btn7 = app.CreateButton( "7", 0.05 );
btn7.SetOnTouch( function ()
{

mf.SetView(45.51, -122.68, 2);
web.Execute("var at = L.polyline([[45.51, -122.68],[37.77, -122.43],[34.04, -118.2]], {color: 'red'}).addTo(map)");
});

////////////////////////////////////////////////// Piksel cinsinden x ve y koordinatlarıyla haritayı hareket ettirir

btn8 = app.CreateButton( "8", 0.05 );
btn8.SetOnTouch( function ()
{

web.Execute("map.panBy(L.point(-20,0))");
});



btn9 = app.CreateButton( "9", 0.05 );
btn9.SetOnTouch( function ()
{

web.Execute("L.control.scale({imperial:false}).setPosition('bottomleft').addTo(map)")

});



btn10 = app.CreateButton( "10", 0.05 );
btn10.SetOnTouch( function ()
{
web.Execute("map.stopLocate()");
});

/////////////////////////////////////////////// Katman ekle

btn11 = app.CreateButton( "11", 0.05 );
btn11.SetOnTouch( function ()
{
web.Execute("L.control.layers( {OpenStreetMap: osm, OpenStreetMap2: osm2, OpenStreetMap3: osm3 , OpenStreetMap4: osm4 , OpenStreetMap5: osm5,OpenStreetMap6: osm6, OpenStreetMap7: osm7,OpenStreetMap8: osm8,OpenStreetMap9: osm9,OpenStreetMap10: osm10}).addTo(map)");

//{'OpenStreetMap3': osm, 'OpenStreetMap4': osm2} hepsi yada hiçbiri tik olabilir.
//{ OpenStreetMap3 : osm, OpenStreetMap4 : osm2} birinden biri seçili oluyor.
});



btn12 = app.CreateButton( "12", 0.05 );
btn12.SetOnTouch( function ()
{
web.Execute("map.locate({watch: true, enableHighAccuracy: true,setView: true})");
});

btn10 = app.CreateButton( "10", 0.05 );
btn10.SetOnTouch( function ()
{
web.Execute("map.stopLocate()");
});

btn10 = app.CreateButton( "10", 0.05 );
btn10.SetOnTouch( function ()
{
web.Execute("map.stopLocate()");

[Fatih Elitas]

These codes also work for mapquest

[Fatih Elitas]

I would like to make a plugin but I've never done it before.

[Netpower8]

thanks for the sample code list...

am more comfortable with programming using javascript plus i like the error checking support on DS. if there is an error in the script we can get the line position of the error. i dont like to do sending of data (injecting data to html) using web.Execute(). what i did is using the sample here i the forum where html communicate with your js app by sending json obj data back and forth. it works but my main problem is there is no support on error checking on the html side. if i miss just a comma "," on a object like this

var obj={
"test": 123 <--- comma missing here
"test2": "text"
}

the leaflet html wont load properly. and its hard to search around the code for the TINY error.

but if this works the plugin you can use javascript to make a window of the leaflet map and any map action it will pass to your javascript app. then you can issue command in js ide normally the plugin handles the communication to the HTML map for you.

example making a mapclick action youdont need to code on the html map.on('click',onMapClick);
instead you can do this in js on ds side by simply calling
mapclick(handleClick);

function mapclick(callback){
//pass command to html map.setting up callback
}

when user click the map you will get an obj that has
obj{cmd:'mapclick',lng:51.5,lat:-0.09}
with that json obj you can do whatever you want

just want to make interfacing with html map easier but the html error checking support is really no support. the map just wont load and finding the tiny error takes a lot of time.

any ideas to make this easier (finding error on html side) ?

[Netpower8]

i dont like to deal with the html map window. (bec there is no error checking support. the html just wont load if there is a tiny error, finding the error after having about 500+ lines starts to become irritating.)
by making a plugin. the plugin takes care of the html map actions. we just only need to declare the size of the html map window and a callback where all activities on the html map window will call our javascript callback and from there we just process the json object it passed to use. should we make changes we call a method that takes care of communicating with the html map window.

[Netpower8]

made some progress...
i finally able to make the leaflet command available to javascript app.

one can code in ds javascript dealing with the leaflet html window indirectly.
in ds ide window....

before
web.Execute("map.setView(new L.LatLng("+lat+","+lng+"),"+zoom+");");
ˆˆˆˆˆˆˆˆˆˆˆ using this command to inject to the html map

into this inside ds which i'm more comfortable.
map.setView([lat,lng]),zoom);

no more web.Execute() command. i just let the function handle that and pass
just pass the command to the html map window.

[Fatih Elitas]

congratulations :)

[Netpower8]

Yeah it was great. But just a few hours ago when thru a brick wall. Trying to figure this out. Maybe some one has aan idea there.

Currently i have coded access to leaflet map (18methods), getting map state(10methods), marker(9methods), currently doing popup.

Here is the brick wall... Some of leaflet methods returns an object or reference link. I kept trying "TO SEND" the obj link back to ds app, tried a few methods. All failed. The link disaappears during transfer. Cant use json stringify on it. Cant use app.savetext am stump on how to transfer the reference link beacuse its needed when you need to perform other methods. Example when you create a marker the result output is an obj. Later you need the obj to call a remove (if you want to remove it)

Anybodu here have any idea on how to do this? Transfer obj pointer reference from html form to ds app.

[Fatih Elitas]

If I didn't get it wrong, did you want to ask this?

to add;
web.Execute("o = L.marker(["+lat+,+lon+"]).addTo(map);");

to remove;
web.Execute("map.removeLayer(o)")

[Netpower8]

Thanks for the sample.

[Netpower8]

So how do you get a webExcute reply?

Like getting icon file
Setting is no problem like this

web.Execute("icn.setIcon("+<icon file>+");");

How about getting a reply?
web.Execute("icn.getIcon()");

So where can i get the result of getIcon() command?

[Kallikratidas]

the only way I would suggest for WebView and Main App communication, is the Console. Use the WebView.SetOnConsole(cb);

Then use a parsed json data string.

//WebView
var data = {
type:"result1",
value:"myValue"
};
console.log(JSON.stringify(data));

//Main App
function WebView_OnConsole(data)
{
var data = null;
try{
data = JSON.stringify(data);
}catch(e){}
if(!data)
return;
switch(data.type)
{
case "result1": {app.Alert(data.value);} break;
case "result2": {/*do something*/}break;
}
}

I hope that helps.

[Netpower8]

This is ok but it would mean you expect specific value.

On this sample the type is a string. It wont work if its a value output.

[Fred Wray]

So far so far away

[Netpower8]

The output value is unpredicatable. Since most object can give output. Such as objects like map, layers, popup, polygon (outputs arrays) and others...

[Kallikratidas]

The value doesn't require to be a string. It can be an object as well.
Except for the uncoppabled object cases like the Math object, the Window Object, etc.

[Netpower8]

Anybody know how to change the marker? Can someone give me a sample?

[Kallikratidas]

Well, sorry for this mistake. I hadn't seen it. I apologize for this. I misprinted Stringify instead of parse.

//WebView
var data = {
type:"result1",
value:"myValue"
};
console.log(JSON.stringify(data));

//Main App
function WebView_OnConsole(data)
{
var data = null;
try{

data = JSON.parse(data);

[Oreste Parlatano]

This a function I wrote well functioning (html development), see picture attached 

    function mapgeo() {

        loc.SetOnChange(function(data) {

            $('#mapgeo').empty();

            lat = data.latitude;

            lon = data.longitude;

            acc = data.accuracy;

            pro = data.provider;

            app.SaveNumber('lat',lat);

            app.SaveNumber('lon',lon);

        var map, vectorLayer, tile;

            var centre_here = ol.proj.fromLonLat([lon,lat]);

        vectorLayer = new ol.layer.Vector({

            source: new ol.source.Vector({ projection: 'EPSG:4326'}),

                style: [

            new ol.style.Style({

                stroke: new ol.style.Stroke({

                color: 'blue',

                width: 3

                })

            })

            ]

        });

            tile = new ol.layer.Tile({ source: new ol.source.OSM() });

            tile.getSource().on('tileloadstart', function() { $('#mapinf').text(vars[lang].msg[5]) });

            tile.getSource().on('tileloadend', function() { $('#mapinf').text(

                                                                            vars[lang].lab[6] + 

                                                                            ' ' +

                                                                            rad +

                                                                            ' ' +

                                                                            vars[lang].lab[7]

                                                                        ) });

            tile.getSource().on('tileloaderror', function() { $('#mapinf').text(vars[lang].msg[7]) });

        map = new ol.Map({

                layers: [tile, vectorLayer],

    target: 'mapgeo'

    });

        vectorLayer.getSource().addFeature(new ol.Feature(new ol.geom.Circle(centre_here, rad * 1000)));

        map.getView().fit(vectorLayer.getSource().getExtent(), map.getSize());

            loc.Stop();

        }); // loc.SetOnChange

        loc.SetRate(10); // seconds

    loc.Start();

    }

[Netpower8]

@kalli
Thanks for the update. I was able to find a way to make a return output. It took me several days to of trial and error (actually trials. The html map does not output errors so its difficult to find out if the commands are getting thru or not) but anyway it working already.

@oreste
Thanks for the sample. Still have not implemented a circle code on it but i need a marker icon code. I want to replace the standard marker icon. Example the standard icon showing where you are is a reverse droplet icon. I have an icon of a hamburger (showing as fastfood) and use it as a marker for a pint on a place instead of the reverse droplet icon.

Anybody who can show me how its done. A working code would be helpful. Thanks

[Netpower8]

Solved the icon change problem already.

[Fatih Elitas]

I use this code when showing location data on the map;

function addloca_js(thisLat, thisLong, thisEle, thisSpd)
{
loc_Count++;

loca = new Loc_obj_js(thisLat, thisLong, thisEle, thisSpd);
locate[loc_Count] = loca;

kayıt_veri = JSON.stringify(locate);

if(loc_Count == 0)
{
locate[0].time = date_iso()
locate[0].name = "GPeak Pro"
kayıt_veri = JSON.stringify(locate);
}

web.Execute("map.removeLayer(a)") // clear
web.Execute( "a=L.polyline(" + kayıt_veri +").addTo(map)");// draw

çizilen_rota = true;

}

function Loc_obj_js(iLat, iLong, iEle, iSpd)
{
this.lat = iLat;
this.lon = iLong;
this.ele = iEle;
this.spd = iSpd;
//this.dist= iDist.toFixed();
}

but when I draw each location on the map, I have to delete the previous drawings. otherwise, if I want to clear the whole map, the map is not cleared.

so how do i use the forEach function.

[Fatih Elitas]

How is the plugin work going for the leaflet?

30 Mayıs 2020 Cumartesi tarihinde saat 12:38:34 UTC+3 itibarıyla Fatih Elitas şunları yazdı: