Jump to content

UniMap layer


leons

Recommended Posts

Hi

Is this possible to integrate with UniMap as Custom Maplayer? Targomo creates a layer on Maps.

https://targomo.com/developers/libraries/javascript/code_example/googlemaps_polygons/

Example HTML

<!DOCTYPE html>
<html>

<head>
    <!--  Include google maps api -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=__your_google_api_key__"
        type="text/javascript"></script>
    <!--  Include targomo googlemaps full build -->
    <script src="https://releases.targomo.com/googlemaps/latest-full.min.js" type="text/javascript"></script>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #map {
            width: 100%;
            height: calc(100% - 15px);
        }

        #attribution {
            width: 100%;
            height: 15px;
        }

        #attribution>a {
            float: right;
            font-size: 11px;
            line-height: 15px;
            padding: 0px 5px;
        }
    </style>
</head>

<body>
    <!--  where the map will live  -->
    <div id="map"></div>
    <div id="attribution"><a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a> <a href='https://targomo.com/developers/resources/attribution/' target='_blank'>&copy; Targomo</a></div>

    <script>
        async function initMap() {
            // create targomo client
            const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');

            // Coordinates to center the map
            const myLatlng = new google.maps.LatLng(52.36, 4.88);

            // define the map
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 11,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROAD
            });

            // init the first marker
            const marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });

            // polygons time rings
            const travelTimes = [300, 600, 900, 1200, 1500, 1800];

            // you need to define some options for the polygon service
            const options = {
                travelType: 'bike',
                travelEdgeWeights: travelTimes,
                maxEdgeWeight: 1800,
                edgeWeight: 'time',
                serializer: 'json'
            };

            // define the starting point
            const sources = [{ id: 0, lat: myLatlng.lat(), lng: myLatlng.lng() }];

            // define the polygon overlay
            const layer = new tgm.googlemaps.TgmGoogleMapsPolygonOverlay(map, {
                strokeWidth: 20
            });

            // get the polygons
            const polygons = await client.polygons.fetch(sources, options);
            // calculate bounding box for polygons
            const bounds = polygons.getMaxBounds();
            // add polygons to overlay
            layer.setData(polygons);
            // zoom to the polygon bounds
            map.fitBounds(new google.maps.LatLngBounds(bounds.southWest, bounds.northEast), 0);
        }

        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
</body>

</html>

Regards

Leon

 

 

 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hi Sherzod,

i use 1.90.0.1523

- found the Component - but not the demo?

But the demo i found in  -> C:\Program Files\FMSoft\Framework\uniGUI\Demos\Desktop\GoogleMaps

uses a UniHTMLFrame1 for Google Maps?

 

what make i wrong ;-)

 

nice greetings

Erich

 

 

Link to comment
Share on other sites

And a other problem :blink2:

 

the uniApp with uniMap comunicate with russia ( yandex.ru)  ?? thats a no-go here !

 

I comment out in uniMAP.pas:

 

class procedure TUniMap.AddYandexJSLibrary(const ApiKey: String);
begin
  // Yandex Map
  {
  if Trim(ApiKey)<>'' then
    UniAddJSLibrary('https://api-maps.yandex.ru/2.1/?lang=en_US&apikey='+ApiKey, True, [upoPlatformBoth])
  else
    UniAddJSLibrary('https://api-maps.yandex.ru/2.1/?apikey=asd&lang=en_US', True, [upoPlatformBoth]);
  UniAddJSLibrary('unimap/Yandex.js', False, [upoPlatformBoth, upoFolderUni]);
  FYandexLibraryInitialized := True;
  }
end;

 

but thats not a future-save solution ;-)

 

 

 

 

Link to comment
Share on other sites

Yes .. but if i have just mlOSM and mlGoogle - i have in sourceCode of html Page:

<script src="https://api-maps.yandex.ru/2.1/?apikey=asd&lang=en_US"></script>

 

... so i have a problem with my customers and with autority  and the "General Data Protection Regulation (GDPR) " of the EU

 

https://en.wikipedia.org/wiki/General_Data_Protection_Regulation

 

PS: Google, Microsoft, Dropbox and the other big cloud providers are apparently GDPR compliant, since they can still offer their services in the EU after the GDPR.

Link to comment
Share on other sites

If you don't add yandex API key to UniMapKeys we are not including yandex js files to your project.

 

Basicly, when you add api key to uniMapKeys component in servermodule, we will add that library into script files, otherwise we will not add it. You don't need to worry about it.

Link to comment
Share on other sites

4 hours ago, erich.wanker said:

Yes .. but if i have just mlOSM and mlGoogle - i have in sourceCode of html Page:

 <script src="https://api-maps.yandex.ru/2.1/?apikey=asd&lang=en_US"></script>

 

... so i have a problem with my customers and with autority  and the "General Data Protection Regulation (GDPR) " of the EU

 

https://en.wikipedia.org/wiki/General_Data_Protection_Regulation

 

PS: Google, Microsoft, Dropbox and the other big cloud providers are apparently GDPR compliant, since they can still offer their services in the EU after the GDPR.

Please delete yandex api key from uniservermodule.unimapkeys

Link to comment
Share on other sites

Hi,

the YadexAPIKey was allways emty.

The only solution for me was (see postings above) to deaktivate in unit "uniMap.pas" the 

class procedure TUniMap.AddYandexJSLibrary(const ApiKey: String);

.. where is the line "if apiKey = empty then use apikey=asd&lang=en_US"

and:

  UniAddJSLibrary('unimap/Yandex.js', False, [upoPlatformBoth, upoFolderUni]);
  FYandexLibraryInitialized := True;

 

Link to comment
Share on other sites

f you don't put anything to YandexAPIkey, it will not call setYandexAPIKey so we will not add library.

 

procedure TUniMapKeys.SetYandexAPIKey(const Value: string);
begin
  if Value <> FYandexAPIKey then
  begin
    FYandexAPIKey := Value;
    TUniMap.AddYandexJSLibrary(FYandexAPIKey);
  end;
end;

Link to comment
Share on other sites

yes - but :-)

 

in html- sourcecode of the unigui page - there is the line : <script src="https://api-maps.yandex.ru/2.1/?apikey=asd&lang=en_US"></script>

and this is breaking my neck ;-) (it does not matter if the JS is used or not ) 

In the europien union - there is the GDPR ..  https://en.wikipedia.org/wiki/General_Data_Protection_Regulation 

and since now ALL used Librarys in unigui HTML HEADER are local or gdpr comform ..  (if local - when i have to check the functions and have to validate if everything is correct)

Extjs is allso GDPR comform: see https://www.sencha.com/legal/gdpr/ 

 

Now - i have a russian JS source ( what has no gdpr rule)  in the header - and that is not allowed..

 

The biggest problem is: my software IS A GDPR Tool  :-) 

my_gdpr.thumb.jpg.9af8eefb1528ca1194e5b35cf4e302c7.jpg

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...