I'm very new to GIS and for learning I started with building a simple web app with GeoDjango. I am using django-leaflet. Since I have a very limited knowledge I am facing many challenges. I'm trying to put a specifc marker on my map as a test
models.py
from django.db import models
from django.contrib.gis.geos import point
from django.contrib.gis.db import models as gismodels
class Points(gismodels.Model):
data_lat = 44.915223
data_long = -93.209741
#property
def geom(self):
return point(self.data_lat, self.data_long, srid=4326)
def __unicode__(self):
return self.title
about.html
<body>
<h1> Map </h1>
{% leaflet_map "main" callback="main_map_init" %}
<script type="text/javascript">
function main_map_init (map, options){
var dataurl = '{% url "data" %}';
$.getJSON('dataurl', function(data) {
L.geoJson(data).addTo(map);
})
}
</script>
</body>
I'm having issue with data not being passed on to map. It would be nice if someone could point me to the right direction.
In about.html, the correct code would be (supposing data would be a link to the geojson created on the fly
var dataurl = '{% url "data" %}';
$.getJSON(dataurl, function(data) {
L.geoJson(data).addTo(map);
})
I suggest you to see for reference http://leafletjs.com/examples/geojson.html and try to create a map manually in an html page to see how it works, then you can add content dynamically with Python.
Related
I am getting an image file "plot.png" from s3 bucket using the following code
def read_froms3img(image_name):
ep_url=URL
access_id=ID_KEY
access_key=SECRET_KEY
s3_resource = boto3.resource(service_name = "s3",endpoint_url=ep_url, aws_access_key_id=access_id, aws_secret_access_key=access_key)
s3_client = boto3.client(service_name = "s3",endpoint_url=ep_url, aws_access_key_id=access_id , aws_secret_access_key=access_key)
bucket = s3_bucket
bucket = s3_resource.Bucket(bucket)
image = bucket.Object('Images/plot.png')
img_data = image.get().get('Body').read()
return Image.open(io.BytesIO(img_data))
I am calling the above function as below and pass the "contents" to the render_template('data.html)
contents = read_froms3img("plot.png")
return render_template('data.html', form_data = form_data, html_code = html, filename = contents)
And if i do contents.show(), it loads the image in my local.
data.html:
<img src="{{filename}}" height="50%" width="65%">
But the image is not loading in the frontend, if i do inspect element, i can see the below code in the tag
<img src="<PIL.PngImagePlugin.PngImageFile image mode=RGBA size=640x480 at 0x257583E0DF0>" height="50%" width="65%">
How to display the image in the tag in the html page.
Please help.
Thanks,
Updated Answer
I think you want to allow the web-browser to view an image stored in an S3 bucket. So, make your HTML point to a Flask view like this:
<img src="/S3image/REFERENCE">
where REFERENCE is something that uniquely identifies an image on your S3. Then in your Flask app:
from flask import Response
#app.route('/S3image/<ref>')
def serveS3(ref):
...
... all your code except your 'return' statement
...
return Response(img_data, mimetype='image/png')
Original Answer
You can't return a Python PIL Image object to a web-browser... they don't understand Python. You need to return a PNG image, and you have one already in your variable img_data, so just return that with the appropriate MIME type.
It will look something like:
from flask import Response
....
....
return Response(img_data, mimetype='image/png')
I'm having a problem trying to load a graph form json using JointJS. I know the theory (https://resources.jointjs.com/tutorial/serialization), however, I still do not know how to show a graph.
This is my html file:
<!-- JointJS libraries omitted for space -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
function read_json() {
$.getJSON("/jointsjdemo/demo.json", function(data) {
var graph = new joint.dia.Graph;
graph.fromJSON(data);
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 100,
gridSize: 1
});
});
}
read_json();
</script>
And this is my json file:
{"cells":[{"type":"standard.Rectangle","position":{"x":100,"y":30},"size":{"width":100,"height":40},"angle":0,"id":"42a7f123-1f0d-4d06-b49e-8cbcbbb17e23","z":1,"attrs":{"body":{"fill":"blue"},"label":{"fill":"white","text":"Hello"}}},{"type":"standard.Rectangle","position":{"x":400,"y":30},"size":{"width":100,"height":40},"angle":0,"id":"6ecac186-b9c1-4755-97db-704cd9b9156f","z":1,"attrs":{"body":{"fill":"blue"},"label":{"fill":"white","text":"World!"}}},{"type":"standard.Link","source":{"id":"42a7f123-1f0d-4d06-b49e-8cbcbbb17e23"},"target":{"id":"6ecac186-b9c1-4755-97db-704cd9b9156f"},"id":"fa23e165-3c9f-46f8-9fe9-e6660d4086ca","z":2,"attrs":{}}]}
When a load the web page, it shows nothing on screen. I'm deployed my app in Apache Tomcat. Using Chrome Developer Tools, no errors are shown in Console.
I dont know what I'm missing.
Any help please? The json file was generated through toJSON command.
P.D. I think it should be better to hire someone, but I'm still trying to do this.
Right now I have a code that uses plotly to create a figure
def show_city_frequency(number_of_city = 10):
plot_1 = go.Histogram(
x=dataset[dataset.city.isin(city_count[:number_of_city].index.values)]['city'],
showlegend=False)
## Creating the grid for all the above plots
fig = tls.make_subplots(rows=1, cols=1)
fig.append_trace(plot_1,1,1)
fig['layout'].update(showlegend=True, title="Frequency of cities in the dataset ")
return plot(fig)
I want to incorporate this into a flask function and send it to an html template as a bytes io object using send_file. I was able to do this for a matplotlib just using:
img = io.BytesIO()
plt.plot(x,y, label='Fees Paid')
plt.savefig(img, format='png')
img.seek(0)
return send_file(img, mimetype='image/png')
I've read that I can do basically the same thing except using:
img = plotly.io.to_image(fig, format='png')
img.seek(0)
return send_file(img, mimetype='image/png')
but I can't seem to find where to download plotly.io. I've read that plotly offline doesn't work for Ubuntu so I am wondering if that is what my issue is as well. I am also open to new suggestions of how to send this image dynamically to my html code.
I would like to use HTML5 Local Storage with my Ember.js.
I haven't been able to find any examples of doing this without Ember Data.
How should this be done? What do I need to consider?
So let's say we have an object called Storage that in our real-world implementation would represent an adapter-like object for the localStorage to store and retrieve data:
App.Storage = Ember.Object.extend({
init: function() {
this.clearStorage();
var items = ['foo', 'bar', 'baz'];
localStorage.items = JSON.stringify(items);
},
find: function(key) {
// pseudo implementation
if( !Ember.isNone(key) ) {
var items = [];
var storedItems = JSON.parse(localStorage[key]);
storedItems.forEach(function(item){
items.pushObject(item);
});
return items;
}
},
clearStorage: function() {
// pseudo implementation
localStorage.clear();
}
});
Beside the pseudo implementations, you can see there is a dummy array with some data stored at object initialization, we will use this later in our IndexRoute model hook to retrieve it, just to show that this works.
Now to the more nice stuff, you could do the register & inject directly after the application is ready, but what if we wanted it to be already available at application initialization? Well "there an ember-feature for that", called Application.initializer, initializer are simple classes with a 'name' property and a initialize function in where you have access to your application container and do what ever needs to be done, let me explain this in code:
To be notified when the application start loading we can listen to the onLoad event to create our initializer classes that will register and inject the before mentioned Storage object into every controller and every route:
Ember.onLoad('Ember.Application', function(Application) {
// Initializer for registering the Storage Object
Application.initializer({
name: "registerStorage",
initialize: function(container, application) {
application.register('storage:main', application.Storage, {singleton: true});
}
});
// Initializer for injecting the Storage Object
Application.initializer({
name: "injectStorage",
initialize: function(container, application) {
application.inject('controller', 'storage', 'storage:main');
application.inject('route', 'storage', 'storage:main');
}
});
});
Now, since the Storage object was injected into every route and every controller we can finally get access to it in our IndexRoute model hook and make the stores array mentioned above available trough the call self.get('storage').find('items') to our template to be rendered (just added a promise to make it actually conform with the ember-way and with some fictive delay, rather than just returning the array):
App.IndexRoute = Ember.Route.extend({
model: function(){
var self = this;
var promise = new Ember.RSVP.Promise(function(resolve) {
Ember.run.later(function() {
var data = self.get('storage').find('items');
console.log(data);
resolve(data);
}, 1000);
});
return promise;
}
});
In our index template we can now agnostically loop over the dummy array not caring where it is coming from:
<script type="text/x-handlebars" id="index">
<h2>Index</h2>
<ul>
{{#each item in model}}
<li>Item: {{item}}</li>
{{/each}}
</ul>
</script>
And lastly, you can see here all the above explained in a working example: http://jsbin.com/eqAfeP/2/edit
Hope it helps.
The accepted answer is great, but I thought I would add this alternative:
Dan Gebhardt has created a very interesting library called Orbit.js for coordinating different data sources on a client. There are three out of the box data sources: memory, local storage, and json api.
For ember integration, check out ember-orbit.
It is still under heavy development at this time, and it introduces a different paradigm than Ember Data, so proceed with caution!
Hi I'm new to Typescript and Javascript and I'm having a few problems creating a googlemap instance.
I've downloaded the google.maps.d.ts declaration file and imported it to my typescript class like so, all the intellisense works fine etc.;
import googleMaps = module("google.maps");
module Mapping {
export class GoogleMap implements IMap {
public name: string;
private map: any;
private options: any;
constructor (mapDiv:Element) {
this.name = "GoogleMap";
this.options = { zoom: 3, MapTypeId: 'terrian' };
this.map = new googleMaps.google.maps.Map(mapDiv, this.options);
}
}
}
When I try to create this class in my index.cshtml file ;
<!DOCTYPE html>
<html>
<head><title>TypeScript Mapping</title></head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? key=MYKEYGOESHERE&sensor=false"></script>
<script type="text/javascript" src="~/scripts/require.js"></script>
<script type="text/javascript" src="~/typings/Mapping.js"></script>
<script type="text/javascript">
function initialize() {
var mapCanvas = document.getElementById("map");
var googleMap = new Mapping.GoogleMap(mapCanvas);
}
</script>
<body onload="initialize()">
<div id="map" style="height: 512px; width: 512px;"></div>
I get the following error ;
Microsoft JScript runtime error: Module name "google.maps" has not been loaded yet for context: _. Use require([])
What am I missing in order to load the googlemaps api?
Thanks in advance.
As you are including Google Maps as a script tag on your page, you probably don't want to use a module-loader to load it in.
So I would replace:
import googleMaps = module("google.maps");
With
/// <reference path="./google.maps.d.ts" />
The reference says to TypeScript "I will make sure this script is available at runtime".
The import statement says "Go and load this script for me at runtime".
I liked to create something called a shim function which let me work with window variables/objects (like google). I created that .ts file:
// -- Shim.ts:
/**
* Loads variable from window according to
* the name parameter.
*
* #export
* #param {string} name
* #returns {*} window[name]
*/
export function shim(name: string): any {
let global: any = window;
return global[name];
}
My basic setup than looks like:
- main.ts
-- shims
-- -- Shim.ts
-- -- Google.ts
-- -- Swiper.ts
-- -- ... .ts
and the Google.ts would than simply use that function like:
// -- Google.ts
import { shim } from '../shims/Shim';
/**
* Loads variable from window with the
* name 'google'
*
* #export
* #returns {*} window['google']
*/
export let google = shim('google');
and whereever you than want to use the google variable simply include it like:
import { google } from '../shims/Google';
Maybe also have a look at the typings - Typings is the simple way to manage and install TypeScript definition - which helped me a lot.
I currently wrote another Typescript Google Maps Setup and thought about sharing it with the community.
You can check it out using this link: https://github.com/DominikAngerer/typescript-google-maps