Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

85
Visualizações
Open Layers - Vector Layer doesn't show up on the map

So i'm new to Open Layers, i'm using it for a school project, i've watched some tutorials about how to add points to the map but for some reason the points are not showing, i'm not sure what i'm doing wrong, here's my code

blade.php

    <div id="map" class="map"></div>
    <div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
    </div>
    <script src="{{ asset('js/map.js') }}"></script>

map.js

import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Fill, Stroke, Style} from 'ol/style';
import Point from 'ol/geom/Point';
import Feature from 'ol/Feature';
import {fromLonLat, useGeographic} from 'ol/proj';
import {Circle} from 'ol/geom';
import Overlay from 'ol/Overlay';
import OSM from 'ol/source/OSM';

useGeographic();

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

var map = new Map({
        target: 'map',
        layers: [
            new TileLayer({
            source: new OSM({})
        }),
        ],
        view: new View({
            center: [/* here are some coordinates */],
            zoom: 16
        })
}); 

var overlay = new Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });

map.addOverlay(overlay);

var layer = new VectorLayer({
    source: new VectorSource({
    features: [
        new Feature({
            geometry: new Point(fromLonLat([/* here are some coordinates */])),
            name: 'layer one',
        })
        ]
    }),
    style: new Style({
        image: new Circle({
        radius: 7,
        fill: new Fill({color: 'black'}),
        stroke: new Stroke({
        color: [255,0,0], width: 2
        })
        })
    })
});

map.addLayer(layer);

I'm not sure if something's missing, the map does show up but the circle/point doesn't, help please.

almost 4 years ago · Santiago Trujillo
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda