Jump to content

Add A Floor Plan Layer Image on TUniMap


M.Ammar

Recommended Posts

Hi, 

Regarding Tunimap i have 2 questions,

1- i have been using TuniMap with OSM layer because google never worked for me "empty page" although i set up UniMapKeys in servermodule like the demo and the same key is working for another ASP.net project with no issue.

2- how can i add a very large floor plan layer (1200m * 900m) on certain location, can i use Png file and how can i do it? as i cannot Drow over 1000 irregular shape

currently testing with V 1.90.0.1568

regards

 

 

Link to comment
Share on other sites

2 hours ago, M.Ammar said:

Hi, 

Regarding Tunimap i have 2 questions,

1- i have been using TuniMap with OSM layer because google never worked for me "empty page" although i set up UniMapKeys in servermodule like the demo and the same key is working for another ASP.net project with no issue.

2- how can i add a very large floor plan layer (1200m * 900m) on certain location, can i use Png file and how can i do it? as i cannot Drow over 1000 irregular shape

currently testing with V 1.90.0.1568

regards

 

 

Hello

Google map works. Did you check the demo?

I'll check how to add images as layer

 

  • Like 1
Link to comment
Share on other sites

On 9/4/2023 at 4:11 PM, Hayri ASLAN said:

Hello

Google map works. Did you check the demo?

I'll check how to add images as layer

 

Thank you for reply,

- you are correct google maps are working it was error in the Key,

- i was trying a deferent solution by adding the floor plan layer by importing a KML file,

i had some success on making the example work on the Demos\Desktop\GoogleMaps project using the UniHTMLFrame, but i need this to be working on the unimap component because i need all the other functions available

can you help me, here is the example:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap">
    </script>
  </body>
</html>

 

The example is from google and it is working fine but i removed my API Key : in YOUR_API_KEY_HERE

Can the same idea work with the UniMap?

best regards

 

Link to comment
Share on other sites

13 hours ago, M.Ammar said:

Thank you for reply,

- you are correct google maps are working it was error in the Key,

- i was trying a deferent solution by adding the floor plan layer by importing a KML file,

i had some success on making the example work on the Demos\Desktop\GoogleMaps project using the UniHTMLFrame, but i need this to be working on the unimap component because i need all the other functions available

can you help me, here is the example:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap">
    </script>
  </body>
</html>

 

The example is from google and it is working fine but i removed my API Key : in YOUR_API_KEY_HERE

Can the same idea work with the UniMap?

best regards

 

Do you want to import kml file or show images in the map?

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...