Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

81
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda