Jump to content

Leaflet OpenStreetMaps Example


GerhardV

Recommended Posts

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

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

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.

opera_2018-09-11_17-36-09.png

opera_2018-09-11_17-36-38.png

Leaflet Maps Example.zip

  • Like 2
  • Upvote 1
Link to comment
Share on other sites

  • 2 months later...

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.

 

Link to comment
Share on other sites

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);

 

 

  • Like 2
Link to comment
Share on other sites

  • 4 years later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...