Devoplus Maps

Openstreetmap tabanlı harita servisi

Canlı Demolar

MapLibre GL JS

WebGL ile çalışıan, tema ve dil destekli harita entegrasyonu.

Leaflet

Leaflet 1.7 + protomaps-leaflet 5.x · Canvas render · flavor & lang seçici.

Endpoint'ler

Yol İçerik
/style/{theme}.json MapLibre style · light, dark, white, grayscale, black · ?lang=tr
/tiles/{z}/{x}/{y}.mvt Vector tile (PBF, Mapbox Vector Tile)
/tiles.json TileJSON metadata
/fonts/{fontstack}/{range}.pbf MapLibre glyph PBF'leri
/sprites/{theme}.{json|png} Sprite atlasları, @2x retina destekli

Kod örnekleri

MapLibre GL JS

tek HTML dosyası · cdnjs 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/4.7.1/maplibre-gl.min.css"
    />
    <style>html, body, #map { margin: 0; height: 100%; }</style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/4.7.1/maplibre-gl.min.js"></script>
    <script>
      const map = new maplibregl.Map({
        container: "map",
        style: "https://maps.devoplus.com.tr/style/light.json?lang=tr",
        center: [28.978, 41.013],
        zoom: 11,
      });
      map.addControl(new maplibregl.NavigationControl());
    </script>
  </body>
</html>

Leaflet

Leaflet 1.7.1 + protomaps-leaflet 5.1.0 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css"
    />
    <style>html, body, #map { margin: 0; height: 100%; }</style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/protomaps-leaflet@5.1.0/dist/protomaps-leaflet.min.js"></script>
    <script>
      const map = L.map("map").setView([41.013, 28.978], 11);
      protomapsL.leafletLayer({
        url: "https://maps.devoplus.com.tr/tiles/{z}/{x}/{y}.mvt",
        flavor: "light",
        lang: "tr",
        attribution:
          '© <a href="https://www.devoplus.com.tr/">Devoplus</a> | ' +
          '<a href="https://protomaps.com">Protomaps</a> © ' +
          '<a href="https://openstreetmap.org">OpenStreetMap</a>',
      }).addTo(map);
    </script>
  </body>
</html>

Sadece tile fetch (kütüphane yok)

curl / fetch 
# TileJSON metadata
curl https://maps.devoplus.com.tr/tiles.json

# Tek bir vector tile (İstanbul z11)
curl -o tile.mvt https://maps.devoplus.com.tr/tiles/11/1207/777.mvt

# Style JSON (MapLibre format)
curl https://maps.devoplus.com.tr/style/light.json?lang=tr

Özellikler

Aşağıdaki snippet'ler temel kurulumun üstüne ekleniyor — yukarıdaki örneklerde oluşturulan map değişkeni mevcut kabul edilir.

Kullanıcı konumu

Tarayıcı geolocation API'sini kullanır; kullanıcı HTTPS üzerinde izin verirse konumu döner.

MapLibre

const geolocate = new maplibregl.GeolocateControl({
  positionOptions: { enableHighAccuracy: true },
  showUserLocation: true,
});
map.addControl(geolocate);

// Buton ile tetiklemek için:
document
  .getElementById("locate-btn")
  .addEventListener("click", () => geolocate.trigger());

Leaflet

map.locate({
  setView: true,
  maxZoom: 14,
  enableHighAccuracy: true,
});

map.on("locationfound", (e) => {
  L.marker(e.latlng)
    .bindPopup(`Konumun (±${Math.round(e.accuracy)} m)`)
    .addTo(map)
    .openPopup();
});

map.on("locationerror", (e) => {
  alert("Konum alınamadı: " + e.message);
});

Marker + popup

Belirli bir koordinata marker yerleştirme ve marker'a tıklanınca açılan popup içeriği.

MapLibre

const popup = new maplibregl.Popup({ offset: 25 })
  .setHTML("<strong>İstanbul</strong><br>41.013, 28.978");

new maplibregl.Marker({ color: "#0ea5e9" })
  .setLngLat([28.978, 41.013])  // [lng, lat]
  .setPopup(popup)
  .addTo(map);

Leaflet

L.marker([41.013, 28.978])    // [lat, lng]
  .bindPopup("<strong>İstanbul</strong><br>41.013, 28.978")
  .addTo(map)
  .openPopup();

Poligon

Statik bir alan çizimi. Kullanıcı tarafından interaktif çizim için MapLibre veya Leaflet demolarının kaynağına bakın — her ikisi de "Poligon Çiz" butonuyla tıkla-ekle akışı içerir.

MapLibre

map.on("load", () => {
  map.addSource("alan", {
    type: "geojson",
    data: {
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: [[
          [28.95, 41.00], [29.00, 41.00],
          [29.00, 41.05], [28.95, 41.05],
          [28.95, 41.00],   // ilk noktayı tekrarla
        ]],
      },
    },
  });
  map.addLayer({
    id: "alan-fill", type: "fill", source: "alan",
    paint: { "fill-color": "#0ea5e9", "fill-opacity": 0.25 },
  });
  map.addLayer({
    id: "alan-outline", type: "line", source: "alan",
    paint: { "line-color": "#0284c7", "line-width": 2 },
  });
});

Leaflet

L.polygon(
  [
    [41.00, 28.95], [41.00, 29.00],
    [41.05, 29.00], [41.05, 28.95],
  ],
  {
    color: "#0284c7",
    weight: 2,
    fillColor: "#0ea5e9",
    fillOpacity: 0.25,
  },
)
  .bindPopup("Örnek alan")
  .addTo(map);