map layer
как добавить карту спутникового снимка или купить карту электронную, какую лучше и как это реализовать???
Official documentation about map layers is here:
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>
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?
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
Have you checked browser developer console for errors when it didn't work? That's the first thing you should do.
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>
I don't understand what the code sample is for. Are you talking about Traccar?
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
If you are using custom URL in server settings then NO, you don't need to change any code.
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
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…
Bing map is supported out of the box. There's Also documentation on how to use Google maps.
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…
i want to see the default maps traccar(OSM),What is the file name that contains the map??