How to style markers and add legend to Django-Leaflet

Luca Moiana

unread,

Feb 3, 2016, 11:50:50 AM2/3/16

to geodjango

Noob question, following some good tutorial http://blog.mathieu-leplatre.info/geodjango-maps-with-leaflet.html I was able to create a simple view containing a leaflet map with my points.

Now I'd like to enrich the view styling markers, adding legend and other usual leaflet plugin, how do I edit my simple html?

cheers

{% load leaflet_tags %}
<html>
  <head>
    {% leaflet_js %}
    {% leaflet_css %}
  </head>
  <body>
    <h1>Weather Stations</h1>
    {% leaflet_map "main" callback="main_map_init" %}


    <script type="text/javascript">
        function main_map_init (map, options) {
            // Use Leaflet API here
        }
    </script>
  </body>
</html>

Alex Mandel

unread,

Feb 7, 2016, 1:45:44 PM2/7/16

to geod...@googlegroups.com

You need to inject some custom javascript following the leaflet examples
online. Best way to work on this is to dump some sample data to geojson,
and build a leaflet map on it's own first, then integrate it into django.

Enjoy,
Alex

Luca Moiana

unread,

Feb 15, 2016, 6:36:49 AM2/15/16

to geodjango, te...@wildintellect.com

Hi Alex,

thank you for your kind reply, but I still quite don't get the logic behind, the learning curve it's really steep.

Following it's the javascript for the map, I just want "var punti" to come from django:


//creo una mappa con relativa posizione e zoom iniziali
		 var map = L.map('map', {zoomControl: false,}).setView([42.695, 11.794], 6);
//aggiungo un layer di sfondo, o Base Layer
		var baseLayer =  L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
				attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
				continuousWorld: false,
				}).addTo(map);


// Add hash to map view
    var hash = new L.Hash(map);
// Add control and zoom home
		var zoomHome = L.Control.zoomHome({position: 'topleft'});
		zoomHome.addTo(map);
// Add nidi
// Dati GeoJSON
var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 0.2,
    fillOpacity: 0.2
};

 var markers = new L.MarkerClusterGroup();

var punti = L.geoJson(nidi_pt, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
});

punti.addTo(map);

// Add LOGO

		var info = L.control({position: 'bottomleft'});

		info.onAdd = function (map) {
		    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
		    this.update();
		    return this._div;
		};

		// method that we will use to update the control based on feature properties passed
		info.update = function (props) {
		    this._div.innerHTML = '<img src="http://www.dailyfocus.net/wp-content/uploads/2014/05/Logo-Terna.jpg" alt="Smiley face" height="58" width="120">';
		};

		info.addTo(map);

Alex M

unread,

Feb 22, 2016, 3:28:07 PM2/22/16

to Luca Moiana, geodjango, te...@wildintellect.com

You have return the geojson as part of a django view.
If it's an object in your existing view, then use the substitution
method from the templating. Most people prefer to define a separate view
that simply returns a geojson object, you then give leaflet the url to this.

Here's an example view using the vectorformats library from my Model
called Locations.

def locations_geojson(request,limit):
locations_qs = Locations.objects.all()[:limit]
djf = Django.Django(geodjango="geom")
geoj = GeoJSON.GeoJSON()
string = geoj.encode(djf.decode(locations_qs))
return HttpResponse(string)

It's exposed at a url /api/locations

So in leaflet you can say something like L.geoJson("/url/locations",....
I can't recall if you have fetch the geojson 1st with an ajax request or
not.

Enjoy,
Alex

Luca Moiana

unread,

Mar 2, 2016, 6:14:45 PM3/2/16

to geodjango, luca....@gmail.com, te...@wildintellect.com

Hi Alex,

thank you for pointing me in the right direction.

using

url(r'^cassette/data.geojson$', GeoJSONLayerView.as_view(model=Cassetta), name='data')

I was able to generate a geojson but not all the fields are in the geojson, in properties I only have the name of the model, any clue?

thanks

Alex M

unread,

Mar 3, 2016, 12:27:55 PM3/3/16

to geod...@googlegroups.com, luca....@gmail.com, te...@wildintellect.com

I've never used that shortcut before. Maybe what you need is actually
https://docs.djangoproject.com/en/dev/ref/contrib/gis/serializers/
Which you would implement in a view.

Ah now I see the function you are using comes from
https://github.com/makinacorpus/django-geojson

Read the docs on that page, seems you need to add the "properties"
option with a list of model fields you want.

Enjoy,
Alex

On 03/02/2016 03:14 PM, Luca Moiana wrote:
> Hi Alex,
>

>> <http://tile.openstreetmap.se/hydda/full/%7Bz%7D/%7Bx%7D/%7By%7D.png>',

Luca Moiana

unread,

Mar 30, 2016, 5:34:28 PM3/30/16

to geodjango, luca....@gmail.com, te...@wildintellect.com

Hi Alex, sorry I'm getting back to you, but I can't find a solution and, reading your previous posts, I can't understand.

here is the problem I'm facing, always in the GeoJson world.

I have two models, Sostegni, wich is a geomodel PointField and a model Cassette with a ForeignKey(Sostegni).

What I need to achieve, Is to have a GeoJson to pass to leflet, where I have all fields from Cassette and coordinates from Sostegni.

Can you point me in the right direction?

thanks for your precious help

L

Reply all

Reply to author

Forward