django-material icon indicating copy to clipboard operation
django-material copied to clipboard

Support for GeoDjango Maps

Open psychok7 opened this issue 9 years ago • 6 comments

Is there any support or plans for GeoDjango Maps in the admin PointField for example?? At the moment i only get the text version SRID=4326;POINT (-4.306640624400504 12.72608429520555)

thanks

psychok7 avatar Nov 15 '16 11:11 psychok7

How GeoDjango supports them in the build-in django admin?

kmmbvnr avatar Nov 15 '16 11:11 kmmbvnr

@kmmbvnr In a "normal" Django admin installation you can see an actual map and you can choose an open street maps map for example, by importing from django.contrib.gis import admin and using OSMGeoAdmin. Everything works pretty much out of the box with Django admin

screen

psychok7 avatar Nov 15 '16 12:11 psychok7

To be more specific:

from django.contrib.gis import admin as gis_admin


class SecureOSMGeoAdmin(gis_admin.OSMGeoAdmin):
    openlayers_url = (
        'https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js'
    )

And

class AccommodationAdmin(SecureOSMGeoAdmin):
   pass

admin.site.register(Accommodation, AccommodationAdmin) 

The model:

class Accommodation(models.Model):    
    location = models.PointField(srid=4326, db_index=True, blank=True, null=True)

psychok7 avatar Nov 15 '16 12:11 psychok7

Mm, yep, that's need to be implemented. The scope of the open version of django-material is to cover the core django functionality.

Thanks for the code examples.

kmmbvnr avatar Nov 16 '16 06:11 kmmbvnr

If you want to display a map you could use some variation of this which has worked for me for now (I'm sure there is a better way to do it so if you know one please let me know!):

    def show_map(self, instance):
        '''
        Adds an OSM map to the admin form. (requires leaflet to be included in the base.html and the #mapid css to be configured to specify a height)
        see: http://leafletjs.com/examples/quick-start/ for a guide
        '''
        html = '<div id="mapid"></div>'
        html += f'<script>var mymap = L.map("mapid").setView([{instance.latitude}, {instance.longitude}], 17);'
        html +=  '''L.tileLayer( 'http://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                subdomains: ['a','b','c']
                }}).addTo( mymap );
                '''
        html += f'''L.marker( [{instance.latitude}, {instance.longitude}] )
                .bindPopup( '<a href="https://www.openstreetmap.org/?mlat={instance.latitude}&mlon={instance.longitude}&zoom=17" target="_blank">{instance.name}</a>' )
                .addTo( mymap );
                </script>'''
        return format_html(html)

This assumes you have a latitude and longitude field in your model.. Then add show_map to your readonly_fields and your fieldset and it should show your map in the admin.

This is what it looks like: image

nyejon avatar Oct 27 '17 06:10 nyejon

Guys, What is the status of this - Will be django geo gis support added to the django-material? in some reasonable future?

opalczynski avatar Nov 03 '17 16:11 opalczynski