CODEWITHSUNDEEP
mapboxmapbox-gl
David Jones
David Jones

Reputation: 10219

Markers not appearing using the Mapbox GL JS API

I'm following these docs, but the code below does not render a marker. Any ideas why?

mapboxgl.accessToken = "pk.eyJ1IjoiZGlsbHBpeGVsIiwiYSI6ImNqM3A1YWV4czAwa3cyd3BmeWR4OTJ4NGEifQ.atNs-3fdoNghDcrdKwtIkA";
var map = new mapboxgl.Map({
  container: "map",
  center: [-74.50, 40],
  zoom: 6,
  scrollZoom: false,
  style: "mapbox://styles/mapbox/light-v9",
});
map.addControl(new mapboxgl.NavigationControl(), "top-left");
var marker = new mapboxgl.Marker().setLngLat([-74.50, 40]).addTo(map);
#map {
  height: 320px;
}
<link href="//api.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css" rel="stylesheet"/>
<script src="//api.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js"></script>
<div id="map"></div>

Upvotes: 4

Views: 9924

Answers (2)

nisanth a
nisanth a

Reputation: 1

Try to restart your application. If it doesn’t work, try to add this style in the global css file:

.mapboxgl-marker {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border:1px solid gray;
    background-color:lightblue;
}

In some cases, the marker might be present but not visible due to lack of styling. You could try adding some CSS to style the marker.

Upvotes: 0

Matix
Matix

Reputation: 128

Check if you have installed the required CSS. The latest CSS can be found under this URL: https://unpkg.com/maplibre-gl/dist/maplibre-gl.css

Docs: https://maplibre.org/maplibre-gl-js/docs/#cdn

Upvotes: 2

Related Questions