As many currently know Googlemaps' Webapi do not work correctly on the webview because the latest versions use webgl

I decided to do a new library that uses OpenMap and Leaflet with the same methods and events of the Googlemaps bookshop. I also created a second OpenMapext class that adds some Googlemapsext commands to maintain compatibility and minimize changes to the existing code. The code we used with GMAPS with Javaobject to obtain extra functions is no longer usable. Tested with Java 19,

jSD_OpenMaps

Author:
Star-Dust
Version: 1.16
  • CameraPosition
    • Functions:
      • Class_Globals As String
      • Initialize (Lat As Double, Lng As Double, Zoom As Float) As String
        Initializes the object. You can add parameters to this method if needed.
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • Target As String
      • ToString As String
    • Properties:
      • Lat As Double [read only]
      • Lng As Double [read only]
      • Zoom As Float [read only]
  • LatLng
    • Fields:
      • Latitude As Double
      • Longitude As Double
    • Functions:
      • Class_Globals As String
      • Initialize (Lat As Double, Lng As Double) As String
        Initializes the object. You can add parameters to this method if needed.
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
  • MapCircle
    • Functions:
      • Class_Globals As String
      • Initialize (vCenter As LatLng, vRadius As Double, Visble As Boolean, id As String, WebView As JavaObject) As String
        Initializes the object. You can add parameters to this method if needed.
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
    • Properties:
      • Center As LatLng [read only]
      • ID As String [read only]
      • Radius As Double [read only]
      • Visible As Boolean
  • MapInfoWindow
    • Functions:
      • Class_Globals As String
      • Initialize (vContent As String, vPosition As LatLng, ID As String) As String
        Initializes the object. You can add parameters to this method if needed.
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
    • Properties:
      • Content As String [read only]
      • ID As String [read only]
      • Position As LatLng [read only]
  • MapLabel
    • Functions:
      • Class_Globals As String
      • Initialize (vPosition As LatLng, vText As String, vPermanent As Boolean, vID As String, WebView As JavaObject) As String
        Initializes the object. You can add parameters to this method if needed.
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
    • Properties:
      • ID As String [read only]
      • Permanent As Boolean [read only]
      • Position As LatLng [read only]
      • Text As String
  • MapPolygon
    • Functions:
      • Class_Globals As String
      • Initialize (Visble As Boolean, ID As String, Point As List, StrokeWidth As Int, StrokeColor As Paint, FillColor As Paint, Opacity As Double, WebView As JavaObject) As String
        Initializes the object. You can add parameters to this method if needed.
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
    • Properties:
      • FillColor As Paint [read only]
      • ID As String [read only]
      • LineColor As Paint [read only]
      • LineWidth As Int [read only]
      • Opacity As Float [read only]
      • Points As List [read only]
        List of LatLng
      • Visible As Boolean
  • MapPolyline
    • Functions:
      • Class_Globals As String
      • Initialize (Visble As Boolean, ID As String, Point As List, StrokeWidth As Int, StrokeColor As Paint, WebView As JavaObject) As String
        Initializes the object. You can add parameters to this method if needed.
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
    • Properties:
      • ID As String [read only]
      • LineColor As Paint [read only]
      • LineWidth As Int [read only]
      • Points As List [read only]
        List of LatLng
      • Visible As Boolean
  • Marker
    • Functions:
      • Class_Globals As String
      • CreateLabel (Text As String) As String
        Create Label on Marker
      • Initialize (vPosition As LatLng, vTitle As String, vIconUri As String, vVisible As Boolean, vID As String, WebView As JavaObject) As String
        Initializes the object. You can add parameters to this method if needed.
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • UpdateLabel (Text As String) As String
        Set Text empty for remove
    • Properties:
      • Draggable
      • IconUri As String [read only]
      • IconUrl As String [read only]
      • ID As String [read only]
      • Position As LatLng [read only]
      • Title As String [read only]
      • Visible As Boolean
  • OpenMaps
    • Events:
      • CameraChange (CamPosition As CameraPosition)
      • CircleClick (SelectedCircle As MapCircle)
      • Click (Point As LatLng)
      • MarkerClick (SelectedMarker As Marker)
      • MouseMove (Point As LatLng)
      • PolygonClick (SelectedPolygon As MapPolygon)
      • PolylineClick (SelectedPolyline As MapPolyline)
      • Ready
      • RightClick (Point As LatLng)
    • Fields:
      • MAP_TYPE_CARTO As Int
      • MAP_TYPE_ESI As Int
      • MAP_TYPE_ESI_SATELLITE As Int
      • MAP_TYPE_HYBRID As Int
      • MAP_TYPE_NORMAL As Int
      • MAP_TYPE_SATELLITE As Int
      • MAP_TYPE_TERRAIN As Int
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddCircle (ll As LatLng, Radius As Double, StrokeWidth As Float, StrokeColor As Paint, FillColor As Paint, Opacity As Double) As MapCircle
        Adds a circle To the map.
        Center - Position of the circle center.
        Radius - Circle radius.
        StrokeWidth - Stroke width.
        StrokeColor - Stroke color.
        FillColor - Inner color.
        Opacity - Inner color opacity. Value between 0 To 1.
      • AddInfoWindow (Content As String, Position As LatLng) As MapInfoWindow
        Opens an info window with the given HTML content at the specified position.
      • AddInfoWindow2 (Content As String, Position As LatLng, MaxWidth As Int) As MapInfoWindow
        Opens an info window with the given HTML content at the specified position. It cannot be larger than MaxWidth (in pixels).
      • AddMarker (Lat As Double, Lng As Double, Title As String) As Marker
        Adds a marker to the map.
      • AddMarker2 (Lat As Double, Lng As Double, Title As String, IconUri As String) As Marker
        Adds a marker To the map with a custom icon.
        The IconUri must point To an online image Or an image from the assets folder.
        In the later Case the custom icon will only appear in Release mode.
        Example: <code>gmap.AddMarker2(10, 10, "This is a test", File.GetUri(File.DirAssets, "SomeIcon.png"))</code>
        see https://kml4earth.appspot.com/icons.html for icons
      • AddMarker2Label (Lat As Double, Lng As Double, Title As String, Label As String, IconUri As String) As Marker
        Adds a marker To the map with a custom icon and label
        The IconUri must point To an online image Or an image from the assets folder.
        In the later Case the custom icon will only appear in Release mode.
        Example: <code>gmap.AddMarker2(10, 10, "This is a test", File.GetUri(File.DirAssets, "SomeIcon.png"))</code>
      • AddMarker3 (Lat As Double, Lng As Double, Title As String, IconUri As String, Width As Int, Height As Int) As Marker
        Adds a marker To the map with a custom icon.
        The IconUri must point To an online image Or an image from the assets folder.
        In the later Case the custom icon will only appear in Release mode.
        Example: <code>gmap.AddMarker2(10, 10, "This is a test", File.GetUri(File.DirAssets, "SomeIcon.png",32,32))</code>
        see https://kml4earth.appspot.com/icons.html for icons
      • AddMarker3bis (Lat As Double, Lng As Double, Title As String, IconUri As String, Width As Int, Height As Int) As Marker
        Adds the marker, hitting it in height in the coordinate indicated
      • AddMarker3Label (Lat As Double, Lng As Double, Title As String, Label As String, IconUri As String, Width As Int, Height As Int) As Marker
        Adds a marker To the map with a custom icon and label.
        The IconUri must point To an online image Or an image from the assets folder.
        In the later Case the custom icon will only appear in Release mode.
        Example: <code>gmap.AddMarker2(10, 10, "This is a test", File.GetUri(File.DirAssets, "SomeIcon.png",32,32))</code>
      • AddPolygon (Points As List, StrokeWidth As Float, StrokeColor As Paint, FillColor As Paint, Opacity As Double) As MapPolygon
        Adds a polygon To the map.
        Points - A list Or Array of LatLng points.
        es. array(array(41.90, 12.49),array(41.80, 12.50),array(41.85, 12.60))
        StrokeWidth - Stroke width.
        StrokeColor - Stroke color.
        FillColor - Inner color.
        Opacity - Inner color opacity. Value between 0 To 1.
      • AddPolyline (Points As List, StrokeWidth As Float, StrokeColor As Paint) As MapPolyline
        Adds a polyline To the map.
        Points - A list Or Array of LatLng points.
        Width - Line width.
        Color - Line color.
        CloseInfoWindow (InfoWindow As InfoWindow)
        Closes the specified info window.
      • AllVisibleMapObjects As String
      • AlternativeMap (url As String, maxZoom As Int, attribution As String) As String
      • CameraPosition As CameraPosition
        Returns the current camera position.
      • Class_Globals As String
      • ClearMap As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • EditConfigure (Offset As Double, Tollerance As Int) As String
        Offset -> Map difference; Tollerance -> Editing Poly point
      • EditingActive As Boolean
      • EditingCircle (Circle As MapCircle, Active As Boolean) As Boolean
      • EditingPolygon (Polygon As MapPolygon, Active As Boolean) As Boolean
        If an element is already in editing, it is not possible to edit another at the same time.
        Dim Success As Boolean = OpenMap.EditingPolygon(Polygon,True)
      • EditingPolyline (Polyline As MapPolyline, Active As Boolean) As Boolean
      • filterVisibleMapObjects As String
        Makes only the objects visible inside the visible map (Bounds)
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • IsReady As Boolean
      • LatLonToXY (ll As LatLng) As Double()
      • LoadMKL (Path As String, FileName As String) As Map
        Return Map as Object
        Key is ID , Value is Object (Marker,MapPolygon,MapPolyline)
        <code>ObjectMap = OpenMap.LoadMKL(Path, FileName)</code>
      • MapLoaded As Boolean
      • MessageToPanel (Text As String) As String
      • MoveCamera (cp As CameraPosition) As String
      • MoveCamera2 (ll As LatLng) As String
      • ObjectIsEditing (IDobject As String) As Boolean
      • PanelOff As String
      • PanelOn As String
      • RedrawAllObj As String
      • RemoveCircle (vCircle As MapCircle) As String
        Removes the specified circle from the map.
      • RemoveInfoWindow (InfoWindow As MapInfoWindow) As String
      • RemoveMarker (vMarker As Marker) As String
        Removes the specified marker from the map.
      • RemovePolygon (vPolygon As MapPolygon) As String
        Removes the specified polygon from the map.
      • RemovePolyline (vPolyline As MapPolyline) As String
        Removes the specified polyline from the map.
      • SaveKML (MapObj As Map, Path As String, FileName As String) As String
      • UpdateCircleCenter (id As String, Lat As Double, Lng As Double) As String
        Update position Radius
      • UpdateCircleRadius (id As String, Radius As Double) As String
        New Radius
      • UpdateMarkerPosition (id As String, Lat As Double, Lng As Double) As String
        update marker posizion
      • UpdatePolygon (Plg As MapPolygon, NewPoints As List) As String
        NewPoint as List of LatLng
      • UpdatePolygonColor (Plg As MapPolygon, Color As Paint) As String
        Change color
      • UpdatePolygonFillColor (Plg As MapPolygon, Color As Paint, Opacity As Float) As String
        1.12
        Update FillColor - Opacity 0-1
      • UpdatePolygonStroke (Plg As MapPolygon, Width As Int) As String
        Change StrokeWidth
      • UpdatePolyline (Pll As MapPolyline, NewPoints As List) As String
        NewPoint as List of LatLng
      • UpdatePolylineColor (Pll As MapPolyline, Color As Paint) As String
        Change color
      • UpdatePolylineStroke (Pll As MapPolyline, Width As Int) As String
        Change StrokeWidth
      • visibleObject (ID As String, Visible As Boolean) As String
        es. OpenMap.visibleObject(Polygon.ID)
      • ww As JavaObject
      • XYToLatLng (x As Double, y As Double) As LatLng
    • Properties:
      • MapBound As Map [read only]
        Return bound in map format:
        {"northEast":{"lat":45.123,"lon":12.456},"southWest":{"lat":40.987,"lon":10.321}}
        Dim Bound As Map = OMaps.MapBound
      • MapType
        get or set the zoom level.
      • NumberOfElements As Int [read only]
        Number Of Elements added
      • Zoom As Int
        Sets the zoom level.
  • OpenMapsExt
    • Functions:
      • AddressToLatLon (address As String) As ResumableSub
        <code>wait for (GMapExt.AddressToLatLon("Address number, City")) COMPLETE (ll as LatLng)</code>
      • bestRouteTSP (points As List) As List
        Algoritm Nearest Neighbor
        points array as LatLng
      • Class_Globals As String
      • GetBearing (Point1 As LatLng, Point2 As LatLng) As Double
        Returns the bearing between two points, from point1 to point2
      • GetCircleIsDraggable (Cricle As MapCircle) As Boolean
      • GetDistance (Point1 As LatLng, Point2 As LatLng) As Double
        Returns the distance between two points in meters
      • GetMarkerIsDraggable (Mk As Marker) As Boolean
      • GetMarkerLabel (m As Marker) As String
        not available
      • GetMarkerPosition (m As Marker) As LatLng
        Returns the marker position as LatLng Object
      • GetMarkerTitle (m As Marker) As String
        Returns the title of a marker as string
      • GetPolygonIsDraggable (Polygon As MapPolygon) As Boolean
      • GetPolylineIsDraggable (Polyline As MapPolyline) As Boolean
      • Initialize (OpenMap As OpenMaps) As String
        Initializes the object. You can add parameters to this method if needed.
      • InsidePath (point As LatLng, LatLngList As List) As Boolean
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • LatLonToAddress (lat As Double, lon As Double) As ResumableSub
      • LatLonToXY (ll As LatLng) As Double()
        Returns the screen coordiantes for the given LatLng coordinates
      • LatLonToXY2 (ll As LatLng) As Double()
      • ObjectIsEditing (IDobject As String) As Boolean
      • RemoveMarkerLabel (m As Marker) As String
        not available
        Removes the Marker Label for the given Marker
      • RouteDistance (route As List) As Double
        Calcola la distanza totale di un percorso
      • SetCircleDraggable (C As MapCircle, Draggable As Boolean) As String
        Sets the circle draggable property
      • SetGeodesic (shape As JavaObject) As String
        Sets a polygon or polyline to geodesic points - not exist
      • SetMarkerClickable (m As Marker, Clickable As Boolean) As String
        Always clickable - not necessary
        Sets the marker clickable property
      • SetMarkerDraggable (m As Marker, Draggable As Boolean) As String
        Sets the marker draggable property
      • SetMarkerIcon (m As Marker, URL As String) As String
        not available
      • SetMarkerLabel (m As Marker, Text As String, Color As String, TextSize As Double) As String
        not available
        Sets a MarkerLabel with the given values.
        Posible color values.
      • SetMarkerLabel2 (m As Marker, Text As String, Color As String, BackgroundColor As String, TextSize As Double) As String
        not available
      • SetMarkerOrigin (m As Marker, X As Double, y As Double) As String
        not available
        Sets the marker origin 'doesn't work!!!
      • SetPolygonClickable (pg As MapPolygon, Clickable As Boolean) As String
        Always clickable - not necessary
        Sets the polygon clickable property 'doesn't work!!!
      • SetPolygonDraggable (Polygon As MapPolygon, Draggable As Boolean) As String
        Sets the polygon draggable property
      • SetPolylineDraggable (Polyline As MapPolyline, Draggable As Boolean) As String
        Sets the polyline draggable property
      • XYToLatLng (x As Double, y As Double) As LatLng
        Returns the Lat/Lng coordinates for the given screen coordinates 'doesn't work!!!



  • 1.01
    • Added on OpenMapsExt: SetCircleDraggable, SetPolygonDraggable, SetPolylineDraggable
  • 1.02
    • Coordinated renewal after movement for circle, polygon and polyline
    • Update example
  • 1.03
    • Removal of lateral sliding bars
    • Additions EditingPolygon and EdgingPolyline Method to change the points
    • Added VisibleObject method to view or hide an object (markatore, circle, polygon, polyline)
    • Add the PanelOn and PanelOff functions to make a communication panel appear or hide
    • Added MessageToPanel method to send messages to the communication panel
  • 1.04
    • Fix bugs
    • Added method GetMarkerIsDraggable, GetCircleIsDraggable, GetPolygonIsDraggable, GetPolylineIsDraggable
    • Added method: EditingPolyline, EditingPolygon and function EditingActive
  • 1.05
    • Fix Bugs and update Demo
  • 1.06
    • Added method: RedrawAllObj, ClearMap, EditingCircle, updateCircleRadius
    • Added new TypeMap: MAP_TYPE_ESI, MAP_TYPE_CARTO - As an alternative to OSM tiles if they don't appear
  • 1.07
    • Added method: LoadKML, SaveKML
    • Removed Hyperlinks, Preserved Maps Elements after change Map_Type
    • Fix bugs
    • The algorithm reconstructed for the modification of the polygons, polylines and rims
  • 1.08
    • Added getMapBound, filterVisibleMapObjects, AllVisibleMapObjects, NumberOfElements
    • Added PopUp on Marker
  • 1.09
    • Fix bugs for LoadKML, AddMarker, AddCircle, AddPolygon, AddPolyline
    • Correct LatLng class field (Lat to Latitude, Lng to Longitude)
    • Update Sample
  • 1.10
    • Added method UpdatePolyline, UpdatePolygon
    • Update class Polyline, Polygon
    • Fix bugs
  • 1.11
    • Added method InsidePath, UpdateCircleCenter, UpdateMarkerPosition, ObjectIsEditing
    • Correct LatLng class method Initialize(Lat,Lng)
    • Update Sample
  • 1.12
    • Added method UpdatePolylineStroke, UpdatePolylineColor, UpdatePolygonStroke, UpdatePolygonColor
    • Added type map MAP_TYPE_ESI_SATELLITE (zoom 20x)
  • 1.13
    • Added method UpdatePolygonFillColor, AddMarker3, AddMarker2Label, AddMarker3Label to OpenMaps class
    • Added method bestRouteTSP to OpenMapsExt class
    • Fix bugs Label / icon marker
  • 1.14
    • Added AlternativeMap method to be able to insert other maps that require API KEY
    • Polygon/Polyline editor improve
  • 1.15
    • added AddMarker3bis - Adds the marker, hitting it in height in the coordinate indicated
    • The possibility of the escape seques in the panel text (GMap.MessageToPanel)
    • Fixed the bug that prevented having more openmaps classes started at the same time
  • 1.16
    • Fixed the bug that prevented having more openmaps classes started at the same time
 

