1

I used QGIS and its qgis2web plugin to create a web map, using the Openlayers option (from Tom Chadwin and those who helped him!). I got everything working great, except, the initial view goes to 0 long 0 lat, in the ocean, south of Ghana. I have searched the web and found many suggestions for setting the initial view of an Openlayers map, and tried them as best I can (I am not a programmer and feel like a monkey copying and pasting code and hoping it works), but with one minor exception after making the edits I get a blank map so have to undo the edits. (The minor exception was I got the initial view to move slightly by changing the extent coordinates in qgis2web.js to coordinates for the extent of my QGIS project, not a solution.)

I have qgis2web set to "fit to layers extent" (if I try canvas extent, the result is worse, my layers are miles above Earth and not lined up with Earth).

I have tried edits to qgis2web.js and other files based upon what these pages say, https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html (step 26), https://stackoverflow.com/questions/3556966/how-to-set-default-view-in-openlayers-without-restricting-bounds, and more.

I am using QGIS 3.4 and according to Plugin Manager the current version of qgis2web, on a Windows machine with Windows 10. All of my layers are EPSG:3857 - WGS 84 / Pseudo-Mercator - Projected. I have 3 x, y, z, tile service base maps, also the same CRS.

Here is a the unedited code in qgis2web.js where I think the fix should be applied (but am not sure).

var map = new ol.Map({
controls: ol.control.defaults({attribution:false}).extend([
    expandedAttribution,new measureControl()
]),
target: document.getElementById('map'),
renderer: 'canvas',
overlays: [overlayPopup],
layers: layersList,
view: new ol.View({
    maxZoom: 18, minZoom: 4, projection: new ol.proj.Projection({
    code: 'EPSG:3857',
    extent: [-20037508.342789, -20037508.342789, 20037508.342789, 20037508.342789],
    units: 'm'})
}) });

That is where I tried changing the extents to the extents of my project in QGIS, which seemed to move the initial view a little but not much (I returned those extents to as they were because my guess is those numbers include the entire world, which is ok so long as I don't need to change them to get the map to load on my project in the initial view).

Here are some of the edits I tried, which resulted in a blank map.

    var map = new ol.Map({
controls: ol.control.defaults({attribution:false}).extend([
    expandedAttribution,new measureControl() 
]),
target: document.getElementById('map'),
renderer: 'canvas',
overlays: [overlayPopup],
layers: layersList,
view: new ol.View({
    maxZoom: 18, minZoom: 4, projection: new ol.proj.Projection({
    code: 'EPSG:3857',
map.setCenter(new OpenLayers.LonLat(-74.006998, 40.722120)), 10,
    extent: [-20037508.342789, -20037508.342789, 20037508.342789, 20037508.342789],
    units: 'm'})
}) });

I think part of the problem may be that Openlayers has changed some of its terminology.

2 Answers 2

4

To open the view at those coordinates at zoom 10 use

view: new ol.View({
    maxZoom: 18,
    minZoom: 4,
    center: ol.proj.fromLonLat([-74.006998, 40.722120]),
    zoom: 10
}) 

EPSG:3857 is the OpenLayers default projection so need not be specified. You must convert Lon/Lat values to view projection coordinates (methods beginning OpenLayers. were used in OpenLayers 2, later versions use the prefix ol.)

1
  • Mike, thank you for your quick response. I tried what you suggest and the map continues to open at long 0 lat 0. Here is what I tried in qgis2web.js, with your edits var map = new ol.Map({ controls: ol.control.defaults({attribution:false}).extend([ expandedAttribution,new measureControl() ]), target: document.getElementById('map'), renderer: 'canvas', overlays: [overlayPopup], layers: layersList, view: new ol.View({ maxZoom: 18, minZoom: 4, center: ol.proj.fromLonLat([-74.006998, 40.722120]), zoom: 10 }) });
    – JJD
    Oct 1, 2019 at 21:42
3

In qgis2web.js, set the default view in the map and remove/comment the line after the map definition :

var map = new ol.Map({
    controls: ol.control.defaults({attribution:false}).extend([
        expandedAttribution
    ]),
    target: document.getElementById('map'),
    renderer: 'canvas',
    overlays: [overlayPopup],
    layers: layersList,
    view: new ol.View({
        maxZoom: 18,
        minZoom: 4,
        center: ol.proj.fromLonLat([-74.006998, 40.722120]),
        zoom: 10
    }) 
});

// Comment or remove this line otherwise the view will change :

//map.getView().fit([3517325.966496, 539248.370796, 3520871.526251, 541262.063608], map.getSize());
1
  • Léo M, that works. Thank you! I also learned a second way to fix the problem, which is to change the map.getView().fit extents to include your area of interest, and remove projection: new ol.proj.Projection() which I am told constrains the extent and does not center the map. A link to easily get your extents for Web Mercator and WGS84 is here link I learned that solution and link from a very helpful person at the US Geological Survey. Léo M's solution leaves the zoom level effective, which is good. Thank you all!
    – JJD
    Oct 4, 2019 at 17:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.