ThinkGeo.com    |     Documentation    |     Premium Support

Customizing Openstreetmap

#1

Hi,

Can we customize openstreetmap into different styles?
I am using following code to display Openstreetmap in my application using Thinkgeo Web edition.

OpenStreetMapLayer openStreetMapLayer = new OpenStreetMapLayer();
openStreetMapLayer.ZoomlevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
LayerOverlay worldOverlay = (LayerOverlay)wfMap.CustomOverlays[“World Map”];
worldOverlay.IsVisible = true;
worldOverlay.IsBaseOverlay = true;
worldOverlay.Layers.Add(“worldLayer”, openStreetMapLayer);

please check this URL… https://openmaptiles.org/styles/
I need something like this. Wanted to show our openstrretmap into different styles.

Please give me some solution.

Thanks,
Ashok

#2

Hi Ashok,

For the OpenStreetMapLayer, it get raster image tile from remote server, we cannot modify the style of it. And the link you mentioned is render the vector tile, it’s totally different.

But you can try our new ThinkGeoCloudMapsOverlay, which is introduced in 10.4, it also support vector tile and it support apply the different styles, the new feature will get enhanced in near future.

In fact we have a future version map here: https://github.com/ThinkGeo/VectorMap-js, it’s based on vector map, you can quickly set a group of styles for your map in some hours, please view it and you can try it.

Regards,

Ethan

#3

Hi Ethan,

Thanks for your reply. I will try with “ThinkGeoCloudMapsOverlay”. And,

Can you just brief me what additional features have released in this 10.4. So that I can update my code also…

Thank you…
Ashok

#4

Hi Ethan,

We tried with “ThinkGeoCloudMapsOverlay”, And here is my sample code… but i am not getting any map…

I used API key of example you sent above - “A4_MkfJUJSwFGBQEbkJpybsDJpqTPNLKPTyeZKoeJhQ~”
And i tried with my Login API key also “8eq6VRQgUfcr1DqCmx2W7xHP0VExRSOD7jQ8T_70pG0~”

But map is coming as blank.

Proj4Projection _proj = new Proj4Projection();
_proj.InternalProjectionParametersString = Proj4Projection.GetEpsgParametersString(4326);
_proj.ExternalProjectionParametersString = Proj4Projection.GetGoogleMapParametersString();
_proj.Open();
ThinkGeoCloudMapsOverlay tcmo = new ThinkGeoCloudMapsOverlay(“8eq6VRQgUfcr1DqCmx2W7xHP0VExRSOD7jQ8T_70pG0~”);
tcmo.MapType = ThinkGeoCloudMapsMapType.Aerial;
tcmo.WrapDateline = WrapDatelineMode.WrapDateline;

                tcmo.MaxExtent= _proj.ConvertToExternalProjection(new RectangleShape(-180, 90, 180, -90));
                tcmo.IsVisible = true;

wfMap.CustomOverlays.Add(tcmo);

This is my output…

one.png1764×999 58.8 KB

And I opened one of the Tile request from browser console. And it’s showing following message. I think problem with API key. Please check and provide me a working API.

image.png1294×658 22.5 KB

Please check it, and give me proper solution.

Thanks
Ashok

#5

Hi Ashok,

Here is the sample code which works:

                Map1.MapUnit = GeographyUnit.Meter;
            Map1.ZoomLevelSet = ThinkGeoCloudMapsOverlay.GetZoomLevelSet();

            Proj4Projection _proj = new Proj4Projection();
            _proj.InternalProjectionParametersString = Proj4Projection.GetEpsgParametersString(4326);
            _proj.ExternalProjectionParametersString = Proj4Projection.GetGoogleMapParametersString();
            _proj.Open();

            ThinkGeoCloudMapsOverlay worldOverlay = new ThinkGeoCloudMapsOverlay();
            worldOverlay.MapType = ThinkGeoCloudMapsMapType.Aerial;
            worldOverlay.WrapDateline = WrapDatelineMode.WrapDateline;                
            Map1.CustomOverlays.Add(worldOverlay);
                            
            Map1.CurrentExtent = _proj.ConvertToExternalProjection(new RectangleShape(-180, 90, 180, -90));

Please notice:

For ThinkGeoCloudMapsOverlay:

  1. For now it works for meter
  2. You need to set Map1.ZoomLevelSet = ThinkGeoCloudMapsOverlay.GetZoomLevelSet(); when use it
  3. Please don’t set MaxExtent of it
  4. The key for webforms should be JavaScript Key in GisServer
  5. You can don’t set the key and the tile image will contains watermark

Pasted image974×663 577 KB

Regards,

Ethan

#6

Hi.

Thank you so much, it is working fine… But we doesn’t want to show Thinkgeo watermark .

Can we remove the watrermark… please let us know …

Thank you
Ashok

#7

Hi Ashok,

Set APIKey can remove the watermark.

You can get “JavaScript” type APIKey in your GisServer account.

Regards,

Ethan

#8

Hi Ethan,

We have implemented “ThinkGeoCloudMapsOverlay” , and it has 4 kinds base maps, its working fine. And Thank you very much for the help.

But here we have one additional requirement that, Can we modify the style of our basemap??? Like switching on/off countries name, roads, labels etc. If we can do, it will be great for me.

please give some idea/solution for making it.

Thank you
Ashok

#9

Hi Ashok,

It’s just the first version of ThinkGeoCloudMapsOverlay, for currently version custom style is not supported.

I think support custom style is also in the plan, but I cannot make sure when it will be added.

Thanks to let us know the requirement, I will let our development team know it.

Regards,

Ethan