I'm having trouble specifying a custom SRID with django-leaflet.
The documentation on projections isn't very detailed, and mentions only briefly:
By default, django-leaflet will try to load the spatial reference from
your static files at “proj4js/{{ srid }}.js”. If it fails, it will
eventually rely on spatialreference.org.
I followed the django-leaflet installation guidelines, and added the SRID used in my data in PostGIS as follows:
LEAFLET_CONFIG = {
'SRID': 2056, # See http://spatialreference.org
'DEFAULT_CENTER': (46.800663464, 8.222665776),
'DEFAULT_ZOOM': 7,
'MIN_ZOOM': 1,
'MAX_ZOOM': 20,
}
But this raises the following errors in Chrome:
uncaught exception: Leaflet and proj4 must be loaded first
The script from “http://127.0.0.1:8000/static/proj4js/2056.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
Loading failed for the <script> with source “http://127.0.0.1:8000/static/proj4js/2056.js”.
uncaught exception: No projection definition for code EPSG:2056
I have leaflet in INSTALLED_APPS, and also load proj4.js and proj4leaflet.js in my page's head.
<!DOCTYPE html>
{% load static %}
{% load leaflet_tags %}
<html lang="en">
<head>
{% leaflet_js %}
{% leaflet_css %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>
<meta charset="utf-8">
<style>
.leaflet-container {
width: 600px;
height: 400px;
}
#specialbigmap {
height: 800px;
}
.django-leaflet-raw-textarea {
width: 100%;
}
</style>
</head>
<body>
<script type="text/javascript">
function map_init_basic (map, options) {
$.getJSON( "http://127.0.0.1:8000/en/api/mydata/?name=my_data1", function( data ) {
mygeojson = data.results
L.geoJSON(mygeojson).addTo(map);
});
}
</script>
{% leaflet_map "my_django_leaflet_map" callback="window.map_init_basic" %}
</body>
</html>
I tried running collectstatic as suggested here, but the errors persist (and I doubt whether collectstatic should even be used in development). Any suggestions to make this work?
Related
Once page load google tends graph is getting load under trendsBlock class. In below code once after calling next_fun() complete html code getting render with graph. I need to render inside of trendsBlock.
<html>
<body>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1173_RC01/embed_loader.js"></script>
<div class="trendsBlock">
<script type="text/javascript">
trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"IN","time":"2016-10-02 2017-11-02"},{"keyword":"citi bank","geo":"IN","time":"2016-10-02 2017-11-02"}],"category":0,"property":""}, {"exploreQuery":"date=2016-10-02 2017-11-02,2016-10-02 2017-11-02&geo=IN&q=dbs%20bank,citi%20bank","guestPath":"https://trends.google.com:443/trends/embed/"});
</script>
</div>
<button onclick="next_fun()">Click to next trends</button>
<script type="text/javascript">
function next_fun(){
//innerHTML in to class trendsBlock
//?
}
</script>
</body>
</html>
The renderExploreWidgetTo method allows one to embed the charts to any HTML element.
You can look at the below sample code to understand.
function next_fun(){
var divElem = document.getElementById('sampDiv');
trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
}
<html>
<body>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1328_RC04/embed_loader.js"> </script>
<div id='sampDiv'>
</div>
<button onclick="next_fun()">Click to next trends</button>
</body>
</html>
P.S: when I am running the above code in StackOverflow's internal compiler/browser it throws an error.
Error img!!
But works fine otherwise.
I am integrating reactjs with my django, I have done setup and even able to render page from server too, but in client side when it comes to rendering and event handling and attaching, I am getting error "Uncaught ReferenceError: MainContainer is not defined".
I am totally lost here, please help me.
<html>
<head>
<link rel="stylesheet" type="text/css" href="static/src/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="static/src/css/style.less"/>
</head>
<body>
<script>
// var INITIAL_DATA = JSON.parse('{{ serialized_value|safe }}')
var INITIAL_DATA = {{ serialized_value|safe }}
</script>
<div id="app">{{ rendered|safe }}</div>
<script type="text/javascript" src="static/build/index_webpack.js"></script>
<script>
// ReactDOM.render(React.createFactory(MainContainer)({isOpen: false, props: {'freeShipping': free_shipping_message_new,'navigationBar': [loose_leaf_content]}}), document.getElementById('app'));
ReactDOM.render(MainContainer({isOpen: false, props: {'freeShipping': free_shipping_message_new,'navigationBar': [loose_leaf_content]}}), document.getElementById('app'));
</script>
</body>
</html>
You might be better using django-webpack-loader to help you integrate your webpack bundles into django templates. For us, it took a lot of the pains away from setting webpack up alongside django. Now we don't have to think about webpack at all, it just sits there and automatically builds all of our apps and we can just integrate the bundles into our templates with
{% render_bundle 'react_app' %}
I followed angular2 tutorial https://angular.io/docs/ts/latest/tutorial/.
I didnt want it run under node.js lite-server, but under django.
I managed to finish it and its working BUT: everytime I import any angular module eg. in index.html:
System.import('static/dist/js/main')
.then(null, console.error.bind(console));
or in main.ts:
import {AppComponent} from './app.component'
or everywhere, javascript application is trying to load some js resource like static/dist/js/main file which doesnt exist of course, because the compiled file is named main.js not main.
When I add the extensions '.js' like:
System.import('static/dist/js/main.js')
.then(null, console.error.bind(console));
or
import {AppComponent} from './app.component.js'
It suddenly works, but ts to js compiler (npm run tsc) is throwing error (even throught its compiling) and my IDE is underlining imports as errors.
This is my full index.html:
{% verbatim %}
<html>
<head>
<base href="/">
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="static/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="static/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="static/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="static/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="static/node_modules/systemjs/dist/system.src.js"></script>
<script src="static/node_modules/rxjs/bundles/Rx.js"></script>
<script src="static/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="static/node_modules/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('static/dist/js/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
{% endverbatim %}
I checked this Angular2 Typescript app throws 404 on components when js extension not specified but it didnt helped me.
Does anyone have an idea, please?
Assuming you have configured tsc to output your code to the 'static/dist/js' folder you should be able to configure Systemjs like this:
<script>
System.defaultJSExtensions = true;
System.config({
baseURL: "./static/dist/js"
});
System.import("main")
</script>
Can the following href="#" be called automatically?
<a id="loadBtn" href="#">Do stuff</a></p>
Thanks!
(Update) In the following facebook gallery launcher:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<script type="text/javascript">
$(document).ready(function () {
$('#loadBtn').click(function () {
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
return false;
});
});
</script>
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<p><a id="loadBtn" href="#">Get photo</a></p>
<div id="albumsContainer"></div>
</body>
</html>
Essentially to get to the action faster rather than having msc bits of text to click first.
you can set href attribute with whatever value you want as per below code:
$('#loadBtn').attr('href','#');
Not sure whether the href='#' is just for example purposes or what you're putting in your final code.
(1) If you want to scroll to the top of the page, you can either use $('body').scrollTop(0) or animate it a bit with something like $('html, body').animate( {scrollTop : 0 }, 200); (If you want to animate it, just attach it to #loadBtn's click event and be sure to return false, so the anchor won't jump to the top and override your animation.)
If you want, you can also set window.location.hash so the hash location will be recorded.
(2) If you want to simulate a click on the link, you can use .trigger(), e.g.: $('#loadBtn').trigger('click');
I think following code will work for you:
$("#loadBtn").ready(function(){
$(this).click();
});
Also try this in your onload function:
document.getElementById('yourLinkID').click();
// Automatically href will be called
Thanks for your pointers. It lead me to the idea of just rearranging the javascript so that the code was executed without need to click anything:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<!--p><a id="loadBtn" href="#">Get photo</a></p-->
<div id="albumsContainer"></div>
<script type="text/javascript">
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
</script>
</body>
</html>
Using this template
<!DOCTYPE html>
<html>
<head>
{% load socialaccount %}
<title></title>
</head>
<body>
{% providers_media_js %}
</body>
</html>
This html is generated
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="/static/facebook/js/fbconnect.js"></script>
<script type="text/javascript">
allauth.facebook.init({ appId: '133560690071122',
locale: 'en_US',
loginOptions: {"scope": ""},
loginByTokenUrl: '/accounts/facebook/login/token/',
channelUrl : 'http://localhost:8000/accounts/facebook/channel/',
cancelUrl: '/accounts/social/login/cancelled/',
logoutUrl: '/accounts/logout/',
errorUrl: '/accounts/social/login/error/',
csrfToken: '0XAY1DNSymUReeSWlhj7rSbFSMToNmt8' });
</script>
</body>
</html>
However the facebook connect box is not showing up at all.
The javascript file is accessible and no js errors seem to be reported.
Any help would be highly appreciated :)
Just found out what I was missing:
Facebook Connect