1

I am building a viewer with Leaflet API and OpenStreetMap base. I want that when I enter this viewer it shows me immediately in the initial visualization the extension of my layer that I am using. For this, I am using the getBounds function together with fitBounds, but it doesn't work for me. I send the code:

var mapCenter = [-34.5, -70.65];

var myMap = L.map('map').setView(mapCenter, 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(myMap);

L.control.scale({
    metric: true,
    imperial: false,
    maxWidth: 200,
    position: 'bottomleft', 
    updateWhenIdle: true,
    scaleWidth: 0.5,
    scaleRatio: 50000 
}).addTo(myMap);

var line_style ={
    "color": '#8d7696',
    "weight":  6,
};

L.geoJson(line, {style: line_style}).addTo(myMap);

var bounds = line.getBounds();
myMap.fitbBounds(bounds); `

When I open the HTML the console gives me the following error: "Uncaught TypeError: line.getBounds is not a function" map.js:27

I am loading the "line.js" file as a .js file from another folder, but in the same directory, as shown below:

enter image description here

In this file I have declared the variable: "var line", so I doubt that this is the problem, since the viewer works, but it keeps showing me the coordinates that are shown at the beginning of the code, in the "mapCenter" variable, but such As I said at the beginning, I want the viewer to start with the spatial extension of the "line.js" file.

The code of the GeoJSON file, named "line", with a .js extension, is as follows:

   var line = {
    "type": "FeatureCollection", 
    "name": "Linea_3", 
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
     "features": [
        { "type": "Feature", "properties": { "FID_1": 12, "objectid": 0, "id": null, "lenght": 0.0, "nombre": "LINEA DE METRO PROYECTADA", "linea": "LINEA 3", "layer": "LINEA DE METRO PROYECTADA", "shape_leng": 0.0, "Shape__Len": 24222.569736400001, "GlobalID": "58e3e888-c17d-4ad0-8c04-e163f7756d48" }, "geometry": { "type": "MultiLineString", "coordinates": 
        [ [ [-70.689407292596499, -33.3665141168809], [-70.689158441804807, -33.367451093236603], [-70.687724919860102, -33.371315140984798], 
        [-70.685630872778106, -33.374845020541599], [-70.683858549305398, -33.377505314888403], [-70.683490279792295, -33.379345325424403],
         [-70.6826087880751, -33.381620222582001], [-70.681633000420504, -33.383068206493498], [-70.679181244669294, -33.385924053182698], 
         [-70.674814260725398, -33.391240889025298], [-70.673216942858005, -33.393740993165402], [-70.672194192022602, -33.395332048692602], 
         [-70.6707962951577, -33.396892997307901], [-70.669628861792305, -33.397916624979999], [-70.668560143349296, -33.398765748903102], 
         [-70.665778365739897, -33.401255938052302], [-70.663681228297307, -33.403558208610399], [-70.661372832930098, -33.406138211595703], 
         [-70.660791071660498, -33.407304582764603], [-70.659615864767503, -33.410298795723797], [-70.658297992687693, -33.413458265164898], 
         [-70.657087680992106, -33.415829990397903], [-70.656612709092897, -33.416911441048804], [-70.656015441093899, -33.4196465139539], 
         [-70.652865560613506, -33.4316842615046], [-70.653249836077705, -33.433079818599403], [-70.653092164593502, -33.434085204644497], 
         [-70.652915054584199, -33.435398995100499], [-70.652561790907896, -33.437535234800301], [-70.652231610323796, -33.440198145719002], 
         [-70.652000109986005, -33.4414382502911], [-70.651642257730401, -33.443995100880798], [-70.648989023693005, -33.459627888068503], 
         [-70.640988574420504, -33.457918598061198], [-70.631968263338294, -33.456018172154899], [-70.6296845612586, -33.455475801589699], 
         [-70.628255121455595, -33.455123531872097], [-70.629009648576996, -33.452483472622099], [-70.625578237333201, -33.452277550653598], 
         [-70.622119430249697, -33.453717478373903], [-70.617412260121, -33.452956547923399], [-70.612729283072696, -33.453338603603399], 
         [-70.607139641769706, -33.453929274518202], [-70.602681078206203, -33.454434606660399], [-70.597328706658502, -33.454987735551597],
          [-70.593923019472797, -33.455330837990999], [-70.589188341817604, -33.455516598432901], [-70.586892245503194, -33.455585989398301], 
          [-70.585839642987494, -33.455477984597799], [-70.583461045903505, -33.454917803272203], [-70.582099470136697, -33.454760320995497], 
          [-70.580060729459305, -33.454537809631802], [-70.578608041467305, -33.454425950180202], [-70.576166792872499, -33.454280658323199], 
          [-70.575779239392006, -33.454153448851699], [-70.574939391941498, -33.453496027500201], [-70.574637417550903, -33.453367407532802], 
          [-70.574224210587502, -33.453325622544199], [-70.572729233411707, -33.453431876225501], [-70.570526017784999, -33.453535268876102], 
          [-70.568090443783404, -33.453302324346502], [-70.567012723161795, -33.453247848506102], [-70.558938536388595, -33.452191894008401]]] } }
    ]
}; 
2
  • Any errors in the browser debugger console or network section? Please also edit your question and add content of line.js.
    – TomazicM
    Aug 28, 2023 at 19:46
  • Ahh, yes, this one: "Uncaught TypeError: line.getBounds is not a function", map.js:27
    – MrShaggy87
    Aug 28, 2023 at 19:48

1 Answer 1

4

You are trying to get bounds of GeoJSON object instead of GeoJSON layer. You also have one 'b' too many in your myMap.fitbBounds(bounds) statement.

It should be:

var layer = L.geoJson(line, {style: line_style}).addTo(myMap);
var bounds = layer.getBounds();
myMap.fitBounds(bounds);
9
  • It doesn't work, the display is still the same, but at least it doesn't tell me that "getBounds" is not a function anymore.
    – MrShaggy87
    Aug 28, 2023 at 20:22
  • Did you leave myMap.fitbBounds(bounds); in the code? It's necessary. What about errors in the browser debugger?
    – TomazicM
    Aug 28, 2023 at 21:08
  • I took out myMapFitBounds(bounds) and only left the two lines that you proposed. Regarding the errors, when I put your two lines in the code the console doesn't give me any error, it just doesn't do anything.
    – MrShaggy87
    Aug 28, 2023 at 21:20
  • 1
    Line myMap.fitbBounds(bounds); is needed. I had just put lines that have to be changed in my answer. It's edited now.
    – TomazicM
    Aug 28, 2023 at 21:40
  • I put the 3 lines, but it keeps starting the page by zooming in on the coordinates of the "mapCenter" variable and not on the extent of the "line" layer. When querying the console, the error remains the same: "Uncaught TypeError: myMap.fitbBounds is not a functio at map.js:26:7".
    – MrShaggy87
    Aug 29, 2023 at 13:30

Your Answer

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

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