OSMWidgetのデフォルトズームレベルをJavaScriptで設定する方法

django.contrib.gis モジュールは、Django に地理空間データの機能を追加します。 gis.forms.widgets.OSMWidget は、OpenStreetMap ベースの地図を表示して、ユーザーが地理空間データを編集できるようにするウィジェットです。 default_zoom 属性は、地図の初期ズームレベルを制御します。

詳細

default_zoom 属性は、整数値で設定されます。値が大きいほど、地図はより詳細になります。デフォルト値は 12 です。

例

from django.contrib.gis import forms

class MyGeoForm(forms.Form):
    point = forms.PointField(widget=forms.OSMWidget(attrs={'default_zoom': 15}))

この例では、MyGeoForm フォームに point という名前の PointField が定義されています。このフィールドのウィジェットは OSMWidget であり、 default_zoom 属性が 15 に設定されています。これは、地図が初期状態で 15 倍のズームレベルに設定されることを意味します。

default_zoom 属性は、ユーザーが地図をズームインまたはズームアウトできることを妨げません。ユーザーは、地図上のコントロールを使用して地図をズームできます。
default_zoom 属性は、OSMWidget の他の属性と同様に、attrs 辞書を使用して設定できます。

例 1: 住所フィールドと関連する地図を表示する

この例では、住所フィールドと関連する地図を表示するフォームを作成します。ユーザーは地図をクリックして住所を編集できます。

from django.contrib import admin
from django.contrib.gis import forms
from django.contrib.gis import models

class Address(models.Model):
    """
    住所モデル
    """
    address = models.CharField(max_length=255)
    location = models.PointField(srid=4326)

class AddressAdmin(admin.ModelAdmin):
    """
    住所管理画面
    """
    form = forms.ModelForm(Address, {
        'location': forms.OSMWidget(attrs={'default_zoom': 15})
    })

admin.site.register(Address, AddressAdmin)

例 2: 複数の地点を編集するための地図を表示する

この例では、複数の地点を編集するための地図を表示するフォームを作成します。ユーザーは地図上の複数の場所をクリックして、新しい地点を追加したり、既存の地点を編集したりできます。

from django.contrib import admin
from django.contrib.gis import forms
from django.contrib.gis import models

class Location(models.Model):
    """
    地点モデル
    """
    name = models.CharField(max_length=255)
    location = models.PointField(srid=4326)

class LocationAdmin(admin.ModelAdmin):
    """
    地点管理画面
    """
    form = forms.ModelForm(Location, {
        'location': forms.MultiPointWidget(attrs={'default_zoom': 15})
    })

admin.site.register(Location, LocationAdmin)

管理画面を使用して、地点を作成および編集できます。
ユーザーは地図をクリックして、新しい地点を追加したり、既存の地点を編集したりできます。
default_zoom 属性を使用して、地図の初期ズームレベルを設定しています。
上記の例では、OSMWidget と MultiPointWidget を使用して、OpenStreetMap ベースの地図を表示しています。

JavaScript を使用する

JavaScript を使用して、地図の初期ズームレベルを設定することができます。これは、OSMWidget の attrs 辞書を使用して data-zoom 属性を設定することで実現できます。

from django.contrib.gis import forms

class MyGeoForm(forms.Form):
    point = forms.PointField(widget=forms.OSMWidget(attrs={'data-zoom': 15}))

この例では、MyGeoForm フォームに point という名前の PointField が定義されています。このフィールドのウィジェットは OSMWidget であり、 data-zoom 属性が 15 に設定されています。これは、JavaScript コードを使用して地図の初期ズームレベルを 15 に設定することを意味します。

以下の JavaScript コードは、data-zoom 属性を使用して地図の初期ズームレベルを設定する方法を示しています。

<script>
  var map = L.map('map', {
    center: [40.7128, -74.0060],
    zoom: 15
  });

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
</script>

カスタムウィジェットを作成する

OSMWidget を継承したカスタムウィジェットを作成し、 default_zoom 属性を独自に実装することもできます。

from django.contrib.gis.forms import OSMWidget
from django.utils.text import format_lazy

class MyOSMWidget(OSMWidget):
    def get_default_zoom(self):
        # 独自のロジックで初期ズームレベルを決定する
        return 15

class MyGeoForm(forms.Form):
    point = forms.PointField(widget=MyOSMWidget())

この例では、MyOSMWidget という名前のカスタムウィジェットが定義されています。このウィジェットは OSMWidget を継承しており、 get_default_zoom メソッドを独自に実装しています。このメソッドは、独自のロジックを使用して初期ズームレベルを決定します。

設定ファイルを使用する

設定ファイルを使用して、初期ズームレベルを定義することもできます。

DEFAULT_ZOOM = 15

class MyGeoForm(forms.Form):
    point = forms.PointField(widget=forms.OSMWidget(attrs={'data-zoom': DEFAULT_ZOOM}))

この例では、DEFAULT_ZOOM という名前の設定変数が定義されています。この変数は、初期ズームレベルを格納します。 MyGeoForm フォームは、data-zoom 属性を使用して DEFAULT_ZOOM 変数の値を設定します。

ユーザー入力を使用する

ユーザー入力を使用して、初期ズームレベルを決定することもできます。

class MyGeoForm(forms.Form):
    zoom = forms.IntegerField(label='初期ズームレベル')
    point = forms.PointField(widget=forms.OSMWidget(attrs={'data-zoom': '{% for value in form.cleaned_data.items %}{{ value.key }}={{ value.value }}{% endfor'}))

class MyGeoFormView(FormView):
    template_name = 'my_form.html'
    form_class = MyGeoForm

    def get_initial(self):
        initial = super().get_initial()
        initial['zoom'] = 15
        return initial

    def form_valid(self, form):
        # フォームデータを使用して処理を行う
        pass

この例では、MyGeoForm フォームに zoom という名前のフィールドが定義されています。このフィールドは、ユーザーが初期ズームレベルを入力できるようにします。 OSMWidget の attrs 辞書は、テンプレートエンジンを使用して zoom フィールドの値を動的に設定するように構成されています。