Mapbox markers move when zooming in/out

user_13228519 0
Viewed 1422

I'm working on MapBoxgl and I want to add the location of a restaurant as a marker.

Here is my index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Com Viet</title>

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/e3c287111d.js" crossorigin="anonymous"></script>

    <!-- CSS Stylesheet -->
    <link rel="stylesheet" href="/Styles/style.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Oswald:500,700|Roboto+Condensed:300,400,600" rel="stylesheet">

    <!-- Mapbox API -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
    <!-- Mapbox Geocode -->
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css'/>
</head>

<body>

    <section id="map">
        <h1>Find Us</h1>

    </section>

    <script src="app.js"></script>

</body>

</html>

This is app.js:

mapboxgl.accessToken = 'pk.eyJ1IjoibWlvY2h1bmc3IiwiYSI6ImNrOG13cXoxbDA2c2UzbW1lcm1iZWZ5NnEifQ.5nuyV8naVrjogYKyx_TFzw';



const map = new mapboxgl.Map({
    container: 'map', //appears in the container with the ID map
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-0.1103, 51.5082], // Starting position [lng, lat]
    zoom: 11.89, // [Starting zoom]


});

// Custom Marker

var marker = new mapboxgl.Marker() // initialize a new marker
    .setLngLat([-0.1103, 51.5082]) // Marker [lng, lat] coordinates
    .addTo(map); // Add the marker to the map

// Geocode

var geocoder = new MapboxGeocoder({ // Initialize the geocoder
    accessToken: mapboxgl.accessToken, // Set the access token
    mapboxgl: mapboxgl, // Set the mapbox-gl instance
    marker: false, // Do not use the default marker style
    placeholder: '',
    proximity: {
        longitude: -0.1103,
        latitude: 51.5082
    }
});

// Add the geocoder to the map
map.addControl(geocoder);

The CSS is: 

#map {
    width: 100%;
    height: 500px;
}




mapboxgl.accessToken = 'pk.eyJ1IjoibWlvY2h1bmc3IiwiYSI6ImNrOG13cXoxbDA2c2UzbW1lcm1iZWZ5NnEifQ.5nuyV8naVrjogYKyx_TFzw';



const map = new mapboxgl.Map({
    container: 'map', //appears in the container with the ID map
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-0.1103, 51.5082], // Starting position [lng, lat]
    zoom: 11.89, // [Starting zoom]


});

// Custom Marker

var marker = new mapboxgl.Marker() // initialize a new marker
    .setLngLat([-0.1103, 51.5082]) // Marker [lng, lat] coordinates
    .addTo(map); // Add the marker to the map

// Geocode

var geocoder = new MapboxGeocoder({ // Initialize the geocoder
    accessToken: mapboxgl.accessToken, // Set the access token
    mapboxgl: mapboxgl, // Set the mapbox-gl instance
    marker: false, // Do not use the default marker style
    placeholder: '',
    proximity: {
        longitude: -0.1103,
        latitude: 51.5082
    }
});

// Add the geocoder to the map
map.addControl(geocoder);
#map {
 width: 100%;
 height: 500px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Com Viet</title>

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/e3c287111d.js" crossorigin="anonymous"></script>

    <!-- CSS Stylesheet -->
    <link rel="stylesheet" href="/Styles/style.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Oswald:500,700|Roboto+Condensed:300,400,600" rel="stylesheet">

    <!-- Mapbox API -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
    <!-- Mapbox Geocode -->
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css'/>
</head>

<body>

 

    <section id="map">
        <h1>Find Us</h1>
        
    </section>



    <script src="app.js"></script>

</body>

</html>

This is the first picture before zooming in This is the second picture after zooming in

I'm not sure what is causing the problem. Also the search box somehow seems to be above the map instead of inside it.

mapbox css html javascript
2 Answers

Your code is currently adding the marker to a map container which includes both the map and a heading "Find Us." This means the location is offset by the height of the heading. 

<section id="map">
    <h1>Find Us</h1>
</section>

To fix this you should move the map to its own <div> like this:

<section id="container">
  <h1>Find Us</h1>
  <div id="map"></div>
</section>

And your full code should look something like this: 

mapboxgl.accessToken = 'pk.eyJ1IjoibWlvY2h1bmc3IiwiYSI6ImNrOG13cXoxbDA2c2UzbW1lcm1iZWZ5NnEifQ.5nuyV8naVrjogYKyx_TFzw';



const map = new mapboxgl.Map({
    container: 'map', //appears in the container with the ID map
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-0.1103, 51.5082], // Starting position [lng, lat]
    zoom: 11.89, // [Starting zoom]


});

// Custom Marker

var marker = new mapboxgl.Marker() // initialize a new marker
    .setLngLat([-0.1103, 51.5082]) // Marker [lng, lat] coordinates
    .addTo(map); // Add the marker to the map

// Geocode

var geocoder = new MapboxGeocoder({ // Initialize the geocoder
    accessToken: mapboxgl.accessToken, // Set the access token
    mapboxgl: mapboxgl, // Set the mapbox-gl instance
    marker: false, // Do not use the default marker style
    placeholder: '',
    proximity: {
        longitude: -0.1103,
        latitude: 51.5082
    }
});

// Add the geocoder to the map
map.addControl(geocoder);
#map {
 width: 100%;
 height: 500px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Com Viet</title>

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/e3c287111d.js" crossorigin="anonymous"></script>

    <!-- CSS Stylesheet -->
    <link rel="stylesheet" href="/Styles/style.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Oswald:500,700|Roboto+Condensed:300,400,600" rel="stylesheet">

    <!-- Mapbox API -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
    <!-- Mapbox Geocode -->
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css'/>
</head>

<body>

 

<section id="container">
  <h1>Find Us</h1>
  <div id="map"></div>
</section>



    <script src="app.js"></script>

</body>

</html>

Disclaimer: I work at Mapbox

user_119592960

In addition to Patrick's answer, a problem I ran into was I was setting the mapbox width and height programmatically in the code to 100vh:

  dom: HTMLElement = this.elementRef.nativeElement;
  elements = dom.querySelectorAll('.mapboxgl-canvas');
  elements[0]['style']['height'] = '100vh';

I am using Angular, so your code for setting height & width might be different. When I switched it from 100vh to 100% this problem went away.

user_86124350
Related