[Leaflet] Map opschuiven tov markers

[MrDummy]

Hallo,

Ik heb wat gezocht maar kan door de bos de bomen niet goed zien.
Ik weet dat ik een offset moet hebben om map in de goede positie te zetten.
Er is alleen niet zoveel examples zodat ik weet welke ik moet nemen.

Ik heb een grote map in tiles in de website gedaan. Daar heb ik heleboel markers erop gezet.
Maar later vind ik een betere grote map en wil dat even toepassen. Helaas heeft andere map een andere afmeting en ook zoom level.
Maar dat zou geen probleem moeten zijn. Ik hoef alleen maar nieuwe 0,0 punt (dus een nieuwe center zoeken voor de nieuwe map) even goedzetten.
Hierna zouden de markers vanzelf op de juiste plek staan nadat map opgeschoven is.

Ik kan ook elke marker omzetten naar nieuwe coords, maar dat is meer werk

code:

var latLng = L.latLng([0,0]),
var point = map.latLngToContainerPoint(latLng);
var newPoint = L.point([point.x - 10, point.y - 57]);
var newLatLng = map.containerPointToLatLng(newPoint);

Het is veel makkelijker om gewoon map even op te schuiven. Ik heb helaas nog niet kunnen ontdekken welke code het moet zijn. Het gaat om L.TileLayer die opgeschoven moet worden.

code:

        var bdoUrl = 'images/map/{z}/{x}-{y}.jpg';
    var bdo = new L.TileLayer(
            bdoUrl, {
            attribution: bdoAttrib,
            tms: false,
            continuousWorld: true,
                        maxZoom: 7,
            minZoom: 3
            }
        );
    map.addLayer(bdo);

Het moet geen setView zijn, want dat schuift alles op, met markers. Alleen map zelf moet opgeschoven worden.

Wie heeft een tip voor me welke code het moet zijn? Alvast dank.
Daar moet het in zitten, direct bij de init.

Volgens leaflet is hier code "center", maar kan dat in addLayer?

Zag verder een code elders:

code:

MapCenterOffsetMixin = {
    UIOffset: [550, 0], // x, y
    getBounds: function(){
        var a=this.getPixelBounds(),
            b=this.unproject(new L.Point(a.min.x+this.UIOffset[0],a.max.y+this.UIOffset[1]), this._zoom,!0),
            c=this.unproject(new L.Point(a.max.x,a.min.y),this._zoom,!0);
            return new L.LatLngBounds(b,c)
    },
    _latLngToNewLayerPoint: function (latlng, newZoom, newCenter) {
        var targetPoint = this.project(newCenter, newCenter).subtract([this.UIOffset[0]/2, this.UIOffset[1]/2]),
            newCenter = this.unproject(targetPoint, newZoom);
        var topLeft = this._getNewTopLeftPoint(newCenter, newZoom).add(this._getMapPanePos());
        return this.project(latlng, newZoom)._subtract(topLeft);
    },
    _getCenterLayerPoint: function () {
        return this.containerPointToLayerPoint(this.getSize().divideBy(2).add([this.UIOffset[0]/2, this.UIOffset[1]/2]));
    },
    _resetView: function (a, b, c, d) {
        var e = this._zoom !== b;
        // Change the center
        var targetPoint = this.project(a, b).subtract([this.UIOffset[0] / 2, this.UIOffset[1]/2]),
            a = this.unproject(targetPoint, b);
        d || (this.fire("movestart"), e && this.fire("zoomstart")), this._zoom = b, this._initialTopLeftPoint = this._getNewTopLeftPoint(a);
        if (!c) L.DomUtil.setPosition(this._mapPane, new L.Point(0, 0));
        else {
            var f = L.DomUtil.getPosition(this._mapPane);
            this._initialTopLeftPoint._add(f)
        }
        this._tileLayersToLoad = this._tileLayersNum, this.fire("viewreset", {
            hard: !c
        }), this.fire("move"), (e || d) && this.fire("zoomend"), this.fire("moveend"), this._loaded || (this._loaded = !0, this.fire("load"))
    }
}

L.Map.include(MapCenterOffsetMixin);

Is deze bruikbare oplossing, indien ja, waar pas ik die toe?

Alvast dank.

[MrDummy]

Na uren prutsen heb ik gevoel dat er geen functie voor bestaat.
De functie

map.setCenter(new L.LatLng(-39.3683,-67.5));

werkt niet, het staat ook niet in lijst van Leaflet 0.7.7.

Ik heb gevoel dat er geen oplossing is, internet heeft bijna geen voorbeelden om map te voorzien van andere 0,0 positie (m.a.w. opschuiven).
De zoom correctie is er wel (zoomOffset) maar dat is alleen voor tile nummer omhoog of omlaag.
LayerOffset bestaat niet.

Waarschijnlijk zal ik alle markers maar moeten omzetten met een omzet script naar nieuwe map opzet. De nieuwe map schuift namelijk op tov oude map en nieuwe map is ook iets kleiner dan oude map. Dat is dubbel probleem.

Ik kan dus 2 opties doen:
- Geheel nieuwe tiles aanmaken (zal ik via generatie script doen, want photoshop duurt te lang) - dit heeft voordeel dat onzekerheid rond markers posities (dus omzet fouten) niet aanwezig is. Alleen door opnieuw opbouwen zal er lichte verlies ontstaan in kwaliteit, dus onscherpte.
- Alle markers omzetten naar nieuwe coords, welke snelste en beste optie is. Hiervoor moet ik uitzoeken wat de verschuiving en zoomafwijking is. Dit zal enige tijd kosten en dus veel controleren of alles klopt.

Vroeger heb ik al eens naar gevraagd, er was toen ook geen echt antwoord. Dit kan bevestigen dat er geen oplossing is. Het is niet duidelijk of versie 1.0 wat meer opties heeft.

Er is misschien nog een optie: https://github.com/kartena/Proj4Leaflet
Dan wordt de nieuwe map geprojecteerd over oude. Maar het is geen echte oplossing. Het moet straks 1 map worden.

[Nico Klus]

Ik zou denken dat je dit met het CRS (coördinaten referentie systeem ) regelt.

[MrDummy]

Ik heb gezien na wat Googlen. Omdat ik geen kennis mee heb wordt het veel uitrekenen voor mij om juiste projectie waarden te vinden.
Een flinke stap voor mij om alles werkend te krijgen.
Nieuwe tiles maken is eenvoudigst te doen maar natuurlijk wat werk, maar wel vrijwel foutloos en heeft maar 1 berekening nodig.

De coords zijn in LatLng, dat zal wel EPSG:3857 zijn, denk ik.
Ik ga wat tests uitvoeren met aantal examples op internet om te kijken of ik heb begrepen, zoniet, dan val ik op nieuwe tiles maken.

[Nico Klus]

De kaart zal wel EPSG:3857 zijn, maar je markers?
van GPS? Dan zijn ze vast wgs84 (EPSG: 4326)
ik zal eens kijken wat ik gedaan heb om RD om te zetten naar EPSG:3857), was met proj4leaflet

[Nico Klus]

Ik zie in je code

code:

var bdoUrl = 'images/map/{z}/{x}-{y}.jpg';

moet dat niet

code:

var bdoUrl = 'images/map/{z}/{x}/{y}.jpg';

zijn?