Attachments

  • jSD_OpenMaps 1.16.zip
    62.2 KB · Views: 28
Last edited:

javiers

Active Member
Licensed User
Longtime User
Unfortunately you need a Key API. I am using all free bees, adding a key would mean making many changes in the code. Find a map that does not require Api Key
Hi, thanks for your response. I hadn't realized an API was necessary for this image provider.

I understand this may not be among your priorities, but I see that Leaflet offers the option to view WMS (Web Map Service) layers.
For Spain (which is my area of work), the most up-to-date satellite imagery can be obtained using a WMS, in addition to other layers of interest for emergency services. I understand this is very specific, but, would it be possible to access WMS layers in a "simple" way for users who don't know much... perhaps by configuring the most important options in a file or something like that?

URL: .URL of the WMS web service we want to consume.
layers: Specifies the name of the WMS layer we want to request from the server.
format: Defines the format of the image to be downloaded (for example, image/png or image/jpeg).
transparent: Indicates whether the layer should have transparency (true) or not (false).
attribution: Add information about the source of the data, which will be displayed on the map.

Example...

Ejemplo:
// Definir las capas WMS
var pnoaLayer = L.tileLayer.wms('https://www.ign.es/wms-inspire/pnoa-ma?', {
    layers: 'OI.OrthoimageCoverage',
    format: 'image/jpeg',
    transparent: false,
    attribution: 'PNOA - © Instituto Geográfico Nacional de España'
});

