[Question] Centering the map by geolocation?

jlstanus commented 6 years ago

As the center of the map is defined in the settings,

How to use optionnaly geolocation with GeoIP2 or https://leafletjs.com/plugins.html#geolocation ?

sikmir commented 6 years ago

Maybe this helps:

LEAFLET_CONFIG = {
    ...
    'PLUGINS': {
        'leaflet.locatecontrol': {
            'css': 'leaflet.locatecontrol/dist/L.Control.Locate.min.css',
            'js': 'leaflet.locatecontrol/dist/L.Control.Locate.min.js',
            'auto-include': True
        }
    }
}

  <script>
    function main_map_init (map, options) {
      L.control.locate({
        drawCircle: false,
        icon: "fa fa-location-arrow",
        strings: {
          title: "Show My Location"
        }
      }).addTo(map);
      ...
  </script>

jlstanus commented 6 years ago

Thank you very much, it's what i was looking for!

jlstanus commented 6 years ago

@sikmir I try the same with the widgets in forms but it's not working. Works in TemplateView not in Create The code above works well in TemplateView but not with CreateView. Where do i insert the following code :

 <script>
    function main_map_init (map, options) {
      L.control.locate({
        drawCircle: false,
        icon: "fa fa-location-arrow",
        strings: {
          title: "Show My Location"
        }
      }).addTo(map);
      ...
  </script>

jlstanus commented 6 years ago

@sikmir , Here is my code:

The plugin locate is not displayed

settings.py


LEAFLET_CONFIG = {
    'DEFAULT_CENTER': (50.28, 4.52),
    'DEFAULT_ZOOM' : 5,
    'MAX_ZOOM': 18,
    'MIN_ZOOM': 4,
    'PLUGINS': {
        'leaflet.locatecontrol': {
            'css': 'dist/L.Control.Locate.min.css',
            'js': 'dist/L.Control.Locate.min.js',
            'auto-include': True
        },
        'leaflet-ajax': {
            'css': '',
            'js': 'dist/leaflet.ajax.js',
            'auto-include': True
        },
        'forms': {
            'auto-include': True
        }
    }
}

base.html


<!DOCTYPE html>
<html>
{% load static %}
{% load leaflet_tags %}
<head>
    <title>{% block title %}{% endblock %}</title>
    {% leaflet_js plugins="ALL" %}
    {% leaflet_css plugins="ALL" %}
    <style type="text/css">
        #gis #id_location-map {width: 80%;height: 780px;}
    </style>
</head>

<header>Open Cave Map</header>
    <nav>
        <a href="{% url 'place_create' %}">New Scan</a>
        <a href="{% url 'places_list' %}">Scan List</a>
        <a href="/Scanner/">Scanner</a>
    </nav>
    <body>
        {% block content %}{% endblock content %}
    </body>
</html>

place_form.html


{% extends "base.html" %}
{% load static %}
{% load leaflet_tags %}

{% block title %}Scan cave places{% endblock %}

{% block content %}
    <h1>Create new scan</h1>
    <br>
    <form method="post" action="">
        {% csrf_token %}
        {{ form.as_p }}
    <script type="text/javascript">
        function location_layer(map, options){
            var locate = L.control.locate({
                drawCircle: false,
                icon: "fa fa-location-arrow",
                position : 'topright',
                maxZoom: 4,
                strings: {
                    title: "Show My Location"
                }
            });
            locate.addTo(map);
        }
    </script>
    {% leaflet_map "main" callback="map_init" %}
    <input type="submit"/>

{% endblock content %}

makinacorpus / django-leaflet

[Question] Centering the map by geolocation? #232