Kaip įdėti žemėlapį į savo svetainės puslapį

  • Žemėlapio talpinimas svetainėje
  • Lietuviškas vektorinių žemėlapių serveris

Patalpinti žemėlapį savo svetainėje labai paprasta. Žemiau pateiktas nedidelis kodo pavyzdys įdeda žemėlapio elementą HTML puslapyje.

Žemėlapiai interneto svetainėse atvaizduojami interaktyviai parsiunčiant žemėlapio informaciją mažais kvadratėliais (plytelėmis). Todėl žemėlapio veikimui reikalingas žemėlapio serveris (vector tile server). Pavyzdyje nurodytas MapX platformos serveris.

Pavyzdyje naudojamas demonstracinis "demo" naudotojo raktas (APIKEY). Norėdami naudoti realiame projekte, susisiekite dėl savo rakto.

Žemėlapio pridėjimo žingsniai

1. Pridėkite DIV elementą žemėlapio vietai HTML puslapyje:


<!-- The map container MUST have a height -->
<div id="map" style="width: 100%; height: 500px;"></div>

2. Pridėkite JavaScript kodą žemėlapio inicializavimui:


const bounds = [
        [20, 53], // Left, Bottom.
        [28, 57]  // Right, Top.
    ];
const map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.mapx.lt/styles/default.json?apikey=demo',
        center: [25.2799, 54.6872],
        zoom: 12,
        maxBounds: bounds,
        minZoom: 5,
        maxZoom: 18
    });

Pilnas puslapio HTML + JavaScript pavyzdys


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/maplibre-gl@5.7.3/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body>

<div style="max-width: 1000px; margin: 0 auto;">
    <header>
        <h1>MapX Tile Server Demo</h1>
        <p><a href="https://mapx.lt">MapX.lt</a></p>
    </header>

    <!-- The map container MUST have a height -->
    <div id="map" style="width: 100%; height: 500px;"></div>
</div>

<script src="https://unpkg.com/maplibre-gl@5.7.3/dist/maplibre-gl.js"></script>
<script>
    const bounds = [
        [20, 53], // Left, Bottom.
        [28, 57]  // Right, Top.
    ];
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.mapx.lt/styles/default.json?apikey=demo',
        center: [25.2799, 54.6872],
        zoom: 12,
        maxBounds: bounds,
        minZoom: 5,
        maxZoom: 18
    });

    map.addControl(new maplibregl.NavigationControl(), 'top-right');
    map.addControl(new maplibregl.ScaleControl({
        maxWidth: 200,
        unit: 'metric'
    }));

    // Optional: Add a marker.
    new maplibregl.Marker()
        .setLngLat([25.2799, 54.6872])
        .addTo(map);
</script>
</body>
</html>

Pritaikymas pagal poreikius

Vektorinius žemėlapius lengvai galima pritaikyti pagal individualius poreikius:

  • Keisti spalvas
  • Pridėti ar paslėpti elementus
  • Žymėti teritorijas, maršrutus, objektus
  • Įjungti žemėlapio objektų interaktyvumą