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.11
  • 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_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>
      • 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
      • 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
      • UpdatePolyline (Pll As MapPolyline, NewPoints As List) As String
        NewPoint as List of LatLng
      • 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>
      • Class_Globals As String
      • GetBearing (Point1 As LatLng, Point2 As LatLng) As Double
        Returns the bearing between two points, from point1 to point2- not exist
      • 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
      • 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
    • Polygon/Polyline editor improve
 

Attachments

  • jSD_OpenMaps 1.11.zip
    57.8 KB · Views: 10
Last edited:

javiers

Active Member
Licensed User
Longtime User
These maps are loaded with Google tiles.
  • MAP_TYPE_HYBRID As Int
  • MAP_TYPE_SATELLITE As Int
  • MAP_TYPE_TERRAIN As Int
The magnification is at most
Thanks for the reply. My question was that when comparing the images (which all seemed to be from Google Maps), the zoom level is different, even though the data source is the same.
In the first image (OpenMap), that's the maximum zoom level allowed, while in the second image (Leaflet with Google Maps) and the third (Google Maps), the zoom level is much higher. Could this limitation be removed? Thanks again for everything!
 

Attachments

  • openmap.jpg
    openmap.jpg
    76.3 KB · Views: 13
  • leaflet.jpg
    leaflet.jpg
    47.3 KB · Views: 17
  • google.jpg
    google.jpg
    65.9 KB · Views: 13

aminoacid

Active Member
Licensed User
Longtime User
Thanks for the reply. My question was that when comparing the images (which all seemed to be from Google Maps), the zoom level is different, even though the data source is the same.
In the first image (OpenMap), that's the maximum zoom level allowed, while in the second image (Leaflet with Google Maps) and the third (Google Maps), the zoom level is much higher. Could this limitation be removed? Thanks again for everything!


This is my B4J Application now using SD_OpenMaps - MAP_TYPE_HYBRID - Max Zoom

1743265704418.png



This is my JavaScript Leaflet Web Application with GoogleMaps HYBRID - Max Zoom:

1743265862928.png



This is Google Maps in the Browser - Max Zoom:

1743266071384.png


When you use GoogleMap tiles in Leaflet, you don't need an API key since you are not using the GoogleMaps API. It could be that getting a higher resolution requires a "paid" API account and API key with Google. The plug-ins that Javier mentions in his post above use the Googlemaps API.
 
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
I don't quite understand, do you need to see who lives inside the apartments?

I'm not aware of any further zooms
 

aminoacid

Active Member
Licensed User
Longtime User
I don't quite understand, do you need to see who lives inside the apartments?

No 😀😀😀 But I wish I could!

I'm just pointing out the difference in max zoom levels when the Google Maps tiles are used with Leaflet/OpenMaps and when you use the regular GoogleMaps web page.

The leaflet max zoom is fine for me! I guess Javier's requirement in Post# 81 may need a higher zoom level.
 

Star-Dust

Expert
Licensed User
Longtime User
Potentially Leatleaf reaches 23, all from the maps if greater zooms are available. It seems that satellite, hybrid and terrain stop at 18. Only that CARTO (road) reaches 20
 

javiers

Active Member
Licensed User
Longtime User
No 😀😀😀 But I wish I could!

I'm just pointing out the difference in max zoom levels when the Google Maps tiles are used with Leaflet/OpenMaps and when you use the regular GoogleMaps web page.

The leaflet max zoom is fine for me! I guess Javier's requirement in Post# 81 may need a higher zoom level.
Yes, the applications I develop are used by emergency services (firefighters) and require the highest possible resolution, which was achieved with the previous jGoogleMaps library.
But since it doesn't work, the work involved in developing the OpenMap library is extraordinary, and it allows us to maintain the applications.
But yes, it would be great to have more zoom. Could we use the plug-ins that use the Google Maps API?

Thanks again for the work you do...
 

