Map setup

Edit your index.html so we're ready to render a full page map:

<!DOCTYPE html>
    <meta charset="utf-8">
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
    <div id="map-container"></div>

We'll start out with a map centered on San Diego showing a single XYZ source. Update your main.js so it looks like this:

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZSource from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj';

new Map({
  target: 'map-container',
  layers: [
    new TileLayer({
      source: new XYZSource({
        url: '{z}/{x}/{y}.jpg'
  view: new View({
    center: fromLonLat([-117.1493, 32.6965]),
    zoom: 12
A map of San Diego
A map of San Diego

results matching ""

    No results matching ""