Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

80
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!