map layer

assarrar8 years ago

i want to see the default maps traccar(OSM),What is the file name that contains the map??

jomart8 years ago

как добавить карту спутникового снимка или купить карту электронную, какую лучше и как это реализовать???

Anton Tananaev8 years ago

Official documentation about map layers is here:

https://www.traccar.org/map-layers/

kurma7 years ago

mr Anton, i really appreciate your dedication to give answers with so much of patience, i have problem in using my own custom maps, i tried all the otpins you mentioned in you previous post but i could not solve . i am a cartographer in one of the university in Ethiopia, i installed traccar server , i prepared tiled map of my cartographic work.i use tomcat server for maps to display in browser.
this is my indix url.
if i type
http://192.168.1.5:8080/myapp/
i am able to see my map in LAN IN BROWSER.
I Tried to insert the above url in custom map as admin but i could not see any result but just blank page .
is there any config file to be chaged such as app.min.js ...?
please guide me.. as spent a lot of time to figure out...
sorry for loang mail//

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>mytiles (Google Maps Export from Global Mapper)</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

    var G = google.maps;
    var map;
    
    var customMapType = new G.ImageMapType
      (
        {
        getTileUrl: function(coord, zoom)
          {
          var normalizedCoord = getNormalizedCoord(coord, zoom);
          if (!normalizedCoord) { return null; }
          
          if ( zoom == 6 && normalizedCoord.x >= 38 && normalizedCoord.x <= 38 && normalizedCoord.y >= 29 && normalizedCoord.y <= 29 )
          {
            return "http://192.168.1.5:8080/myapp/Z" + zoom + "/" + normalizedCoord.y + "/" + normalizedCoord.x + ".png"; // replace that with a "http://192.168.1.5:8080/myapp/Z" URL
          }
          else if ( zoom == 7 && normalizedCoord.x >= 76 && normalizedCoord.x <= 77 && normalizedCoord.y >= 59 && normalizedCoord.y <= 59 )
          {
            return "http://192.168.1.5:8080/myapp/Z" + zoom + "/" + normalizedCoord.y + "/" + normalizedCoord.x + ".png"; // replace that with a "http://192.168.1.5:8080/myapp/Z" URL
          }
          else if ( zoom == 8 && normalizedCoord.x >= 152 && normalizedCoord.x <= 155 && normalizedCoord.y >= 118 && normalizedCoord.y <= 119 )
          {
            return "http://192.168.1.5:8080/myapp/Z" + zoom + "/" + normalizedCoord.y + "/" + normalizedCoord.x + ".png"; // replace that with a "http://192.168.1.5:8080/myapp/Z/Z" URL
          }
          else if ( zoom == 9 && normalizedCoord.x >= 305 && normalizedCoord.x <= 311 && normalizedCoord.y >= 236 && normalizedCoord.y <= 239 )
          {
            return "http://192.168.1.5:8080/myapp/Z" + zoom + "/" + normalizedCoord.y + "/" + normalizedCoord.x + ".png"; // replace that with a "http://192.168.1.5:8080/myapp/Z" URL
          }
          else if ( zoom == 10 && normalizedCoord.x >= 611 && normalizedCoord.x <= 622 && normalizedCoord.y >= 472 && normalizedCoord.y <= 479 )
          {
            return "http://192.168.1.5:8080/myapp/Z" + zoom + "/" + normalizedCoord.y + "/" + normalizedCoord.x + ".png"; // replace that with a "http://192.168.1.5:8080/myapp/Z" URL
          }
          return null;
        },

        alt: "mytiles",
        tileSize: new G.Size(256, 256),
        isPng: true,
        maxZoom: 10,
        minZoom: 6,
        opacity: 1.00,
        name: "mytiles"
      }
    )

    function getNormalizedCoord(coord, zoom)
    {
      var y = coord.y;
      var x = coord.x;
      
      var tileRange = 1 << zoom;
      
      if (y < 0 || y >= tileRange) { return null; }
      if (x < 0 || x >= tileRange)
      {
        x = (x % tileRange + tileRange) % tileRange;
      }
      
      return { x: x, y: y };
    }

    function initialize()
    {
      var myLatlng = new G.LatLng(12.552504,36.914062);
      var myOptions = {
        center: myLatlng,
        zoom: 6,
        mapTypeId: G.MapTypeId.ROADMAP,
        mapTypeControl: true,
        overviewMapControl: true,
        scaleControl: true,
        streetViewControl: true,
        panControl: true,
        zoomControl: true,
        zoomControlOptions: { style: google.maps.ZoomControlStyle.DEFAULT }
      };
      
      map = new G.Map(document.getElementById("map_canvas"), myOptions);
      map.overlayMapTypes.insertAt(0, customMapType);
    }
    </script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 800px; margin: 0px 0px 0px 0px; float: middle;"></div>
</body> </html>
Anton Tananaev7 years ago

Your code is very confusing. Why do you need so many conditions if you are using same URL anyway? Have you tried using custom URL in Traccar? Is your map using standard OSM-like tiling system?

kurma7 years ago

good morning mr Anton, i tired bing , google and osm standard, the above is google coded map. used in custom setting option with three types of url links. but i could not view the maps.so pls do needful, thank you for prompt reply
satya

Anton Tananaev7 years ago

Have you checked browser developer console for errors when it didn't work? That's the first thing you should do.

kurma7 years ago

sorry for delay in reply, i try to check the browser developed console and compared with when the other maps loaded, i could not get any different result..
i tried to change my tiles and the index.html code is now little simple.
i used http://192.168.1.5:8080/gondar//%4.png and http://192.168.1.5:8080/gondar
but i am not successful.
any configurations to be customized to use?
thanks in advance..
index code....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>gondar (Bing Maps Export from Global Mapper)</title>
    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>
    <script type="text/javascript">
    var map = null;

    function EventMapLoad()
    {
        var tileSource = new VETileSourceSpecification("gondar", "http://192.168.1.5:8080/gondar//%4.png");
        tileSource.NumServers = 1;
        tileSource.Bounds = [new VELatLongRectangle(new VELatLong(13.9234039,35.1562500),new VELatLong(8.4071682,40.7812500))];
        tileSource.MinZoomLevel = 8;
        tileSource.MaxZoomLevel = 12;
        tileSource.Opacity = 1.00;
        tileSource.ZIndex = 100;
        map.AddTileLayer(tileSource, true);
    }

    function CreateMap()
    {
        map = new VEMap('myMap');
        map.onLoadMap = EventMapLoad;
        map.LoadMap(new VELatLong(11.1652860, 37.9687500), 8, VEMapStyle.Road);
    }
</script>
</head>
<body onload="CreateMap();">
<div id='myMap' style="position:relative; width:800px; height:600px;"></div>
</body>
</html>
Anton Tananaev7 years ago

I don't understand what the code sample is for. Are you talking about Traccar?

kurma7 years ago

sorry i was saying about my server index file,. is there any necessity to change app.min.js file configuration ? or any other why i could display my maps ?
thank you
satya

Anton Tananaev7 years ago

If you are using custom URL in server settings then NO, you don't need to change any code.

kurma7 years ago

actually i was trying for this for the past 20 day , finally approached you, so there is no way that i could use my own maps. thank you for your clarifications. if there is any thing new i would contact you.
satya

franck kaze3 years ago

Bonjour Mr,
En effet, mon problème est le suivant : après l’installation et la configuration basique de traccar, je me rend compte que les maps par défauts manquent beaucoup de donner et parfois aussi de précision.
- J’aimerai pouvoir utiliser les données de ‘’google maps’’ ou de ‘’bing maps’’, bref intégré une carte ou les données d’une carte qui pourrait m’apporter plus de précisions.

Très cordialement…

Anton Tananaev3 years ago

Bing map is supported out of the box. There's Also documentation on how to use Google maps.

franck kaze3 years ago

Comment puis-je faire pour utiliser la carte de bing celle de google maps ?
Bien vouloir me détailler la procédure ou m’envoyer un lien vers la documentation.
Très cordialement…