update editor js to only use the REST API.
This commit is contained in:
parent
26c82ccb80
commit
c9eb98166c
3 changed files with 48 additions and 56 deletions
|
@ -8,9 +8,7 @@
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// Init Map
|
// Init Map
|
||||||
var map = L.map('mapeditor', {
|
var map = L.map('mapeditor', {
|
||||||
center: [120, 200],
|
|
||||||
zoom: 2,
|
zoom: 2,
|
||||||
maxBounds: {{ bounds }},
|
|
||||||
maxZoom: 10,
|
maxZoom: 10,
|
||||||
minZoom: 1,
|
minZoom: 1,
|
||||||
crs: L.CRS.Simple,
|
crs: L.CRS.Simple,
|
||||||
|
@ -18,29 +16,52 @@ var map = L.map('mapeditor', {
|
||||||
closePopupOnClick: false,
|
closePopupOnClick: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add Source Layers
|
$.getJSON('/api/v1/map/packages/', function(packages) {
|
||||||
{% for source_list in sources %}
|
var bounds = [[0, 0], [0, 0]];
|
||||||
L.control.layers([], {
|
var pkg;
|
||||||
{% for source in source_list %}
|
for(var i=0;i<packages.length;i++) {
|
||||||
"{{ source.name }}": L.imageOverlay('{% url 'editor.sources.image' source=source.name %}', {{ source.jsbounds }}),{% endfor %}
|
pkg = packages[i];
|
||||||
}).addTo(map);
|
if (pkg.bounds === undefined) continue;
|
||||||
{% endfor %}
|
bounds = [[Math.min(bounds[0][0], pkg.bounds[0][0]), Math.min(bounds[0][1], pkg.bounds[0][1])],
|
||||||
|
[Math.max(bounds[1][0], pkg.bounds[1][0]), Math.max(bounds[1][1], pkg.bounds[1][1])]];
|
||||||
// Add Layer Control
|
|
||||||
L.LevelControl = L.Control.extend({
|
|
||||||
options: {
|
|
||||||
position: 'bottomright'
|
|
||||||
},
|
|
||||||
onAdd: function (map) {
|
|
||||||
var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-levels'), link;
|
|
||||||
{% for level in levels reversed %}
|
|
||||||
link = L.DomUtil.create('a', '{% if forloop.last %}current{% endif %}', container);
|
|
||||||
link.innerHTML = '{{ level.name }}';
|
|
||||||
{% endfor %}
|
|
||||||
return container;
|
|
||||||
}
|
}
|
||||||
});
|
map.setMaxBounds(bounds);
|
||||||
map.addControl(new L.LevelControl());
|
console.log(bounds);
|
||||||
|
map.fitBounds(bounds, {padding: [30, 50]});
|
||||||
|
})
|
||||||
|
|
||||||
|
$.getJSON('/api/v1/map/sources/', function(sources) {
|
||||||
|
var layers = {};
|
||||||
|
var source;
|
||||||
|
for(var i=0;i<sources.length;i++) {
|
||||||
|
source = sources[i];
|
||||||
|
if (layers[source.package] === undefined) layers[source.package] = {}
|
||||||
|
layers[source.package][source.name] = L.imageOverlay('/api/v1/map/sources/'+source.name+'/image/', source.bounds);
|
||||||
|
}
|
||||||
|
for(group_name in layers) {
|
||||||
|
console.log(group_name);
|
||||||
|
L.control.layers([], layers[group_name]).addTo(map);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
$.getJSON('/api/v1/map/levels/?ordering=-altitude', function(levels) {
|
||||||
|
L.LevelControl = L.Control.extend({
|
||||||
|
options: {
|
||||||
|
position: 'bottomright'
|
||||||
|
},
|
||||||
|
onAdd: function (map) {
|
||||||
|
var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-levels'), link;
|
||||||
|
var level;
|
||||||
|
for(var i=0;i<levels.length;i++) {
|
||||||
|
level = levels[i];
|
||||||
|
link = L.DomUtil.create('a', (i == levels.length-1) ? 'current' : '', container);
|
||||||
|
link.innerHTML = level.name;
|
||||||
|
}
|
||||||
|
return container;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
map.addControl(new L.LevelControl());
|
||||||
|
})
|
||||||
|
|
||||||
// Default styles:
|
// Default styles:
|
||||||
feature_types = {
|
feature_types = {
|
||||||
|
@ -134,7 +155,7 @@ map.on('editable:drawing:commit', function (e) {
|
||||||
L.popup({
|
L.popup({
|
||||||
closeButton: false,
|
closeButton: false,
|
||||||
autoClose: false,
|
autoClose: false,
|
||||||
}).setContent('<img src="{% static "img/loader.gif" %}">').setLatLng(e.layer.getCenter()).openOn(map);
|
}).setContent('<img src="/static/img/loader.gif">').setLatLng(e.layer.getCenter()).openOn(map);
|
||||||
console.log(e.layer.toGeoJSON());
|
console.log(e.layer.toGeoJSON());
|
||||||
}).on('editable:drawing:cancel', function (e) {
|
}).on('editable:drawing:cancel', function (e) {
|
||||||
if (currently_drawing === null && currently_adding === null) {
|
if (currently_drawing === null && currently_adding === null) {
|
||||||
|
@ -143,6 +164,5 @@ map.on('editable:drawing:commit', function (e) {
|
||||||
});
|
});
|
||||||
|
|
||||||
L.control.scale({imperial: false}).addTo(map);
|
L.control.scale({imperial: false}).addTo(map);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
from django.conf.urls import url
|
from django.conf.urls import url
|
||||||
|
from django.views.generic import TemplateView
|
||||||
|
|
||||||
from . import views
|
|
||||||
|
|
||||||
urlpatterns = [
|
urlpatterns = [
|
||||||
url(r'^$', views.index, name='editor.index'),
|
url(r'^$', TemplateView.as_view(template_name='editor/map.html'), name='editor.index')
|
||||||
url(r'^sources/image/(?P<source>[^/]+)$', views.source, name='editor.sources.image'),
|
|
||||||
]
|
]
|
||||||
|
|
|
@ -1,27 +0,0 @@
|
||||||
import json
|
|
||||||
import mimetypes
|
|
||||||
import os
|
|
||||||
|
|
||||||
from django.conf import settings
|
|
||||||
from django.core.files import File
|
|
||||||
from django.http import HttpResponse
|
|
||||||
from django.shortcuts import get_object_or_404, render
|
|
||||||
|
|
||||||
from ..mapdata.models import Level, Package, Source
|
|
||||||
|
|
||||||
|
|
||||||
def index(request):
|
|
||||||
return render(request, 'editor/map.html', {
|
|
||||||
'bounds': json.dumps(Source.max_bounds()),
|
|
||||||
'sources': [p.sources.all().order_by('name') for p in Package.objects.all()],
|
|
||||||
'levels': Level.objects.order_by('altitude'),
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
def source(request, source):
|
|
||||||
source = get_object_or_404(Source, name=source)
|
|
||||||
response = HttpResponse(content_type=mimetypes.guess_type(source.name)[0])
|
|
||||||
image_path = os.path.join(settings.MAP_ROOT, source.package.directory, 'sources', source.name)
|
|
||||||
for chunk in File(open(image_path, 'rb')).chunks():
|
|
||||||
response.write(chunk)
|
|
||||||
return response
|
|
Loading…
Add table
Add a link
Reference in a new issue