var curvasNivelLayer = L.tileLayer.wms('https://servicios.idee.es/wms-inspire/mdt?', {
    layers: 'EL.ContourLine',
    format: 'image/png',
    transparent: true,
    attribution: '© Instituto Geográfico Nacional de España'
});

var ignBaseLayer = L.tileLayer.wms('https://www.ign.es/wms-inspire/ign-base?', {
    layers: 'IGNBaseOrto',
    format: 'image/png',
    transparent: true,
    opacity: 0.75,
    attribution: '© Instituto Geográfico Nacional de España'
});

var catastroLayer = L.tileLayer.wms('https://ovc.catastro.meh.es/cartografia/INSPIRE/spadgcwms.aspx?', {
    layers: 'BU.Building',
    format: 'image/png',
    transparent: true,
    attribution: 'Catastro © Ministerio de Hacienda'
});

There's an example on this page. I don't know if this development is possible, and in any case, I understand the difficulty and why it's not planned, but I think access to these layers would be useful for more people.
Well, thank you again, and sorry if I'm going on about too much.
 

Star-Dust

Expert
Licensed User
Longtime User
I am working to improve the editing of polygons and polylines. Now you can also add a new point during the change. Soon starting from version 1.14

Nuovovideo-ezgif.com-optimize.gif
 

