Leaflet OpenStreetMaps Example

[GerhardV]

An example showing how to incorporate Leaflet and OpenStreetMaps into UniGUI.

The following lines must be added to the ServerModule | CustomFiles:

• https://unpkg.com/leaflet@1.3.4/dist/leaflet.css
• https://unpkg.com/leaflet@1.3.4/dist/leaflet.js

See the Mapbox Tab in the application for more details.

P.S. I am no expert with Leaflet - please see the following for more details:

Getting started with Leaflet

OpenStreetMap

Mapbox - the accessToken used for this is a public one...you can register to receive your own.

Leaflet Maps Example.zip

[picyka]

very well!

[albertovesx]

Thank you.

[belo]

Congratulations!

[jahlxx]

Hi friend,

This is great. Good job!!

Can I make 2 questions to you?

- Can assign some text to markers,  and show a tooltip when click? (I'll have some markers and a different message for every one)

- Can have satellite view?

Thanks in advance.

 

[jahlxx]

I answer myself:

 

1) 

   UniSession.AddJS('var marker = L.marker([37.184203, -5.847710]).addTo(leafletMap).bindPopup("text");');

 

2) in afteruodatehtml in clientevents of the htmlframe:

 

var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

var googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

var googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

 

      leafletMap = L.map('uni_map_leaflet', {
                layers: [googleHybrid] // only add one!
            })
            .setView([37.18161024, -5.84075043], 10);

        var baseLayers = {
            "Hybrid": googleHybrid,
            "Street": googleStreets,
            "Satellite": googleSat,
            "Terrain": googleTerrain,
            "Catastro": catastro
        };

        L.control.layers(baseLayers).addTo(leafletMap);

 

 

[christian2000]

Hello everybody! Why I can not download example?

[Sherzod]

7 hours ago, christian2000 said:

Why I can not download example?