I am working with Django and geemap modules, in which I am trying to make an app that can display satellite data on the map and the map should also be interactive as in there should be a bidirectional flow of data from the front-end(Django template) to back-end(python script) and vice-versa.
As of now I only know how to display the instance of geemap.Map() on Jupyter Notebook cell or on Colab(we just need to write the name of the variable for it.). But, I have no idea about how can i display the instance of geemap.Map() in Django Template.
When I use the following method it just prints the instance object as a dictionary instead of interpreting it as a map and displaying the same.
The code for my views.py
from django.http import HttpResponse
from django.shortcuts import render
import geemap as gm
#import pandas as pd
def params(request):
g_map = gm.Map()
return render(request, "PlotMap/params.html", { "m" : g_map })
The code for the template(params.html)
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>map</title>
</head>
<body>
{{ m }}
</body>
</html>
The output that I get is as follows. output
If someone can help me out, It would mean a lot Thank you.
You can use geemap.foliumap.Map() or folium.Map()
Code for html template
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>map</title>
{{ map.header.render|safe }}
</head>
<body>
<div class="map">
{{ map.html.render|safe }}
</div>
</body>
<script> {{ map.script.render | safe }}</script>
</html>
Code for backend (views.py)
import folium
import geemap.foliumap as geemap
class map(TemplateView):
template_name = 'map.html'
def get_context_data(request):
figure = folium.Figure()
Map = geemap.Map(plugin_Draw = True,
Draw_export = True)
Map.add_to(figure)
figure.render()
return {"map": figure}
Code for urls.py
urlpatterns = [
path('', views.map.as_view(), name = 'map'),
]
Related
I am trying to get a vue component to work from a separate file called AppButton.js. This simple learning component should render a button with some css and disables the click when one hovers over the button. Instead, this code just displays text. I cannot figure out what is missing in my code and I would appreciate if someone can take a look.
Here is the content from AppButton.js:
export default {
template: '<button class="bg-gray-200 hover:bg-gray-400 border rounded px-5 py-2 disabled:cursor-not-allowed" v-bind:disabled="processing"><slot /></button>',
data() {
return {
processing: true
}
}
}
The AppButton.js is in the same directory as my index.html. Here is the content of the index.html.
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue#3"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-full grid place-items-center">
<div id="app">
<app-button>Scura</app-button>
</div>
<script type="module">
import AppButton from "AppButton.js"
let app = {
components: {
'app-button': AppButton
}
};
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
I tried loading vue.js devtools extension in my Chrome to debug this problem further but for some reason the vue.js devtools extension does not show in my devtools
This is the error I am getting in Chrome Console: Access to script at
'file:///C:/Users/scura/Documents/LearnHtmlCss/js/components/AppButton.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
index.html:18 GET file:///C:/Users/scura/Documents/LearnHtmlCss/js/components/AppButton.js net::ERR_FAILED
I am following microsoft online Vue tuturial. But following code should be outputting as below html page:
But I am getting this as output not sure why.
Why productName and productDescription are not appearing as string values?
index.js:
const app = Vue.createApp({
data() {
return {
productName: 'Book a Cruise to the Moon',
productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
// additional properties later
};
},
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Relecloud Galaxy Tours</title>
<link rel="stylesheet" href="./assets/styles.css" />
<!-- TODO: Import Vue.js core library -->
<script src="https://unpkg.com/vue#next"></script>
</head>
<body>
<div class="nav-bar"></div>
<h1>Relecloud Galaxy Tours</h1>
<!-- TODO: Add information display -->
<div id="app">
<h2>{{ productName }}</h2>
<div>{{ productDescription }}</div>
</div>
<!-- TODO: Import Vue app -->
<script src="./index.js"></script>
<script>
app.mount('#app');
</script>
</body>
</html>
I tested your code on my computer and it worked for me.
Make sure the file path is correct and try again.
I just copied and pasted.
i am working on a project using Laravel + Vue.
my question is how to import the javascript files to my current component.
basically, i want to convert the HTML code below to a component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="60">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Armenia Map</title>
<script src="data.js"></script>
<script src="country.js"></script>
</head>
<body>
<h1></h1>
<div id="map"></div>
</body>
</html>
This is my Compoent:
<template>
<div id="map"></div>
</template>
<script>
import * from '../plugins/country';
import * from '../plugins/map';
export default {
mounted(){
}
}
</script>
please if someone can help.
Thank you.
Depending on what you want to import, you can also do something like this:
import { mapGetters } from 'vuex'
const Countries = require('../plugins/country')
If the file contains javascript code you want to execute emidietely you can do like with bootstrap.js and just require the file.
require('./bootstrap')
https://alligator.io/vuejs/stripe-elements-vue-integration/
On this website, it says we need to import the file with the script tag in the index.html file, which I did, but I noticed I get a js error.
It's only when I imported directly the script inside the component that the error "'Stripe' is not defined" disappeared.
<template>
<div>
</div>
</template>
<script src="https://js.stripe.com/v3/"></script>
<script>
export default {
name: 'component',
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
I don't want to import it directly inside my component, because it's not clean, what can I do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://js.stripe.com/v3/"></script>
<title>vue-app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Late to the party, but here is a solution that works for me
Your index.html file looks fine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://js.stripe.com/v3/"></script>
<title>vue-app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Then in the component where you want to use it, you can access stripe with the window object, and set the publishable key. This can be done locally in a method, or globally for the component, like this:
<script>
const stripe = window.Stripe(process.env.VUE_APP_STRIPE_PK)
export default {
data() {
return {
// ...
}
},
methods: {
async confirmPayment() {
const paymentResult = await stripe.confirmCardPayment(this.clientSecret, {
receipt_email: 'email#example.com',
})
console.log('paymentResult:', paymentResult)
},
},
}
</script>
I think you should move the script tag of Stripe before the rest of your JavaScript code. The code is probably trying to access the Stripe object before it's been loaded.
I am trying to scrape data from a webpage with the following format
<html class="gr__racinng_applledaily_com_hk" style='overflow: initial;">
<head> ... </head>
<body data-gr-c-s-loaded="true">
<!-- Google Tag Mananger (noscript) -->
<noscript> ...</noscript>
<!-- End Google Tag Mananger (noscript) -->
<div data-v-6223d6a8 id="app" class="web"> ... </div>
</body>
</html>
By using
from bs4 import BeautifulSoup
page = BeautifulSoup(raw_html.content, 'html.parser')
or
from bs4 import BeautifulSoup
page = BeautifulSoup(raw_html.content, 'html5lib')
it missed the <div> part, is it possible to get it back