javiers

Active Member
Licensed User
Longtime User
Thanks for the new version (1.13). 👏

1.13
Added method UpdatePolygonFillColor, AddMarker3, AddMarker2Label, AddMarker3Label to OpenMaps class
Added method bestRouteTSP to OpenMapsExt class
Fix bugs Label / icon marker


Waiting for the next one!!😊

  • 1.14
    • Added AlternativeMap method to be able to insert other maps that require API KEY
    • Polygon/Polyline editor improve
 

Star-Dust

Expert
Licensed User
Longtime User
Update rel. 1.13
  • Added method UpdatePolygonFillColor, AddMarker3, AddMarker2Label, AddMarker3Label to OpenMaps class
  • Added method bestRouteTSP to OpenMapsExt class
  • Fix bugs Label / icon marker
 

javiers

Active Member
Licensed User
Longtime User
Hi, I'm trying to use this last feature AlternativeMap , but I'm not able to.😥
I use these map providers: https://leaflet-extras.github.io/leaflet-providers/preview/

It works with Esri.WorldImagery.
B4X:
GMap.AlternativeMap("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",20 ,"Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community")

It doesn't work with Stadia.AlidadeSatellite:

B4X:
    Dim atribucion As String = $"&copy; CNES, Distribution Airbus DS, © Airbus DS, © PlanetObserver (Contains Copernicus Data) | &copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors"$
    If GMap.IsReady Then GMap.AlternativeMap("https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg",20 ,atribucion)

