qgis2web Initial view problem

Question

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.

Answer 1

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.)

Answer 2

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());