use map with custom images

[FredT]

Do you have a basic Map component (ie not linked by default to a Google map) to browse our own images ?

Thank.

[Alexander Bulei]

Hi FredT,

I think, you need to check the MapQuery component and demo (JQueryDemoV3_IW14).

Best Regards.

[FredT]

Hi,

About the MapQuery component, what is the format of the file that we put in Url?
(Http://vmap0.tiles.osgeo.org/wms/vmap0) Is it an image file, an html file?

I tried this:

I used the MapTilerDesktop software to generate the tiles from my image: it generated me a html file, a json file containing the coordinates of the tiles and finally the tiles themselves. (When I open html file, it works perfectly)

Then I filled in the properties of MapQuery, with the html file in Url:

Layer: = IWCGJQMapQuery.MapQueryOptions.Layers.Add;
Layer.LayerType: = mqltWMS;
Layer.LayerOptionsWMS.Url: = 'http://...IP.../openlayers.html';
Layer.LayerOptionsWMS.Layers: = 'basic';

But it does not matter.

Thank

[Alexander Bulei]

Hi FredT,

Please check our main demo for the component usage, but I'm not sure if it supports your tile server...

Best Regards.

[FredT]

Hi,

I looked at the demos, and I understood that the GMap and GMap3 components worked exclusively with Google and maps, and that to display an image other than a map you had to use the MapQuery component.

But I do not understand how?

What I want to do is turn an image into a tile map and then open it in your Map component.

How to do it?
What method should I use to create my tiled images in a format readable by your Map component?
Taking into account that the images I want to use are not maps and not coordinate systems.

Thank you

[assapan]

I did it last year , let me some time to check and i'll try to explain

[assapan]

Hi,
Have a look to this to check if it's what you want http://gdv.assapan.fr:8889

in order to do that you must set

Code: Select all

      Map.JQGMapV3Options.ImageMapType.Id := 'test';
      Map.JQGMapV3Options.ImageMapType.Options.MaxZoom := 9;
      Map.JQGMapV3Options.ImageMapType.Options.MinZoom := 6;
      Map.JQGMapV3Options.ImageMapType.Options.Name := 'test';
      Map.JQGMapV3Options.ImageMapType.Options.TileSize.Width := 256;
      Map.JQGMapV3Options.ImageMapType.Options.TileSize.Height := 256;
      Map.JQGMapV3Options.Map.Options.MapTypeCustomId := 'test';
      L := TStringList.Create;
      L.LoadFromFile(WebApplication.ApplicationPath + 'myMap.js');
      Map.JQGMapV3Options.ImageMapType.Options.GetTileUrl.Script := L.Text;
      L.Free;


and in myMap.js

Code: Select all

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

    var normalizedCoord = getNormalizedCoord(coord, zoom);
    if (!normalizedCoord) {
        return null;
    }
    var bound = Math.pow(2, zoom);
    var x = normalizedCoord.x;
    var y = (bound - normalizedCoord.y - 1);
   img = 'http://yourserver/zoom' + zoom + '/' + x + '/'+zoom+'_'+x+'_' +y + '_new-min.png';
    return img;
}

[assapan]

Server directory

[FredT]

Hi Assapan,

Your myMap.js file helped me understand the way tiled images work.

But how did you create the tiles from the original image ?
With an existing program or did you create them yourself ?

Thank

[assapan]

Hi,
I used MapTiler