Star-Dust

Expert
Licensed User
Longtime User
Yes, the applications I develop are used by emergency services (firefighters) and require the highest possible resolution, which was achieved with the previous jGoogleMaps library.
But since it doesn't work, the work involved in developing the OpenMap library is extraordinary, and it allows us to maintain the applications.
But yes, it would be great to have more zoom. Could we use the plug-ins that use the Google Maps API?

Thanks again for the work you do...
Some googlemaps bees can be used, as a transformation from GPS coordinated address and vice versa. Other bees cannot be used.
The tiles that offers Googlemaps do not exceed 18 for Zoom. It is different from those that Googlemaps use for its bees that lean on the webgl and in addition to overcoming 18 they can also view 3D.
Google Maps no longer allows the direct use of its tiles without the official SDK

Leaflet Coem already said it potentially reaches a maximum of 23 if it finds the tiles. He does not find them in those of Googlemaps.

For your problem you should look for an alternative tile archive that exceeds 18
 

Star-Dust

Expert
Licensed User
Longtime User
In the past you could use their tiles with a Key bees in this way.
It has now been blocked

JavaScript:
L.tileLayer('https://{s}.google.com/vt/lyrs=y,h&x={x}&y={y}&z={z}&key=API_KEY', {
    maxZoom: 22,
    subdomains: ['mt0','mt1','mt2','mt3']
}).addTo(map);
 

javiers

Active Member
Licensed User
Longtime User
In the past you could use their tiles with a Key bees in this way.
It has now been blocked

JavaScript:
L.tileLayer('https://{s}.google.com/vt/lyrs=y,h&x={x}&y={y}&z={z}&key=API_KEY', {
    maxZoom: 22,
    subdomains: ['mt0','mt1','mt2','mt3']
}).addTo(map);
This provider appears to extend the zoom to 20x.
Could this be included?

Stadia_AlidadeSatellite:
var Stadia_AlidadeSatellite = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.{ext}', {
    minZoom: 0,
    maxZoom: 20,
    attribution: '&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',
    ext: 'jpg'
});
var O

1743316726818.png
 

Star-Dust

Expert
Licensed User
Longtime User
in one of the next versions the ESI_HYBRID map will be added which has a great zoom elevation and if necessary I will also add the ones you indicated
 

Star-Dust

Expert
Licensed User
Longtime User
@Star-Dust Hi there!! are you thinking making this wonderful lib working at B4A too, B4i... ?
I started doing it and it seems that it works, as I have written in some posts previously you have to make many changes because the webView engine for B4A and B4i is asynchronous.

At the moment I have many new functions for jOpenMap in the pipeline and I have a very dense calendar so it will take time
 

Star-Dust

Expert
Licensed User
Longtime User
Update rel. 1.11
  • Added method InsidePath, UpdateCircleCenter, UpdateMarkerPosition, ObjectIsEditing
  • Correct LatLng class method Initialize(Lat,Lng)
  • Update Sample

I adapted the example published by @kalus to my new bookshop with some small changes. You can find the source in this post
 

Star-Dust

Expert
Licensed User
Longtime User
Sorry, but I understand that the current version is 1.10, and that these (1.11 and 1.12) are versions to come?
Some versions are being tested others are developing. Consider the list as the planning of the next releases.

By now they are in the end, at release 1.15 there should be everything. Then I will start working on the B4A and B4I versions
 
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
Would love to see the capability to add a label to a marker by implementing SetMarkerLabel, RemoveMarkerLabel, GetMarkerLabel in OpenMapsExt

In leaflet you could use L.tooltip to create a standalone label instead of binding it to a marker. That would be the same as adding a label to a marker that is always visible:

B4X:
var tooltip = L.tooltip()
    .setLatLng(latlng)
    .setContent('A sweet static label!')
    .addTo(map);


View attachment 162635
The labels will be available starting from version 1.13
 
Top