You can get an API key at https://stadiamaps.com/, but I don't know if it's possible to use it here...

1747233412867.png


Finally, would it be possible to access this WMS layer?

B4X:
// Define the WMS layers
var pnoaLayer = L.tileLayer.wms('https://www.ign.es/wms-inspire/pnoa-ma?', {
layers: 'OI.OrthoimageCoverage',
format: 'image/jpeg',
transparent: false,
attribution: 'PNOA - © Instituto Geográfico Nacional de España'
});

I appreciate the help!
 

Star-Dust

Expert
Licensed User
Longtime User
Hi, I'm trying to use this last feature AlternativeMap , but I'm not able to.😥
I use these map providers: https://leaflet-extras.github.io/leaflet-providers/preview/

It works with Esri.WorldImagery.
B4X:
GMap.AlternativeMap("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",20 ,"Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community")

It doesn't work with Stadia.AlidadeSatellite:

B4X:
    Dim atribucion As String = $"&copy; CNES, Distribution Airbus DS, © Airbus DS, © PlanetObserver (Contains Copernicus Data) | &copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors"$
    If GMap.IsReady Then GMap.AlternativeMap("https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg",20 ,atribucion)

You can get an API key at https://stadiamaps.com/, but I don't know if it's possible to use it here...



Finally, would it be possible to access this WMS layer?

