B4J Library jSD_OpenMaps

Star-Dust · Mar 11, 2025

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

javiers · Apr 9, 2025

Star-Dust said:
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 · Apr 15, 2025

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

javiers · May 1, 2025

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 · May 1, 2025

Update rel. 1.13

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

Star-Dust · May 13, 2025

Release 1.14

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

javiers · May 14, 2025

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!

Star-Dust · May 14, 2025

Hi, I'm trying to use this last feature AlternativeMap , but I'm not able to.

javiers said:

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 · May 15, 2025

Star-Dust said:
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,$"© <a href="https://stadiamaps.com/">Stadia Maps</a> © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <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>"$)

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>"$)

Regarding that WMS layer, would that be possible?

Star-Dust · May 15, 2025

javiers said:
Regarding that WMS layer, would that be possible?

I did not understand exactly what you ask

javiers · May 15, 2025

Star-Dust said:
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 · May 15, 2025

javiers said:
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 · May 25, 2025

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

Star-Dust · May 26, 2025

yfleury said:
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 · May 26, 2025

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 · May 26, 2025

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

Star-Dust · May 26, 2025

yfleury said:

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 · May 27, 2025

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 · Jun 15, 2025

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 · Jun 15, 2025

Add this

B4X:

#PackagerProperty: IncludedModules = jdk.crypto.ec

Ralph Parkhurst · Jun 15, 2025

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?

B4J Library jSD_OpenMaps

Attachments

Active Member

Expert

Active Member

Expert

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Attachments

Expert

Active Member

Expert

Expert

Expert

Active Member

Expert

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency