How to set my country to be default location when openning openlayer

Question

Hello, I am refering this site http://openlayers.org/en/latest/examples/localized-openstreetmap.html and its working fine with my internal tiles only for one country. I would like to understand

when i will type http://192.168.1.32/index.html , how Can I make my country to be default on the screen ? I tryed to use this " center: [23.75936, 90.37787]," but dont think thats the right place .

Bellow are the changed Code var openSeaMapLayer = new ol.layer.Tile({ source: new ol.source.OSM({ attributions: [ 'All maps © OpenSeaMap', ol.source.OSM.ATTRIBUTION ], opaque: false, url: 'http://192.168.1.32/hot/{z}/{x}/{y}.png' }) });

  var map = new ol.Map({
    layers: [
      openCycleMapLayer,
      openSeaMapLayer
    ],
    target: 'map',
    controls: ol.control.defaults({
      attributionOptions: {
        collapsible: false
      }
    }),
    view: new ol.View({
      maxZoom: 25,
      center: [23.75936, 90.37787],
      zoom: 9
    })
  });

Accepted Answer

1

Hello fosiul,

By default, OpenLayers uses Web Mercator Projection (EPSG:3857). So you cannot use Longitude, Latitude directly to set the center.

This is what you should use :

view: new ol.View({
  maxZoom: 25,
  center: ol.proj.fromLonLat([90.37787,23.75936]),
  zoom: 9
})

More documentation on ol.proj : http://openlayers.org/en/latest/apidoc/ol.proj.html

answered 25 May '18, 13:54

jbelien
146●1●2●9
accept rate: 16%

edited 26 May '18, 11:28

Hello Jbelien, Thanks for the References, i will read thsoe in details now, however for this I have changed this bellow, but when i open the browser its all blue then iw ill neeed to move to right place to get the county.

view: new ol.View({ maxZoom: 25, center: ol.proj.toLonLat([23.7593572,90.3788136]), zoom: 9

the reference county lat/lon is here

https://www.openstreetmap.org/node/3442474911 I will also upload a picture to show what i get when i open the browser Thanks

(25 May '18, 14:25) fosiul

picture attached in this link https://ibb.co/hLwa38

but if i zoom in/out right side then i can see the country

(25 May '18, 14:27) fosiul

I think you switched Latitude and Longitude.
Parameter for ol.proj.toLonLat is Longitude, Latitude and not Latitude, Longitude !

view: new ol.View({
  maxZoom: 25,
  center: ol.proj.toLonLat([90.37787, 23.75936]),
  zoom: 9
})

(25 May '18, 14:28) jbelien

Hi Jbelien, Sorry missed your post, i actually tryed this , but by putting zoom:4 , i see map but not the right one default, see the screen shot at https://ibb.co/h0dbd8

view: new ol.View({ maxZoom: 18, center: ol.proj.toLonLat([90.527,23.918]), zoom: 4 })

its actually slightly off the page , if i drag the mouse bit right then i see the map : https://ibb.co/cqoHJ8, but i need to make this map in the front page Thanks for the help.

(25 May '18, 21:44) fosiul

It looks like it's centering on 0,0 instead of your desired coordinates, so there must be something not quite right somewhere.

(26 May '18, 00:13) alester

@Alester, Thanks I am using this example http://openlayers.org/en/latest/examples/localized-openstreetmap.html

any idea.. where could be the problem ?

Thanks

(26 May '18, 01:07) fosiul

3

Shouldn't that be fromLonLat, not toLonLat? After all, you want to go from a lon/lat pair to projected coordinates.

(26 May '18, 09:12) turepalsson

1

@Turepalsson,

Thanks thats worked,

center: ol.proj.fromLonLat([90.413242,23.809595]),

Thanks for the help.

(26 May '18, 10:21) fosiul

1

Oh yes, stupid me ...

Of course it's fromLonLat() ... Sorry for the confusion !

I fixed the code of my "solution" :)

(26 May '18, 11:27) jbelien

showing 5 of 9 show 4 more comments