B4X:
// Define the WMS layers
var pnoaLayer = L.tileLayer.wms('https://www.ign.es/wms-inspire/pnoa-ma?', {
layers: 'OI.OrthoimageCoverage',
format: 'image/jpeg',
transparent: false,
attribution: 'PNOA - © Instituto Geográfico Nacional de España'
});

I appreciate the help!
In theory, some Stadia Maps should work without an API key, but as of 2023/2024 they have made the key mandatory for almost all of their services, even the free plan.
B4X:
GMap.AlternativeMap("https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png?api_key=abcd1234-xxxx-yyyy-zzzz-1234567890",20,$"&copy; <a href="https://stadiamaps.com/">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>"$)
 

javiers

Active Member
Licensed User
Longtime User
Hi, I'm trying to use this last feature AlternativeMap , but I'm not able to.😥

In theory, some Stadia Maps should work without an API key, but as of 2023/2024 they have made the key mandatory for almost all of their services, even the free plan.
B4X:
GMap.AlternativeMap("https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png?api_key=abcd1234-xxxx-yyyy-zzzz-1234567890",20,$"&copy; <a href="https://stadiamaps.com/">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>"$)
Thank you! Works! 🙏🙏🙏

B4X:
GMap.AlternativeMap("https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png?api_key=abcd1234-xxxx-yyyy-zzzz-1234567890",20,$"&copy; <a href="https://stadiamaps.com/">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>"$)
1747287163113.png


B4X:
    If GMap.IsReady Then GMap.AlternativeMap("https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg?api_key=abcd1234-xxxx-yyyy-zzzz-1234567890",20 ,$"&copy; <a href="https://stadiamaps.com/">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>"$)

1747287443392.jpeg


Regarding that WMS layer, would that be possible?
 

javiers

Active Member
Licensed User
Longtime User
I did not understand exactly what you ask
Sorry, I was referring to Service WMS

There are some maps (for Spain) for WMS services. Specifically, satellite images, which I believe are configured in Leaflet with an L.tileLayer.wms function.

B4X:
// Definir las capas WMS
var pnoaLayer = L.tileLayer.wms('https://www.ign.es/wms-inspire/pnoa-ma?', {
    layers: 'OI.OrthoimageCoverage',
    format: 'image/jpeg',
    transparent: false,
    attribution: 'PNOA - © Instituto Geográfico Nacional de España'
});


I don't know if it could be implemented or if it's impossible.
Thanks again (for your work and your patience).
 

Star-Dust

Expert
Licensed User
Longtime User
Sorry, I was referring to Service WMS

There are some maps (for Spain) for WMS services. Specifically, satellite images, which I believe are configured in Leaflet with an L.tileLayer.wms function.

B4X:
// Definir las capas WMS
var pnoaLayer = L.tileLayer.wms('https://www.ign.es/wms-inspire/pnoa-ma?', {
    layers: 'OI.OrthoimageCoverage',
    format: 'image/jpeg',
    transparent: false,
    attribution: 'PNOA - © Instituto Geográfico Nacional de España'
});


I don't know if it could be implemented or if it's impossible.
Thanks again (for your work and your patience).
In this version it is not possible. See in the following
 

yfleury

Active Member
Licensed User
Longtime User
I prefer the look of Google Maps and don't like the look of OpenStreetMap, which doesn't provide enough detail.

With Leaflet, we can use GoogleMutant in a webView, and the look is very similar to Google Maps, almost identical. It's fine for simple things like a few markers, polylines, etc., but for a large project, it's too complicated and cumbersome to manage.

I don't know if it's feasible to add something like GoogleMutant to jSD_OpenMaps. Or to have other map types that look more like Google Maps, like MAP_TYPE_CARTO. But I need to see the rectangles representing the houses for more precision. Needless to say, satellite images are clearer with Google Maps. But we all know that.

Thanks @Star-Dust for your works
 

Attachments

  • Capture d’écran 2025-05-25 092922.png
    Capture d’écran 2025-05-25 092922.png
    137.6 KB · Views: 59
  • Capture d’écran 2025-05-25 094934.png
    Capture d’écran 2025-05-25 094934.png
    360.2 KB · Views: 71

Star-Dust

Expert
Licensed User
Longtime User
I prefer the look of Google Maps and don't like the look of OpenStreetMap, which doesn't provide enough detail.

With Leaflet, we can use GoogleMutant in a webView, and the look is very similar to Google Maps, almost identical. It's fine for simple things like a few markers, polylines, etc., but for a large project, it's too complicated and cumbersome to manage.

I don't know if it's feasible to add something like GoogleMutant to jSD_OpenMaps. Or to have other map types that look more like Google Maps, like MAP_TYPE_CARTO. But I need to see the rectangles representing the houses for more precision. Needless to say, satellite images are clearer with Google Maps. But we all know that.

Thanks @Star-Dust for your works
to use this type of map you need to make several changes to the library and certainly create a second specific library. This takes time and is not in my plans
 

yfleury

Active Member
Licensed User
Longtime User
I completely understand your point of view.
In the Leaflet JavaScript file (googlemutant), it uses Google tiles. This may not be usable with jSD_OpenMaps. But I've never used the API key, and it works fine with Leaflet. Here's some of the code to use Google tiles, but I don't know how to adapt it with AlternativeMap.

JavaScript:
    // Définir les différentes couches Google Maps
    var googleStreets = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
        attribution: '&copy; Google Maps'
    });

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

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

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

    // Couche OpenStreetMap pour comparaison
    var openStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; OpenStreetMap contributors'
    });
