MapView

Molecule

Leaflet tabanlı etkileşimli harita. Tooltip destekli işaretçiler, predefined zone'lar (polygon), rota çizgisi (polyline) ve tıkla-ekle işaretçi modu.

Tam özellik — işaretçi + zone + rota

Preview

Code

<%- include('modules/ui/MapView', {
  center:  [41.015, 28.979],
  zoom:    6,
  height:  400,
  markers: CITIES,
  zones:   ZONES,
  routes:  ROUTES,
}) %>

Tıkla-ekle işaretçi modu

Preview

Code

<%- include('modules/ui/MapView', {
  center: [39.5, 35.0],
  zoom:   5,
  height: 360,
}) %>

Yalnız zone ve rota

Preview

Code

<%- include('modules/ui/MapView', {
  center: [39.5, 35.0],
  zoom:   5,
  height: 360,
  zones:  ZONES,
  routes: ROUTES,
}) %>

Source modules/ui/MapView.ejs

<%
var _id      = locals.id      || ('map-' + Math.random().toString(36).substr(2, 9));
var _center  = locals.center  || [39.9334, 32.8597];
var _zoom    = locals.zoom    || 6;
var _height  = locals.height  || 480;
var _markers = locals.markers || [];
var _zones   = locals.zones   || [];
var _routes  = locals.routes  || [];
var _cls     = locals.className || '';

var btnBase    = 'inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus px-2 py-1 text-xs';
var btnOutline = 'border border-border text-text-primary hover:bg-surface-overlay';
var btnActive  = 'bg-primary text-primary-fg';
%>



  
  

    

    <% if (_zones.length > 0) { %>
    
    <% } %>

    <% if (_routes.length > 0) { %>
    
    <% } %>

    
      Haritaya tıklayarak işaretçi ekleyin