I am working on a postgres based django project to create floor plans. I have experience in python3 but js is new to me. I need this to be running in very basic functionality in the next 6 days. So yes: My sweat turned acid.
The goal is pretty damn simple: Floor plan with updating overlays (e.g. blue rectangle marks free storage etc).
What I need:
- Floor plan as base-map
- rectangular (updating) overlays
- markers
Django-leaflet works fine, but rastercoord is killing me. I simply tried to implement the demo code into my template html and it seems like it just silently fails to execute. Django-leaflet itself works like a charm, markers are displayed and so on.
I modified the original example code to use my tiled milkyway image from wikipedia, which works just fine.
/*
* @copyright 2015 commenthol
* @license MIT
*/
/* global L */
;(function (window) {
function init (mapid) {
var minZoom = 0
var maxZoom = 5
var img = [
6000, // original width of image `karta.jpg`
3000 // original height of image
]
// create the map
var map = L.map(mapid, {
minZoom: minZoom,
maxZoom: maxZoom
})
// assign map and image dimensions
var rc = new L.RasterCoords(map, img)
// set the view on a marker ...
map.setView(rc.unproject([1, 1447]), 4)
// the tile layer containing the image generated with gdal2tiles --leaflet ...
L.tileLayer('./tiles/{z}/{x}/{y}.png', {
noWrap: true,
attribution: 'VOID'
}).addTo(map)
}
init('map')
}(window))But implemented in django nothing happens. The map is displayed with default settings. The template HTML:
<!doctype html>
<html lang="de">
{% load leaflet_tags %}
<head>
<meta name=Locator charset="utf-8" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
<title>EUT Locator</title>
{% leaflet_js plugins="ALL" %}
{% leaflet_css plugins="ALL" %}
</head>
<style>
* {
font-family: avenir;
margin: 1%;
}
.leaflet-container { /* all maps */
width: 600px;
height: 600px;
}
</style>
<body>
<h1>This is what you get</h1>
<p>Not much, really</p>
<script type="text/javascript">
function map_init_raster (mapid, options) {
var minZoom = 0
var maxZoom = 5
var img = [
6000, // original width of image `karta.jpg`
3000 // original height of image
]
// create the map
var map = L.map(mapid, {
minZoom: minZoom,
maxZoom: maxZoom
})
// assign map and image dimensions
var rc = new L.rastercoords(map, img)
// set the view on a marker ...
map.setView(rc.unproject([1, 1447]), 4)
// the tile layer containing the image generated with gdal2tiles --leaflet ...
L.tileLayer('./milkyway/{z}/{x}/{y}.png', {
noWrap: true,
attribution: 'VOID'
}).addTo(map)
}
init('map')
}
</script>
{% leaflet_map "yourmap" callback="window.map_init_raster" %}
</body>
</html>
The interesting part of the settings.py:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
LEAFLET_CONFIG = {
'SRID' : 3857,
'DEFAULT_CENTER': (0, 0),
'DEFAULT_ZOOM': 1,
'MIN_ZOOM': 0,
'MAX_ZOOM': 5,
'RESET_VIEW': False,
'PLUGINS': {
'rastercoords': {
'css': '',
'js': 'leaflet-rastercoords/rastercoords.js',
'auto-include': True,
},
}
}Cheers with tears Hobel
Your callback take the map as a parameter and not the id of a map. The map is already created. Try this out:
I don't know rastercoords so I can't help you on that.