Thanks for all your job in this forum
 

Star-Dust

Expert
Licensed User
Longtime User
GogleMutant is used with Gridlayer and not with TileLayer. That's why in my library it is not possible to use Googlemutant.
GridLayer is more complex, it requires development, compared to TileLayer that is ready for use. It has a high customization and the performance depend on the implementation. (TileLayers is always fast)
GoogleMutant is a plugin, which extends Leaflet, which allows you to integrate Google Maps in conformity to Google's terms of service


The field of geolocation and maps is vast, as you have read someone else asked WMS (customizable dynamic maps).

I created sd_openmaps because it served me for my work to restart some applications that have no particular needs. It is an alternative to Googlemaps that implements the same methods to avoid rewriting the code already working. I don't go to create a solution to cover every need, it takes time.
But what I create for my customers if I can share it
 
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
JavaScript:
    // Définir les différentes couches Google Maps
    var googleStreets = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
        attribution: '&copy; Google Maps'
    });

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

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

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

    // Couche OpenStreetMap pour comparaison
    var openStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; OpenStreetMap contributors'
    });
PS.

Different of the maps you have already indicated are included in the various choices of maps already available.

However alternativemap is used like this

B4X:
GMap.AlternativeMap("https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png?api_key=abcd1234-xxxx-yyyy-zzzz-1234567890",20,$"&copy; <a href="https://stadiamaps.com/">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>"$)
 

Star-Dust

Expert
Licensed User
Longtime User
1.15
  • added AddMarker3bis - Adds the marker, hitting it in height in the coordinate indicated
  • The possibility of the escape seques in the panel text (GMap.MessageToPanel)
  • Fixed the bug that prevented having more openmaps classes started at the same time
 

KY Leng

Active Member
Licensed User
Longtime User
I can use your map library without any problem for my project when I compile with Java version 19. The tiles display correctly, I can draw the polyline and change the map source without problem. However, when I make the app to be standalone (EXE), I cannot load the map, see only white screen and error like this "(JSException) netscape.javascript.JSException: ReferenceError: Can't find variable: L". Can any memember help me?
 

Star-Dust

Expert
Licensed User
Longtime User
Add this
B4X:
#PackagerProperty: IncludedModules = jdk.crypto.ec
 

Ralph Parkhurst

Member
Licensed User
Longtime User
The implementation of jSD_OpenMaps v1.15 continues to work flawlessly in my B4J app - thank you again Star-Dust!

I am required by my customers to briefly document how my app uses the internet. This is what I have come up with for the Map Tiles section:

Map Tiles
  • Service: OpenStreetMap (via jSD_OpenMaps v1.15)
  • Protocol: HTTPS
  • Privacy: No user data is sent to OpenStreetMap
  • Port: 443
  • Direction: Outbound
  • Purpose: Retrieves map tiles for visual display within the application
  • Notes: DNS access must be allowed for public map tile providers (e.g., tile.openstreetmap.org or equivalent)
Have I missed anything, or does this adequately describe how jSD_OpenMaps uses the internet?
 
Top