Leaflet grouping layer doesn't show on the map - django
I am working in GeoDjango. I am trying to add leaflet group from here. I copied files from the dist folder to my folder with the static files and imported them into HTML file. Anyway I have some problem with this part of code:
//GROUP LAYER
var osm =
'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
var baseLayers = {
"OSM":osm
}
var groupedOverlays = {
"layers": {
"layer1": datasets_buildings,
"layer2": datasets_roads,
"layer3": datasets_railways,
"layer4": datasets_natural
}
};
L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
When I typed this, I don't even get my layers on the map, I get just the empty leaflet map and without this part of the code, I get it.
Also, I would like to make functionality to this layer group which allows only one layer to be active.
This is all my code:
<html lang="en">
{% load static %}
{% load leaflet_tags %}
<head>
{% leaflet_js %}
{% leaflet_css %}
<style type="text/css">
#gis {
width: 100%;
height: 870px;
}
</style>
<link rel="stylesheet" type = 'text/css' href="{% static 'maps/dist/leaflet.groupedlayercontrol.css' %}">
<script type="text/javascript" src="{% static 'maps/dist/leaflet.ajax.js'%}"></script>
<script type="text/javascript" src="{% static 'maps/dist/leaflet.groupedlayercontrol.js' %}"></script>
</head>
<body>
<script type="text/javascript">
function our_layers(map,options){
//buildings
var datasets_buildings = new L.GeoJSON.AJAX("
{% url 'buildings_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
//roads
var datasets_roads = new L.GeoJSON.AJAX("{% url 'roads_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
//railways
var datasets_railways = new L.GeoJSON.AJAX("{% url 'railways_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
//natural
var datasets_natural = new L.GeoJSON.AJAX("{% url 'natural_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
datasets_natural.addTo(map);
datasets_railways.addTo(map);
datasets_roads.addTo(map);
datasets_buildings.addTo(map);
//GROUP LAYER
var osm = 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
var baseLayers = {
"OSM":osm
}
var groupedOverlays = {
"layers": {
"layer1": datasets_buildings,
"layer2": datasets_roads,
"layer3": datasets_railways,
"layer4enter code here": datasets_natural
}
};
L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
}
</script>
{% leaflet_map "gis" callback="window.our_layers" %}
</body>
</html>
And the error when I get in the console when I go on inspect is:
leaflet.js:5 Uncaught TypeError: Cannot create property '_leaflet_id' on string 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png'
at Object.n [as stamp] (leaflet.js:5)
at e._addLayer (leaflet.groupedlayercontrol.js:131)
at e.initialize (leaflet.groupedlayercontrol.js:26)
at new e (leaflet.js:5)
at Function.L.control.groupedLayers (leaflet.groupedlayercontrol.js:373)
at Object.our_layers [as callback] ((index):96)
at Function.L.Map.djangoMap (leaflet.extras.js:234)
at loadmap ((index):112)
Thank you in advance :)
I found a mistake. I knew it was stupid, but I lost so much time on this and I posted a question..
Anyway, the line:
var osm = 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
should be replace with this line:
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}{y}{x}.png');
Related
django leaflet_map how to add geojson layer on demand
I have a geodjango project using django-leaflet. A base map is displayed in the body of the html file using {% leaflet_map "mapid" %} . No other initialization is needed for the base map to display. Also, there is a choice box of polygon features that user can select. Upon selection the selected feature should display on top of the base map. As shown, the selected feature is the success response of a post ajax call. I get the correct data, however, I don't know how to display it on the map.
<html>
<head>
{% load leaflet_tags %}
{% leaflet_css %}
{% leaflet_js %}
<style>
#mapid {
width: 870px;
height: 530px;
}
</style>
</head>
<body>
<div> {% leaflet_map "mapid" %} </div>
<form id="aoi-form" method="post" action="" >
{% csrf_token %}
<select id="aoi-choice" name="modelarea_sel_name" >
{% for aoi in modelarea.aois.field.choices %}
<option>{{aoi|title}}</option>
{% endfor %}
</select>
</form>
<script type="text/javascript">
$(document).ready(function() {
// sets the csrf token for all the ajax calls
setCSRFToken();
function displayModelArea(data) {
window.addEventListener("map:init", function(event) {
var map = event.detail.map;
L.geoJson(data, {
onEachFeature: function onEachFeature(feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
});
}
$('#aoi-choice').on('change', function(e) {
var selecteditem = $(this).find("option:selected").val();
$.ajax({
url: $("#aoi-form").attr("action"),
type: $("#aoi-form").attr("method"),
data: { "aoi-choice": selecteditem },
success: function(response) {
alert(response);
<How to add this geojson to the map in success?>
<something like:>
displayModelArea(response) // this is not working
},
error : function(xhr,errmsg,err) {}
}); // end of ajax
}); // end of on change
}); // end of document
</script>
</body>
</html>
views.py
def rsmgui_home(request):
template_name = 'rsmgui_nav.html'
if request.POST.get("aoi-choice"):
polydata = serialize('geojson', ModelArea.objects.filter(name=request.POST.get("aoi-choice")))
return JsonResponse(polydata, safe=False)
For those interested in the solution, I must say, my original code contained two mistakes:
1) Had to return HttpResponse instead of JsonResponse from the views.py.
2) Had to initialize and get handle of the map (i.e. mymap) outside of the $(document).ready. Although, I am sure I should be able to do the same with jquery, But I did not know how!
FYI - the data format returned from views was somethings like this:
{"type": "FeatureCollection", "features": [{"type": "Feature",
"properties": {
"objectid": 3235,
"name": "WCU-L38E-2",
"shape_area": 5178189.95436,
"shape_len": 20962.4168727,
"model": "rsmgui.modelarea"
},
"id": 3,
"geometry": {
"type": "MultiPolygon",
"coordinates":
[[[[-80.4431746089703, 26.1496150525031], [-80.4438712320284, 26.1494779568429], [-80.4438714835869, 26.1494791485814],
[-80.4438767327393, 26.1495038898062], [-80.443876985872, 26.1495050844166], [-80.4439596517546, 26.1498945523],
[-80.4439599048889, 26.1498957469102], [-80.4445181371852, 26.1525257445301], [-80.444518396688, 26.1525269377307],
[-80.4454063419315, 26.1566079785707], [-80.4454066030393, 26.1566091717754], [-80.4454367956768, 26.1567473825391],
[-80.4454269367566, 26.1568310621773], [-80.4454019935245, 26.1569010164227], [-80.4451487080981, 26.1572161211586],
[-80.4451198504533, 26.1572690055153], [-80.4451124234237, 26.1572826141087], [-80.4450987418606, 26.1573731140696],
[-80.4451097451673, 26.1574483323541], [-80.4451099518947, 26.1574492731537], [-80.4454045318579, 26.1587738519124],
[-80.4454291560893, 26.1588281989547], [-80.4454726925214, 26.158873231686], [-80.4454745412333, 26.1588751446035],
[-80.4457224526486, 26.1590556968988], [-80.4459825369665, 26.1592924192246], [-80.4460113732483, 26.1593318182711],
[-80.446029694147, 26.1594029793378], [-80.4460299489157, 26.1594041725167], [-80.4461426842445, 26.1599298599992],
[-80.4461429406032, 26.159931053184], [-80.4461632993508, 26.1600259843658], [-80.4461635557098, 26.1600271775505],
[-80.4461662854139, 26.1600399110449], [-80.446166541773, 26.1600411042296], [-80.4461669349025, 26.1600429241313],
[-80.4461698308018, 26.1600564420782], [-80.4461703745794, 26.1600589761589], [-80.4461706309386, 26.1600601693436],
[-80.4461724673901, 26.1600687195423], [-80.446172720567, 26.1600699141476], [-80.4461890554485, 26.1601460828104],
[-80.4461892651751, 26.1601470637419], [-80.4461894764895, 26.1601480446796], [-80.4464055948207, 26.1611557705659],
[-80.4464058511845, 26.1611569637501], [-80.4465182479751, 26.1616803740569], [-80.446518504341, 26.1616815672408],
[-80.4467438353217, 26.1627308699823], [-80.4467440932799, 26.1627320631719], [-80.4471482872166, 26.1646036789173],
[-80.4471485483585, 26.1646048721181], [-80.4483626433148, 26.1701518069936], [-80.4483628854181, 26.1701530015516],
[-80.4483814524309, 26.1702450510074], [-80.4483896526105, 26.1703196621089], [-80.44837083869, 26.1703813120244],
[-80.4483349119681, 26.1704454670367], [-80.448238820436, 26.1705762562447], [-80.4480865737154, 26.1708302726741],
[-80.4480562687647, 26.1709111657153], [-80.4480474043405, 26.1709779965095], [-80.4480570552683, 26.1710631695728],
[-80.4480726187489, 26.1711178954947], [-80.4480728735615, 26.1711190886688], [-80.448600444514, 26.1735684214603],
[-80.4486318283615, 26.1736785332924], [-80.4486793668728, 26.1737445068659], [-80.4492087688318, 26.1741548565954],
[-80.4492476879068, 26.1742313275962], [-80.4492734967374, 26.1743198523785], [-80.4492737277215, 26.1743210511907],
[-80.4493637707618, 26.174788553371], [-80.4494647807674, 26.1752251203668], [-80.4494649710993, 26.1752261843278],
[-80.4495030325796, 26.1754400354424], [-80.4495075156305, 26.1755698630249], [-80.4494919585678, 26.1757079020217],
[-80.4494654601658, 26.1758137385183], [-80.4494247803613, 26.1759047014177], [-80.4493654321733, 26.1760018949102],
[-80.449291361239, 26.1760990334811], [-80.449224827617, 26.1761585592545], [-80.4490944858737, 26.176220056103],
[-80.448817683956, 26.176319577968], [-80.4486133770828, 26.176391343208], [-80.448294685515, 26.1764133756087],
[-80.4482742214126, 26.1764147902816], [-80.4482629422319, 26.1764173105563], [-80.4482608358316, 26.1764177810802],
[-80.4481701381423, 26.1764380517997], [-80.4480857500865, 26.1764548904322], [-80.4480278075929, 26.1764455275992],
[-80.4479938505702, 26.1764255169321], [-80.4447866204566, 26.1616803278906], [-80.4427502472453, 26.1523162458952],
[-80.4425042672057, 26.1511130652601], [-80.4424324383669, 26.1508789484218], [-80.4422838184404, 26.1506638659222],
[-80.442263580685, 26.150586872045], [-80.4422584377825, 26.1505622200219], [-80.4422537121117, 26.1505393091941],
[-80.4422484417484, 26.1505144173773], [-80.4422447794031, 26.1504939380542], [-80.4422409109672, 26.1504737273243],
[-80.4422344502975, 26.1504440606653], [-80.4422140566669, 26.1500502089701], [-80.4421980585152, 26.1498452491223],
[-80.4421989899204, 26.149844702483], [-80.4422962649397, 26.149811382303], [-80.4423241174424, 26.1498018149787],
[-80.442339856439, 26.1497964493973], [-80.4423577440382, 26.1497903226474], [-80.4423887913014, 26.1497796872474],
[-80.4424405282263, 26.1497619686973], [-80.4424639436836, 26.1497539446344], [-80.4424890564009, 26.1497459185392],
[-80.4426580984819, 26.1496918891336], [-80.4431746089703, 26.1496150525031]]]]}}],
"crs": {
"type": "link",
"properties": {
"href": "http://spatialreference.org/ref/epsg/4326/",
"type": "proj4"
}
}
};
Corrected code:
<html>
<head>
{% load leaflet_tags %}
{% leaflet_css %}
{% leaflet_js %}
<style>
#mapid {
width: 870px;
height: 530px;
}
</style>
</head>
<body>
<div>
{% leaflet_map "mapid" %}
</div>
<form id="aoi-form" method="post" action="" >
{% csrf_token %}
<select id="aoi-choice" name="modelarea_sel_name" >
{% for aoi in modelarea.aois.field.choices %}
<option>{{aoi|title}}</option>
{% endfor %}
</select>
</form>
<script type="text/javascript">
var mymap;
window.addEventListener("map:init", function (event) {
mymap = event.detail.map;
}, false);
$(document).ready(function() {
function displayModelArea(map, data) {
L.marker([26.92, -81.5]).addTo(mymap);
L.geoJSON(data).addTo(mymap);
}
$('#aoi-choice').on('change', function(e) {
var selecteditem = $(this).find("option:selected").val();
$.ajax({
url: $("#aoi-form").attr("action"),
type: $("#aoi-form").attr("method"),
data: { "aoi-choice": selecteditem },
success: function(response) {
displayModelArea(mymap, response)
},
error : function(xhr,errmsg,err) {}
}); // end of ajax
}); // end of on change
}); // end of document
</script>
</body>
</html>
views.py
def rsmgui_home(request):
template_name = 'rsmgui_nav.html'
if request.POST.get("aoi-choice"):
polydata = serialize('geojson', ModelArea.objects.filter(name=request.POST.get("aoi-choice")))
return HttpResponse(polydata, content_type='json')
image slide not working properly in Java script
i am new here and trying add a image slider in my webpage. but i have tried several codes, the problem is my IE just showing only first image. then there is no image. MY IE is IE 11 and i am using netbeans8.0.2 and xampp.
what is the problem of not showing all the images in the slide?
here is the code:
<!DOCTYPE html>
<html>
<head>
<title>image slider!</title>
<script type="text/javascript">
var im1 = new Im();
im1.src = "1.jpg";
var im2 = new Im();
im2.src = "2.jpg";
var im3 = new Im();
im3.src = "3.jpg";
var im4 = new Im();
im.src = "4.jpg";
var im5 = new Im();
im5.src = "5.jpg";
</script>
</head>
<body>
<center>
<img src="slides/1.jpg" name="slider1" width=800 height=380 />
<script type="text/javascript">
var i=1;
function slidimage()
{
document.images.slider1.src = eval("im"+i+".src");
if (i<5)
{
i++;
}
else
{
i=1;
}
setTimeout("slidimage()",2000);
}
slidimage();
</script>
</center>
</body>
</html>
i have got this code from another post in stackoverflow by amin
sorry for the copy.
Polymer if-template with filter: filter not updating
I am using an if-template to show or hide items in a list, within a Polymer-element.
My template is based on a list of values, and filtered using a reference list.
Updating the list of values yields the desired effect. However, changing the filter reference list (here removing one element) does not yield an update of the template.
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/polymer.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<test-component></test-component>
</body>
</html>
<polymer-element name='test-component' attributes='itemlist filterlist'>
<template>
<style>
</style>
<table id='table'>
<tr template repeat="{{item in itemlist}}">
<template if="{{item | applyFilter(filterlist)}}">
<td>test</td>
</template>
</tr>
</table>
<input type='button' value='remove 1 element' on-click={{clicked}}></input>
<div id='msg'></div>
</template>
<script>
Polymer('test-component', {
itemlist: [1,2,3],
filterlist: [1,2],
applyFilter: function(item, filterlist) {
var test = false;
if (filterlist) {
filterlist.forEach(function(filteritem) {
test = test || ((new RegExp(filteritem)).test(item));
});
}
return test;
},
clicked: function() {
this.$.msg.innerHTML = 'Filter list was ' + this.filterlist;
this.filterlist.splice(1,1);
this.$.msg.innerHTML += ', now it\'s ' + this.filterlist;
}
});
See http://jsbin.com/vuvikare/4/edit?html,output for runnable code.
Is there a way to trigger this update (for example using filterChanged observer)?
Thanks
This is very much a hack, but I got it to work by adding this method:
filterlistChanged: function() {
Array.prototype.forEach.call(this.$.table.querySelectorAll('template[if]'), function(t) {
t.iterator_.updateIteratedValue();
});
},
Basically, it finds all the inner template elements in the table and forces them to update (using a private method).
How can I initiate Raphael.js?
<script type="text/javascript" src="raphael.js"></script>
<script>
var paper = new Raphael("holder", 320, 200);
function testPaper(){
var width10 = paper.width * 0.1;
var height10 = paper.height * 0.1;
var width80 = paper.width * 0.8;
var height80 = paper.height * 0.8
var c = paper.rect( width10, height10, width80, height80, Math.min( width10, height10 ) );
}
</script>
</head>
<body onload = "testPaper()">
<div id="holder"></div>
</body>
What's wrong with the above code? I've been trying to get Raphael working for over an hour now & it always complains:
Uncaught TypeError: Cannot read property 'x' of undefined raphael.js:11
The script that uses Raphael is probably running before the "holder" element has been created.
Either create the Raphael in a ready/onload event or trivially arrange the HTML like so:
<body>
<div id="holder"></div> <!-- also use correct closing tag -->
<script src="raphael.js"></script>
<script>
var paper = new Raphael("holder", 320, 200);
// ..
</script>
</body>
I had the same problem using draw2d library in Angular. I couldn't initialize the canvas. It's worth to note that the element MUST have the same name as the initialized canvas.
Django admin inline: select all for delete?
In django admin inline forms, there are checkboxes for deleting individual inline objects. Is there a way to enable selecting all of them at once for deletion?
Here's a solution I worked out:
In templates/admin/edit_inline/tabular.html
{% if inline_admin_formset.formset.can_delete %}<th>{% trans "Delete?" %} <input type="checkbox" class="selectall_checkbox"/></th>{% endif %}
and
<script type="text/javascript">
$('.selectall_checkbox').click(function(e) {
$(e.target).closest('table').find(':checkbox').filter(function () { return /DELETE/.test(this.name); }).each(function () {
this.checked = e.target.checked;
});
});
</script>
And here is a similar solution, but checkbox inserts with jQuery in footer block of admin/base_site.html template:
{% extends "admin/base.html" %}
...
{% block footer %}
<script type="text/javascript">
var $ = django.jQuery;
$(document).ready(function() {
$('.tabular table th:contains({% trans "Delete?" %})').each(function(index) {
var text = $(this).text();
$(this).html('<input type="checkbox" class="selectall_checkbox"> ' + text);
});
$('.selectall_checkbox').click(function(e) {
$(e.target).closest('table').find(':checkbox').filter(function () { return /DELETE/.test(this.name); }).each(function () {
this.checked = e.target.checked;
});
});
});
</script>
{% endblock footer %}