How to add a custom map?

[emanueldev1]

How to add a custom map?

[emanueldev1]

Skill issues

What?

[SaiCode-DEV]

You first have to get a image of a custom map and match it to the existing maps (to keep scale etc).

Then you need to use a tool like https://hub.docker.com/r/niene/gdal2tiles-leaflet (the best still working) to slice the singe one layer into multible smaller ones. i used: sudo docker run --rm -v `pwd`:/data niene/gdal2tiles-leaflet -l -p raster -z 0-5 -w none /data/gta-darkmode-map.png /data/gta-darkmode-map/ Lastly you can add it as an additional tyle layer in the script.

[SaiCode-DEV]

the file i used was: https://workupload.com/file/puUd5xQZwcs but you can use whatever image you want (or you can send it here if help is needed)

[SaiCode-DEV]

Skill issues

And perhaps a little bit less toxic might be useful... Even though i hate QuasarStore because of their horrible Support after purchasing the Phone script..

[Shotman]

You first have to get a image of a custom map and match it to the existing maps (to keep scale etc).

Then you need to use a tool like https://hub.docker.com/r/niene/gdal2tiles-leaflet (the best still working) to slice the singe one layer into multible smaller ones. i used: sudo docker run --rm -v `pwd`:/data niene/gdal2tiles-leaflet -l -p raster -z 0-5 -w none /data/gta-darkmode-map.png /data/gta-darkmode-map/ Lastly you can add it as an additional tyle layer in the script.

~~I've tried your docker container and I just overlapped my map over an existing one from the styles provided but it doesn't work, any parameters I should add ? The JS console shows errors like this : file:///D:/Dev/gta-v-map-leaflet/mapStyles/styleCustom/1/0/0.jpg net::ERR_FILE_NOT_FOUND And I see the file tree of my custom map doesn't match the ones provided, so maybe there is an issue configuring the docker component, like centering etc ?~~

I used it as is and saw that the command created png files so I went there https://stackoverflow.com/questions/6863021/convert-all-images-to-jpg and used the function with the -recurse argement on the GetChildItem command to convert everything to jpg and it works. If that can help someone

[cfxac]

question i tried adding my map to it i did the steps it split up the gta 4 map into diff pngs and it not showing nothing

idk if im doing somehting wring but if i share my code can someone help?

` // Map initialization function function initializeMap() { const mapContainer = document.getElementById("map"); if (mapContainer) { // Remove any existing map instance if (window.mymap) { window.mymap.remove(); }

    // Map configuration
    const mapConfig = {
      center_x: 117.3,
      center_y: 172.8,
      scale_x: 0.02072,
      scale_y: 0.0205,
    };

    const CUSTOM_CRS = L.extend({}, L.CRS.Simple, {
      projection: L.Projection.LonLat,
      scale: (zoom) => Math.pow(2, zoom),
      zoom: (sc) => Math.log(sc) / 0.6931471805599453,
      distance: (pos1, pos2) => {
        const x_difference = pos2.lng - pos1.lng;
        const y_difference = pos2.lat - pos1.lat;
        return Math.sqrt(x_difference * x_difference + y_difference * y_difference);
      },
      transformation: new L.Transformation(
        mapConfig.scale_x,
        mapConfig.center_x,
        -mapConfig.scale_y,
        mapConfig.center_y
      ),
      infinite: true,
    });

    // Map layers
    const mapStyles = {
      Satellite: L.tileLayer("nymap/nymap/{z}/{x}/{y}.png", {
        minZoom: 0,
        maxZoom: 6,
        noWrap: true,
        continuousWorld: false,
        id: "nymap map",
      }),
    };

    // Create new map instance
    const mymap = L.map("map", {
        crs: CUSTOM_CRS,
        minZoom: 1,
        maxZoom: 4,
        zoom: 3,
        maxNativeZoom: 5,
        preferCanvas: true,
        layers: [mapStyles.nymap],
        center: [0, 0],
      });
  
      // Add layer group to map
      crimeLayerGroup.addTo(mymap);
      window.mymap = mymap;
  }
}`

`

`