GTA SA Online Map

DestinatioN · 7. Februar 2015, 10:16

Hallo,
ich versuche momentan eine Map für einen Server zu machen, auf der Basen und andere wichtige Orte markiert sein sollen.
Dies sollte am ende ungefähr so aussehen, nur ohne die Online Spieler.
cbcnr.com/mrx/map/map_web.php
livemap.gtasa.eu/

Weiß jemand wie man das macht?

//edit: Es sollte was fertiges sein

MfG
DestinatioN

Arno · 7. Februar 2015, 10:26

Guten Morgen,

zur Darstellung würde ich das Canvas-Element in Verbindung mit JS empfehlen. Am besten irgend ein Framework wie FabricJS. Dort zeichnest du einfach die Map als Bild und die einzelnen Punkte darüber. Die Daten der Punkte musst du in einer Datenbank abspeichern (x, y, Farbe, Kürzel, ....). Das mit dem Scrollen ist dann einfach eine Umrechnung der Koordinaten im Verhältnis zur Größe des sichtbaren Kartenabschnitts.

Gruß
Arno

DestinatioN · 7. Februar 2015, 10:33

Danke schonmal,
aber ich suche am besten noch eine einfachere Methode, da andere User auch was editieren müssen können.

Arno · 7. Februar 2015, 10:37

Also möchtest du das ganze nicht selber programmieren, sondern was fertiges nutzen?

DestinatioN · 7. Februar 2015, 10:40

Genau, hätte ich vlt. dazu schreiben sollen

Arno · 7. Februar 2015, 10:46

Wenn es um eine reale Karte geht, gibt es diverse Dienste, die so etwas anbieten. z.B. Google Maps. Ansonsten ist mir kein Dienst bekannt, in dem man eigene Karten definieren kann oder speziell auf GTA SA ausgelegt ist.

JJJan · 12. Februar 2015, 12:52

Ich würde dir empfehlen Leaflet zu verwenden. Ebenfalls biete ich dir an unsere Tiles zu verwenden, ein Beispiel findest du hier.

In dem Beispiel sind alle verfügbaren Styles eingebunden:

Quellcode

var DEFAULT = L.tileLayer('http://tiles.gtadb.com/gtasa/default/{z}/{x}/{y}.png', {minZoom: 12, maxZoom: 17,}),
DEFAULT2 = L.tileLayer('http://tiles.gtadb.com/gtasa/default2/{z}/{x}/{y}.png', {minZoom: 14, maxZoom: 17,}),
BING = L.tileLayer('http://tiles.gtadb.com/gtasa/bing/{z}/{x}/{y}.png', {minZoom: 14, maxZoom: 17,}),
SATELLITE = L.tileLayer('http://tiles.gtadb.com/gtasa/satellite/{z}/{x}/{y}.png', {minZoom: 14, maxZoom: 17, tms: true,});
var map = L.map('map', {
center: new L.LatLng(0.0, 0.0),
zoom: 14,
layers: [DEFAULT]
});
var STYLES = {
"DEFAULT": DEFAULT,
"DEFAULT2": DEFAULT2,
"BING": BING,
"SATELLITE": SATELLITE
};
L.control.layers(STYLES).addTo(map)

Alles anzeigen

DestinatioN · 12. Februar 2015, 15:30

Vielen Dank dafür.
Habe es jetzt geschafft.

GTA SA Online Map

GTA SA Online Map

Quellcode

Teilen

Benutzer online 1